fix(tree): stabilize filetree mindmap switching

Open filetree mindmap assets inside the primary document pane so the sidebar root is not rebuilt during rapid mindmap/page switching.

Keep filetree active rows on doc:<documentId> and asset:<mindmapId>, shorten generated mindmap filenames, and preserve legacy index rows only as compatibility input.

Add task438-task445 browser smokes and close the 4-27/4-38/4-39/4-40 tree-domain bug records.
This commit is contained in:
lix-2026
2026-05-16 07:11:06 +08:00
parent 01fdd2a8c3
commit 274779c0d8
15 changed files with 2128 additions and 155 deletions
@@ -0,0 +1,135 @@
#!/usr/bin/env node
"use strict";
const assert = require("node:assert");
const fs = require("node:fs/promises");
const path = require("node:path");
const { chromium } = require("playwright");
const ROOT = path.resolve(__dirname, "..");
const BASE_URL = (process.env.MNOTE_UI_BASE_URL || process.env.MNOTE_WEB_SMOKE_BASE_URL || "http://127.0.0.1:3000").replace(/\/+$/, "");
const UI_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_UI_TIMEOUT_MS || 30_000);
const OUT_DIR = path.join(ROOT, "tmp", "task438-filetree-title-md-active-reveal-smoke");
async function quickLogin(page) {
await page.goto(`${BASE_URL}/auth`, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
const quickLoginButton = page.getByRole("button", { name: "测试账号快速登录" });
if (await quickLoginButton.count()) {
await quickLoginButton.click({ timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname === "/", { timeout: UI_TIMEOUT_MS });
}
}
async function openFileTree(page) {
await page.evaluate(() => {
const tab = document.querySelector('[data-mnote-sidebar-tree-tab="filetree"], button[aria-label="文件"]');
if (tab instanceof HTMLElement) tab.click();
});
await page.locator("#sidebar-file-tree-root").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
}
async function createPage(page) {
await page.getByRole("button", { name: "新建页面" }).click({ timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.startsWith("/documents/"), { timeout: UI_TIMEOUT_MS });
const documentId = new URL(page.url()).pathname.split("/").filter(Boolean).pop();
assert(documentId, "新建后 URL 缺少 documentId");
await page.waitForFunction(
(id) => Boolean(document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`)),
documentId,
{ timeout: UI_TIMEOUT_MS },
);
return documentId;
}
async function readFileTreeState(page, documentId) {
return page.evaluate((id) => {
const root = document.getElementById("sidebar-file-tree-root");
const row = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
const indexRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="index:${CSS.escape(id)}"]`);
const selectedRows = Array.from(document.querySelectorAll("#sidebar-file-tree-root .tree-row[data-selected='true']")).map((node) => ({
rowId: node.getAttribute("data-row-id") || "",
rowKind: node.getAttribute("data-row-kind") || "",
title: node.textContent?.trim() || "",
}));
const rect = row instanceof HTMLElement ? row.getBoundingClientRect() : null;
const rootRect = root instanceof HTMLElement ? root.getBoundingClientRect() : null;
const visible = Boolean(rect && rootRect && rect.bottom >= rootRect.top && rect.top <= rootRect.bottom);
return {
rowExists: row instanceof HTMLElement,
rowId: row instanceof HTMLElement ? row.getAttribute("data-row-id") || "" : "",
rowKind: row instanceof HTMLElement ? row.getAttribute("data-row-kind") || "" : "",
rowTitle: row instanceof HTMLElement ? row.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
objectIdentity: row instanceof HTMLElement ? row.getAttribute("data-object-identity") || "" : "",
indexRowExists: indexRow instanceof HTMLElement,
selectedRows,
visible,
scrollTop: root instanceof HTMLElement ? root.scrollTop : null,
rootText: root instanceof HTMLElement ? root.textContent?.slice(0, 2000) || "" : "",
};
}, documentId);
}
async function main() {
await fs.mkdir(OUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: process.env.HEADFUL !== "1" });
const context = await browser.newContext({ viewport: { width: 1440, height: 960 } });
const page = await context.newPage();
const navigationEvents = [];
page.on("framenavigated", (frame) => {
if (frame === page.mainFrame()) navigationEvents.push(frame.url());
});
const result = { ok: false, baseUrl: BASE_URL, documentId: null, beforeClick: null, afterClick: null, navigationEvents };
try {
await quickLogin(page);
await page.goto(BASE_URL, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
await openFileTree(page);
const documentId = await createPage(page);
result.documentId = documentId;
await openFileTree(page);
result.beforeClick = await readFileTreeState(page, documentId);
assert.equal(result.beforeClick.rowExists, true, "File Tree 应出现页面 markdown row");
assert.equal(result.beforeClick.indexRowExists, false, "File Tree 不应再显示 index.md row");
assert.match(result.beforeClick.rowTitle, /\.md$/, "页面正文 row 应显示为 .md 文件名");
assert.match(result.beforeClick.objectIdentity, /"objectKind":"page"/, "页面正文 row 应保持 page object identity");
await page.evaluate((id) => {
const root = document.getElementById("sidebar-file-tree-root");
const row = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
if (root instanceof HTMLElement) root.scrollTop = root.scrollHeight;
if (row instanceof HTMLElement) row.scrollIntoView({ block: "nearest" });
const button = row instanceof HTMLElement ? row.querySelector('[data-rust-action="open"], .tree-link') : null;
if (button instanceof HTMLElement) button.click();
}, documentId);
await page.waitForFunction(
(id) => {
const row = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
return row instanceof HTMLElement && row.getAttribute("data-selected") === "true";
},
documentId,
{ timeout: UI_TIMEOUT_MS },
);
result.afterClick = await readFileTreeState(page, documentId);
assert.deepEqual(
result.afterClick.selectedRows.map((row) => row.rowId),
[`doc:${documentId}`],
"点击页面正文 row 后 selected 应留在 .md row",
);
assert.equal(result.afterClick.visible, true, "点击长列表下方页面后目标 row 应仍在视口内");
result.ok = true;
} finally {
await fs.writeFile(path.join(OUT_DIR, "result.json"), `${JSON.stringify(result, null, 2)}\n`, "utf8");
await browser.close().catch(() => {});
}
console.log(JSON.stringify(result, null, 2));
}
main().catch((error) => {
console.error(error);
process.exit(1);
});
@@ -0,0 +1,173 @@
#!/usr/bin/env node
"use strict";
const assert = require("node:assert");
const fs = require("node:fs/promises");
const path = require("node:path");
const { chromium } = require("playwright");
const ROOT = path.resolve(__dirname, "..");
const BASE_URL = (process.env.MNOTE_UI_BASE_URL || process.env.MNOTE_WEB_SMOKE_BASE_URL || "http://127.0.0.1:3000").replace(/\/+$/, "");
const UI_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_UI_TIMEOUT_MS || 30_000);
const OUT_DIR = path.join(ROOT, "tmp", "task439-filetree-title-md-rename-smoke");
function cssString(value) {
return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
}
async function quickLogin(page) {
await page.goto(`${BASE_URL}/auth`, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
const quickLoginButton = page.getByRole("button", { name: "测试账号快速登录" });
if (await quickLoginButton.count()) {
await quickLoginButton.click({ timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname === "/", { timeout: UI_TIMEOUT_MS });
}
}
async function openFileTree(page) {
await page.evaluate(() => {
const tab = document.querySelector('[data-mnote-sidebar-tree-tab="filetree"], button[aria-label="文件"]');
if (tab instanceof HTMLElement) tab.click();
});
await page.locator("#sidebar-file-tree-root").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
}
async function createPage(page) {
const previousPathname = new URL(page.url()).pathname;
await page.getByRole("button", { name: "新建页面" }).click({ timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.startsWith("/documents/") && url.pathname !== previousPathname, { timeout: UI_TIMEOUT_MS });
const documentId = new URL(page.url()).pathname.split("/").filter(Boolean).pop();
assert(documentId, "新建后 URL 缺少 documentId");
await page.waitForFunction(
(id) => Boolean(document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`)),
documentId,
{ timeout: UI_TIMEOUT_MS },
);
return documentId;
}
async function beginRename(page, documentId) {
const selector = `#sidebar-file-tree-root .tree-row[data-row-id="doc:${cssString(documentId)}"]`;
await page.waitForFunction(
(id) => Boolean(document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`)),
documentId,
{ timeout: UI_TIMEOUT_MS },
);
const row = page.locator(selector).first();
await row.scrollIntoViewIfNeeded({ timeout: UI_TIMEOUT_MS }).catch(async () => {
await page.waitForTimeout(100);
await page.locator(selector).first().scrollIntoViewIfNeeded({ timeout: UI_TIMEOUT_MS });
});
await row.click({ timeout: UI_TIMEOUT_MS }).catch(async () => {
await page.waitForTimeout(100);
await page.locator(selector).first().click({ timeout: UI_TIMEOUT_MS });
});
await page.keyboard.press("F2");
const input = page.locator(`${selector} .tree-rename-input`).first();
await input.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
return input;
}
async function readRenameState(page, documentId) {
return page.evaluate((id) => {
const fileRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
const pageRow = document.querySelector(`#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(id)}"]`);
const validation = document.querySelector('[data-testid="tree-rename-validation"], [data-mnote-rename-validation]');
return {
documentTitle: document.title,
fileTreeTitle: fileRow instanceof HTMLElement ? fileRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
pageTreeTitle: pageRow instanceof HTMLElement ? pageRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
validationText: validation instanceof HTMLElement ? validation.textContent?.trim() || "" : "",
localApplied: document.documentElement.getAttribute("data-mnote-tree-local-command-applied") || "",
activeFileRowSelected: fileRow instanceof HTMLElement ? fileRow.getAttribute("data-selected") || "" : "",
};
}, documentId);
}
async function main() {
await fs.mkdir(OUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: process.env.HEADFUL !== "1" });
const context = await browser.newContext({ viewport: { width: 1440, height: 960 } });
const page = await context.newPage();
const requests = [];
page.on("request", (request) => {
if (request.url().includes("/api/tree/commands")) {
requests.push({ url: request.url(), postData: request.postData() || "" });
}
});
const result = { ok: false, baseUrl: BASE_URL, documentId: null, targetTitle: null, afterRename: null, invalidState: null, duplicateState: null, requests };
try {
await quickLogin(page);
await page.goto(BASE_URL, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
await openFileTree(page);
const documentId = await createPage(page);
result.documentId = documentId;
await openFileTree(page);
const targetTitle = `P2-Rename-${Date.now().toString().slice(-6)}`;
result.targetTitle = targetTitle;
let input = await beginRename(page, documentId);
await input.fill(`${targetTitle}.md`);
await input.press("Enter");
await page.waitForFunction(
({ id, expected }) => {
const fileRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
const pageRow = document.querySelector(`#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(id)}"]`);
const fileTitle = fileRow instanceof HTMLElement ? fileRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "";
const pageTitle = pageRow instanceof HTMLElement ? pageRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "";
return fileTitle === `${expected}.md` && pageTitle === expected;
},
{ id: documentId, expected: targetTitle },
{ timeout: UI_TIMEOUT_MS },
);
result.afterRename = await readRenameState(page, documentId);
assert.equal(result.afterRename.fileTreeTitle, `${targetTitle}.md`, "File Tree 应显示 .md 文件名");
assert.equal(result.afterRename.pageTreeTitle, targetTitle, "Page Tree 标题不应带 .md");
input = await beginRename(page, documentId);
await input.fill("非法/名称.md");
await input.press("Enter");
result.invalidState = await readRenameState(page, documentId);
assert.match(result.invalidState.validationText, /不能包含|非法/, "非法文件名应显示结构化校验提示");
await page.keyboard.press("Escape").catch(() => {});
const duplicateDocumentId = await createPage(page);
await openFileTree(page);
const renameRequestCountBeforeDuplicate = requests.filter((entry) => {
try {
const body = JSON.parse(entry.postData || "{}");
return body.action === "rename";
} catch (_) {
return false;
}
}).length;
input = await beginRename(page, duplicateDocumentId);
await input.fill(`${targetTitle}.md`);
await input.press("Enter");
result.duplicateState = await readRenameState(page, duplicateDocumentId);
assert.match(result.duplicateState.validationText, /同级已存在/, "同级重名应显示结构化校验提示");
const renameRequestCountAfterDuplicate = requests.filter((entry) => {
try {
const body = JSON.parse(entry.postData || "{}");
return body.action === "rename";
} catch (_) {
return false;
}
}).length;
assert.equal(renameRequestCountAfterDuplicate, renameRequestCountBeforeDuplicate, "同级重名不应提交 rename command");
result.ok = true;
} finally {
await fs.writeFile(path.join(OUT_DIR, "result.json"), `${JSON.stringify(result, null, 2)}\n`, "utf8");
await browser.close().catch(() => {});
}
console.log(JSON.stringify(result, null, 2));
}
main().catch((error) => {
console.error(error);
process.exit(1);
});
@@ -0,0 +1,166 @@
#!/usr/bin/env node
"use strict";
const assert = require("node:assert");
const fs = require("node:fs/promises");
const path = require("node:path");
const { chromium } = require("playwright");
const ROOT = path.resolve(__dirname, "..");
const BASE_URL = (process.env.MNOTE_UI_BASE_URL || process.env.MNOTE_WEB_SMOKE_BASE_URL || "http://127.0.0.1:3000").replace(/\/+$/, "");
const UI_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_UI_TIMEOUT_MS || 30_000);
const OUT_DIR = path.join(ROOT, "tmp", "task440-page-title-filetree-md-sync-smoke");
function cssString(value) {
return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
}
async function quickLogin(page) {
await page.goto(`${BASE_URL}/auth`, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
const quickLoginButton = page.getByRole("button", { name: "测试账号快速登录" });
if (await quickLoginButton.count()) {
await quickLoginButton.click({ timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname === "/", { timeout: UI_TIMEOUT_MS });
}
}
async function openFileTree(page) {
await page.evaluate(() => {
const tab = document.querySelector('[data-mnote-sidebar-tree-tab="filetree"], button[aria-label="文件"]');
if (tab instanceof HTMLElement) tab.click();
});
await page.locator("#sidebar-file-tree-root").waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
}
async function createPage(page) {
const previousPathname = new URL(page.url()).pathname;
await page.getByRole("button", { name: "新建页面" }).click({ timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.startsWith("/documents/") && url.pathname !== previousPathname, { timeout: UI_TIMEOUT_MS });
const documentId = new URL(page.url()).pathname.split("/").filter(Boolean).pop();
assert(documentId, "新建后 URL 缺少 documentId");
await page.waitForFunction(
(id) => Boolean(document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`)),
documentId,
{ timeout: UI_TIMEOUT_MS },
);
return documentId;
}
async function readState(page, documentId) {
return page.evaluate((id) => {
const fileRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
const pageRow = document.querySelector(`#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(id)}"]`);
const titleInput = document.querySelector(`[data-page-title-input="true"][data-document-id="${CSS.escape(id)}"]`);
return {
documentTitle: document.title,
topbarTitle: document.querySelector("[data-page-title-current='true']")?.textContent?.trim() || "",
titleInputValue: titleInput instanceof HTMLTextAreaElement ? titleInput.value : "",
fileTreeTitle: fileRow instanceof HTMLElement ? fileRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
pageTreeTitle: pageRow instanceof HTMLElement ? pageRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
titleLocalApplied: document.documentElement.getAttribute("data-mnote-title-local-applied") || "",
fileRowExists: fileRow instanceof HTMLElement,
indexRowExists: document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="index:${CSS.escape(id)}"]`) instanceof HTMLElement,
titleHistory: Array.isArray(window.__mnoteTask440TitleHistory) ? window.__mnoteTask440TitleHistory.slice() : [],
};
}, documentId);
}
async function watchFileTreeTitle(page, documentId) {
await page.evaluate((id) => {
const row = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
const title = row instanceof HTMLElement ? row.querySelector(".tree-link-title") : null;
window.__mnoteTask440TitleHistory = [];
const push = () => {
const text = title instanceof HTMLElement ? title.textContent?.trim() || "" : "";
if (!text) return;
const history = window.__mnoteTask440TitleHistory;
if (!Array.isArray(history)) return;
if (history[history.length - 1] !== text) history.push(text);
};
push();
if (title instanceof HTMLElement) {
const observer = new MutationObserver(push);
observer.observe(title, { childList: true, characterData: true, subtree: true });
window.__mnoteTask440TitleObserver = observer;
}
}, documentId);
}
async function main() {
await fs.mkdir(OUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: process.env.HEADFUL !== "1" });
const context = await browser.newContext({ viewport: { width: 1440, height: 960 } });
const page = await context.newPage();
const requests = [];
page.on("request", (request) => {
if (request.url().includes("/api/documents/title")) {
requests.push({ url: request.url(), postData: request.postData() || "" });
}
});
const result = { ok: false, baseUrl: BASE_URL, documentId: null, targetTitle: null, before: null, after: null, requests };
try {
await quickLogin(page);
await page.goto(BASE_URL, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
await openFileTree(page);
const documentId = await createPage(page);
result.documentId = documentId;
await openFileTree(page);
result.before = await readState(page, documentId);
assert.equal(result.before.fileRowExists, true, "File Tree 应出现页面 markdown row");
assert.equal(result.before.indexRowExists, false, "File Tree 不应显示旧 index row");
assert.match(result.before.fileTreeTitle, /\.md$/, "新建页面 File Tree 标题应是 .md 文件名");
await watchFileTreeTitle(page, documentId);
const targetTitle = `P3-Title-${Date.now().toString().slice(-6)}`;
result.targetTitle = targetTitle;
const titleInput = page.locator(`[data-page-title-input="true"][data-pane-role="primary"][data-document-id="${cssString(documentId)}"]`).first();
await titleInput.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
await titleInput.fill(targetTitle);
const titleSaveResponse = page.waitForResponse(
(response) =>
response.url().includes("/api/documents/title") &&
response.request().method() === "POST" &&
response.status() === 200 &&
(response.request().postData() || "").includes(targetTitle),
{ timeout: UI_TIMEOUT_MS },
);
await titleInput.evaluate((node) => node.blur());
await titleSaveResponse;
await page.waitForFunction(
({ id, expected }) => {
const fileRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(id)}"]`);
const pageRow = document.querySelector(`#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(id)}"]`);
const titleInput = document.querySelector(`[data-page-title-input="true"][data-document-id="${CSS.escape(id)}"]`);
const fileTitle = fileRow instanceof HTMLElement ? fileRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "";
const pageTitle = pageRow instanceof HTMLElement ? pageRow.querySelector(".tree-link-title")?.textContent?.trim() || "" : "";
const inputValue = titleInput instanceof HTMLTextAreaElement ? titleInput.value : "";
return fileTitle === `${expected}.md` && pageTitle === expected && inputValue === expected;
},
{ id: documentId, expected: targetTitle },
{ timeout: UI_TIMEOUT_MS },
);
result.after = await readState(page, documentId);
assert.equal(result.after.fileTreeTitle, `${targetTitle}.md`, "页面标题栏编辑后 File Tree 应同步显示 .md 文件名");
assert.equal(result.after.pageTreeTitle, targetTitle, "页面标题栏编辑后 Page Tree 不应带 .md");
assert.equal(result.after.titleInputValue, targetTitle, "页面标题输入框应保持页面标题");
assert.equal(result.after.titleLocalApplied, "true", "标题保存事件应触发 Sidebar 本地同步");
assert(!result.after.titleHistory.includes(targetTitle), `File Tree 标题同步过程中不应短暂显示裸标题:${JSON.stringify(result.after.titleHistory)}`);
assert(result.after.titleHistory.includes(`${targetTitle}.md`), `File Tree 标题变化历史应包含 .md 文件名:${JSON.stringify(result.after.titleHistory)}`);
result.ok = true;
} finally {
await fs.writeFile(path.join(OUT_DIR, "result.json"), `${JSON.stringify(result, null, 2)}\n`, "utf8");
await browser.close().catch(() => {});
}
console.log(JSON.stringify(result, null, 2));
}
main().catch((error) => {
console.error(error);
process.exit(1);
});
@@ -0,0 +1,136 @@
#!/usr/bin/env node
"use strict";
const fs = require("node:fs/promises");
const path = require("node:path");
const { chromium } = require("playwright");
const {
BASE_URL,
UI_TIMEOUT_MS,
assert,
cleanupDocuments,
createTempDocument,
ensureAuthenticated,
openDocument,
openFilesystemView,
renameDocument,
requestJson,
} = require("./tree-shell-smoke-helpers");
const TASK = "task443-filetree-mindmap-click-active-row-smoke";
const OUT_DIR = path.join(process.cwd(), "tmp", TASK);
const RESULT_PATH = path.join(OUT_DIR, "result.json");
async function writeResult(result) {
await fs.mkdir(OUT_DIR, { recursive: true });
await fs.writeFile(RESULT_PATH, `${JSON.stringify({ ...result, resultPath: RESULT_PATH }, null, 2)}\n`, "utf8");
}
async function createMindmap(request, workspaceId, documentId, mindmapId, title) {
return await requestJson(request, `/api/mindmap/${encodeURIComponent(documentId)}/${encodeURIComponent(mindmapId)}`, {
method: "POST",
data: {
commandName: "mindmaps.put",
workspaceId,
createOnly: true,
data: { root: { data: { text: title }, children: [] } },
},
});
}
async function readSelectedFileTreeRows(page) {
return await page.evaluate(() =>
Array.from(document.querySelectorAll('#sidebar-file-tree-root .tree-row[data-shell-mode="filetree"][data-selected="true"]')).map((row) => ({
rowId: row.getAttribute("data-row-id") || "",
rowKind: row.getAttribute("data-row-kind") || "",
docId: row.getAttribute("data-document-id") || row.getAttribute("data-doc-id") || "",
assetId: row.getAttribute("data-asset-id") || "",
objectIdentity: row.getAttribute("data-object-identity") || "",
title: (row.textContent || "").trim().slice(0, 160),
})),
);
}
(async () => {
await fs.mkdir(OUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ viewport: { width: 1440, height: 900 } });
const page = await context.newPage();
const navEvents = [];
const network = [];
page.on("framenavigated", (frame) => {
if (frame === page.mainFrame()) navEvents.push({ at: Date.now(), url: frame.url() });
});
page.on("request", (request) => {
const url = request.url();
if (url.includes("/mindmap/") || url.includes("/documents/") || url.includes("/api/tree/events")) {
network.push({ type: "request", method: request.method(), url });
}
});
let doc = null;
const result = {
baseUrl: BASE_URL,
fixture: {},
beforeSelectedRows: [],
afterSelectedRows: [],
navEvents,
network,
screenshots: [],
};
try {
await ensureAuthenticated(page, context.request);
doc = await createTempDocument(context.request, null);
const stamp = Date.now().toString().slice(-8);
const title = `TEST-443-mindmap-active-${stamp}`;
await renameDocument(context.request, doc.workspaceId, doc.documentId, title);
const mindmapId = `mindmap_443_active_${stamp}`;
await createMindmap(context.request, doc.workspaceId, doc.documentId, mindmapId, `TEST-443-mind-${stamp}`);
result.fixture = { ...doc, title, mindmapId };
await openDocument(page, doc.workspaceId, doc.documentId);
await openFilesystemView(page);
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"]`, { timeout: UI_TIMEOUT_MS });
result.beforeSelectedRows = await readSelectedFileTreeRows(page);
await page.click(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"] .tree-link`, { timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.includes(`/mindmap/${encodeURIComponent(doc.documentId)}/${encodeURIComponent(mindmapId)}`), {
timeout: UI_TIMEOUT_MS,
});
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"][data-selected="true"]`, {
timeout: UI_TIMEOUT_MS,
});
result.afterUrl = page.url();
result.afterSelectedRows = await readSelectedFileTreeRows(page);
const screenshotPath = path.join(OUT_DIR, "after-mindmap-click.png");
await page.screenshot({ path: screenshotPath, fullPage: true });
result.screenshots.push(screenshotPath);
assert(
result.afterSelectedRows.some((row) => row.rowId === `asset:${mindmapId}` && row.assetId === mindmapId),
`点击 mindmap 文件行后应保持 asset row 选中: ${JSON.stringify(result.afterSelectedRows)}`,
);
assert(
!result.afterSelectedRows.some((row) => row.rowId === `doc:${doc.documentId}`),
`点击 mindmap 文件行后不应闪回父页面行选中: ${JSON.stringify(result.afterSelectedRows)}`,
);
await writeResult({ ...result, ok: true });
console.log(`ok ${TASK} ${RESULT_PATH}`);
} catch (error) {
await writeResult({
...result,
ok: false,
error: error instanceof Error ? error.stack || error.message : String(error),
currentUrl: page.url(),
});
throw error;
} finally {
if (doc) await cleanupDocuments(context.request, [doc.documentId]).catch(() => null);
await browser.close().catch(() => null);
}
})().catch((error) => {
console.error(error instanceof Error ? error.stack || error.message : error);
process.exit(1);
});
@@ -0,0 +1,200 @@
#!/usr/bin/env node
"use strict";
const fs = require("node:fs/promises");
const path = require("node:path");
const { chromium } = require("playwright");
const {
BASE_URL,
UI_TIMEOUT_MS,
assert,
cleanupDocuments,
createTempDocument,
ensureAuthenticated,
openDocument,
openFilesystemView,
renameDocument,
requestJson,
} = require("./tree-shell-smoke-helpers");
const TASK = "task444-filetree-create-mindmap-title-cache-smoke";
const OUT_DIR = path.join(process.cwd(), "tmp", TASK);
const RESULT_PATH = path.join(OUT_DIR, "result.json");
async function writeResult(result) {
await fs.mkdir(OUT_DIR, { recursive: true });
await fs.writeFile(RESULT_PATH, `${JSON.stringify({ ...result, resultPath: RESULT_PATH }, null, 2)}\n`, "utf8");
}
async function createMindmap(request, workspaceId, documentId, mindmapId, title) {
return await requestJson(request, `/api/mindmap/${encodeURIComponent(documentId)}/${encodeURIComponent(mindmapId)}`, {
method: "POST",
data: {
commandName: "mindmaps.put",
workspaceId,
createOnly: true,
data: { root: { data: { text: title }, children: [] } },
},
});
}
async function readFileTreeRow(page, documentId) {
return await page.evaluate((docId) => {
const row = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(docId)}"]`);
if (!(row instanceof HTMLElement)) return null;
const title = row.querySelector(":scope > .tree-link > .tree-link-title");
const rect = row.getBoundingClientRect();
return {
rowId: row.getAttribute("data-row-id") || "",
selected: row.getAttribute("data-selected") || "",
focused: row.getAttribute("data-focused") || "",
title: title instanceof HTMLElement ? (title.textContent || "").trim() : "",
visible: rect.width > 0 && rect.height > 0,
};
}, documentId);
}
async function createPageFromFileTree(page) {
await openFilesystemView(page);
const beforeIds = await page.evaluate(() =>
Array.from(document.querySelectorAll('#sidebar-file-tree-root .tree-row[data-row-id^="doc:"]')).map((row) =>
row.getAttribute("data-row-id") || "",
),
);
await page.waitForSelector('#sidebar-file-tree-root [data-testid="filetree-create"]', { state: "attached", timeout: UI_TIMEOUT_MS });
await page.evaluate(() => {
const button = document.querySelector('#sidebar-file-tree-root [data-testid="filetree-create"]');
if (!(button instanceof HTMLElement)) throw new Error("filetree_create_button_missing");
button.click();
});
await page.waitForURL((url) => url.pathname.includes("/documents/"), { timeout: UI_TIMEOUT_MS }).catch(() => null);
const after = await page.waitForFunction(
(knownIds) => {
const rows = Array.from(document.querySelectorAll('#sidebar-file-tree-root .tree-row[data-row-id^="doc:"]'));
const created = rows.find((row) => {
const rowId = row.getAttribute("data-row-id") || "";
return rowId && !knownIds.includes(rowId);
});
if (!(created instanceof HTMLElement)) return null;
const title = created.querySelector(":scope > .tree-link > .tree-link-title");
return {
documentId: (created.getAttribute("data-document-id") || created.getAttribute("data-doc-id") || "").trim(),
rowId: created.getAttribute("data-row-id") || "",
title: title instanceof HTMLElement ? (title.textContent || "").trim() : "",
};
},
beforeIds,
{ timeout: UI_TIMEOUT_MS },
);
return await after.jsonValue();
}
(async () => {
await fs.mkdir(OUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ viewport: { width: 1440, height: 900 } });
const page = await context.newPage();
const consoleMessages = [];
const navEvents = [];
page.on("console", (message) => {
const text = message.text();
if (message.type() === "error" || /activeRowId|ReferenceError|filetree|tree live/i.test(text)) {
consoleMessages.push({ type: message.type(), text: text.slice(0, 2000) });
}
});
page.on("pageerror", (error) => {
consoleMessages.push({ type: "pageerror", text: error instanceof Error ? error.stack || error.message : String(error) });
});
page.on("framenavigated", (frame) => {
if (frame === page.mainFrame()) navEvents.push({ at: Date.now(), url: frame.url() });
});
const createdDocuments = [];
const result = {
baseUrl: BASE_URL,
fixture: {},
fileTreeCreated: null,
afterLive: null,
afterMindmapClick: null,
afterPageClick: null,
consoleMessages,
navEvents,
screenshots: [],
};
try {
await ensureAuthenticated(page, context.request);
const root = await createTempDocument(context.request, null);
createdDocuments.push(root.documentId);
const stamp = Date.now().toString().slice(-8);
await renameDocument(context.request, root.workspaceId, root.documentId, `TEST-444-root-${stamp}`);
const mindmapId = `mindmap_444_${stamp}`;
await createMindmap(context.request, root.workspaceId, root.documentId, mindmapId, `TEST-444-mind-${stamp}`);
result.fixture = { ...root, mindmapId };
await openDocument(page, root.workspaceId, root.documentId);
await openFilesystemView(page);
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"]`, { timeout: UI_TIMEOUT_MS });
result.fileTreeCreated = await createPageFromFileTree(page);
assert(result.fileTreeCreated && result.fileTreeCreated.documentId, "文件树新建后未找到新页面 row");
createdDocuments.push(result.fileTreeCreated.documentId);
assert(
result.fileTreeCreated.title.endsWith(".md"),
`文件树新建后的本地 row 应显示 .md: ${JSON.stringify(result.fileTreeCreated)}`,
);
await page.waitForTimeout(1500);
result.afterLive = await readFileTreeRow(page, result.fileTreeCreated.documentId);
assert(result.afterLive && result.afterLive.title.endsWith(".md"), `live 后文件树标题不应丢 .md: ${JSON.stringify(result.afterLive)}`);
await page.click(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"] .tree-link`, { timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.includes(`/mindmap/${encodeURIComponent(root.documentId)}/${encodeURIComponent(mindmapId)}`), {
timeout: UI_TIMEOUT_MS,
});
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"][data-selected="true"]`, {
timeout: UI_TIMEOUT_MS,
});
result.afterMindmapClick = await readFileTreeRow(page, result.fileTreeCreated.documentId);
await page.click(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${result.fileTreeCreated.documentId}"] .tree-link`, {
timeout: UI_TIMEOUT_MS,
});
await page.waitForURL((url) => url.pathname.includes(`/documents/${encodeURIComponent(result.fileTreeCreated.documentId)}`), {
timeout: UI_TIMEOUT_MS,
});
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${result.fileTreeCreated.documentId}"][data-selected="true"]`, {
timeout: UI_TIMEOUT_MS,
});
await page.waitForTimeout(500);
result.afterPageClick = await readFileTreeRow(page, result.fileTreeCreated.documentId);
assert(
result.afterPageClick && result.afterPageClick.title.endsWith(".md"),
`mindmap 后再点页面时文件树标题不应丢 .md: ${JSON.stringify(result.afterPageClick)}`,
);
assert(
!consoleMessages.some((message) => /activeRowId|ReferenceError/i.test(message.text)),
`不应出现 activeRowId/ReferenceError: ${JSON.stringify(consoleMessages)}`,
);
const screenshotPath = path.join(OUT_DIR, "after-page-click.png");
await page.screenshot({ path: screenshotPath, fullPage: true });
result.screenshots.push(screenshotPath);
await writeResult({ ...result, ok: true, finalUrl: page.url() });
console.log(`ok ${TASK} ${RESULT_PATH}`);
} catch (error) {
await writeResult({
...result,
ok: false,
currentUrl: page.url(),
error: error instanceof Error ? error.stack || error.message : String(error),
});
throw error;
} finally {
if (createdDocuments.length) await cleanupDocuments(context.request, createdDocuments).catch(() => null);
await browser.close().catch(() => null);
}
})().catch((error) => {
console.error(error instanceof Error ? error.stack || error.message : error);
process.exit(1);
});
@@ -0,0 +1,177 @@
#!/usr/bin/env node
"use strict";
const fs = require("node:fs/promises");
const path = require("node:path");
const { chromium } = require("playwright");
const {
BASE_URL,
UI_TIMEOUT_MS,
assert,
cleanupDocuments,
createTempDocument,
ensureAuthenticated,
openDocument,
openFilesystemView,
renameDocument,
requestJson,
} = require("./tree-shell-smoke-helpers");
const TASK = "task445-filetree-mindmap-switch-no-flicker-smoke";
const OUT_DIR = path.join(process.cwd(), "tmp", TASK);
const RESULT_PATH = path.join(OUT_DIR, "result.json");
async function writeResult(result) {
await fs.mkdir(OUT_DIR, { recursive: true });
await fs.writeFile(RESULT_PATH, `${JSON.stringify({ ...result, resultPath: RESULT_PATH }, null, 2)}\n`, "utf8");
}
async function createMindmap(request, workspaceId, documentId, mindmapId, title) {
return await requestJson(request, `/api/mindmap/${encodeURIComponent(documentId)}/${encodeURIComponent(mindmapId)}`, {
method: "POST",
data: {
commandName: "mindmaps.put",
workspaceId,
createOnly: true,
data: { root: { data: { text: title }, children: [] } },
},
});
}
async function readFileTreeState(page, documentId, mindmapId) {
return await page.evaluate(
({ documentId: docId, mindmapId: mapId }) => {
const fileRoot = document.getElementById("sidebar-file-tree-root");
const pageRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(docId)}"]`);
const mindmapRow = document.querySelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${CSS.escape(mapId)}"]`);
const titleNode = mindmapRow?.querySelector(":scope > .tree-link > .tree-link-title");
return {
fileRootStable: Boolean(fileRoot && fileRoot === window.__task445FileRoot),
bodyShell: document.body?.dataset?.mnoteShell || "",
currentPath: window.location.pathname,
pageSelected: pageRow instanceof HTMLElement ? pageRow.getAttribute("data-selected") || "" : "",
mindmapSelected: mindmapRow instanceof HTMLElement ? mindmapRow.getAttribute("data-selected") || "" : "",
mindmapTitle: titleNode instanceof HTMLElement ? (titleNode.textContent || "").trim() : "",
objectEditor:
document.querySelector("[data-mnote-object-editor]")?.getAttribute("data-mnote-object-editor") ||
document.querySelector('[data-testid="mnote-leptos-tiptap-island-editor-root"]')?.getAttribute("data-mnote-object-editor") ||
"",
};
},
{ documentId, mindmapId },
);
}
(async () => {
await fs.mkdir(OUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ viewport: { width: 1440, height: 900 } });
const page = await context.newPage();
const navEvents = [];
const consoleMessages = [];
page.on("framenavigated", (frame) => {
if (frame === page.mainFrame()) navEvents.push({ at: Date.now(), url: frame.url() });
});
page.on("console", (message) => {
if (message.type() === "error" || /mindmap|navigation|ReferenceError/i.test(message.text())) {
consoleMessages.push({ type: message.type(), text: message.text().slice(0, 2000) });
}
});
page.on("pageerror", (error) => {
consoleMessages.push({ type: "pageerror", text: error instanceof Error ? error.stack || error.message : String(error) });
});
const createdDocuments = [];
const result = {
baseUrl: BASE_URL,
fixture: {},
before: null,
afterMindmap: null,
afterPage: null,
afterMindmapAgain: null,
navEvents,
consoleMessages,
screenshots: [],
failures: [],
};
const recordFailure = (code, detail) => {
result.failures.push({ code, detail });
};
try {
await ensureAuthenticated(page, context.request);
const doc = await createTempDocument(context.request, null);
createdDocuments.push(doc.documentId);
const otherDoc = await createTempDocument(context.request, null);
createdDocuments.push(otherDoc.documentId);
const stamp = Date.now().toString().slice(-8);
await renameDocument(context.request, doc.workspaceId, doc.documentId, `TEST-445-root-${stamp}`);
await renameDocument(context.request, otherDoc.workspaceId, otherDoc.documentId, `TEST-445-other-${stamp}`);
const mindmapId = `mindmap_445_${stamp}`;
await createMindmap(context.request, doc.workspaceId, doc.documentId, mindmapId, `TEST-445-mind-${stamp}`);
result.fixture = { ...doc, otherDocumentId: otherDoc.documentId, mindmapId };
await openDocument(page, doc.workspaceId, doc.documentId);
await openFilesystemView(page);
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"]`, { timeout: UI_TIMEOUT_MS });
await page.evaluate(() => {
window.__task445FileRoot = document.getElementById("sidebar-file-tree-root");
});
result.before = await readFileTreeState(page, doc.documentId, mindmapId);
if (/^mindmap-mindmap[_-]/i.test(result.before.mindmapTitle)) {
recordFailure("mindmap_title_double_technical_prefix", result.before.mindmapTitle);
}
if (result.before.mindmapTitle.length > 24) {
recordFailure("mindmap_title_too_long", result.before.mindmapTitle);
}
await page.click(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"] .tree-link`, { timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.includes(`/mindmap/${encodeURIComponent(doc.documentId)}/${encodeURIComponent(mindmapId)}`), {
timeout: UI_TIMEOUT_MS,
});
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"][data-selected="true"]`, {
timeout: UI_TIMEOUT_MS,
});
result.afterMindmap = await readFileTreeState(page, doc.documentId, mindmapId);
if (!result.afterMindmap.fileRootStable) recordFailure("mindmap_click_replaced_sidebar_root", result.afterMindmap);
await page.click(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${otherDoc.documentId}"] .tree-link`, { timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.includes(`/documents/${encodeURIComponent(otherDoc.documentId)}`), { timeout: UI_TIMEOUT_MS });
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-row-id="doc:${otherDoc.documentId}"][data-selected="true"]`, {
timeout: UI_TIMEOUT_MS,
});
result.afterPage = await readFileTreeState(page, otherDoc.documentId, mindmapId);
if (!result.afterPage.fileRootStable) recordFailure("page_click_after_mindmap_replaced_sidebar_root", result.afterPage);
await page.click(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"] .tree-link`, { timeout: UI_TIMEOUT_MS });
await page.waitForURL((url) => url.pathname.includes(`/mindmap/${encodeURIComponent(doc.documentId)}/${encodeURIComponent(mindmapId)}`), {
timeout: UI_TIMEOUT_MS,
});
await page.waitForSelector(`#sidebar-file-tree-root .tree-row[data-asset-id="${mindmapId}"][data-selected="true"]`, {
timeout: UI_TIMEOUT_MS,
});
result.afterMindmapAgain = await readFileTreeState(page, doc.documentId, mindmapId);
if (!result.afterMindmapAgain.fileRootStable) recordFailure("mindmap_click_again_replaced_sidebar_root", result.afterMindmapAgain);
const screenshotPath = path.join(OUT_DIR, "after-mindmap-again.png");
await page.screenshot({ path: screenshotPath, fullPage: true });
result.screenshots.push(screenshotPath);
assert(result.failures.length === 0, `task445 failures: ${JSON.stringify(result.failures, null, 2)}`);
await writeResult({ ...result, ok: true, finalUrl: page.url() });
console.log(`ok ${TASK} ${RESULT_PATH}`);
} catch (error) {
await writeResult({
...result,
ok: false,
currentUrl: page.url(),
error: error instanceof Error ? error.stack || error.message : String(error),
});
throw error;
} finally {
if (createdDocuments.length) await cleanupDocuments(context.request, createdDocuments).catch(() => null);
await browser.close().catch(() => null);
}
})().catch((error) => {
console.error(error instanceof Error ? error.stack || error.message : error);
process.exit(1);
});