392 lines
16 KiB
JavaScript
392 lines
16 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
const assert = require("node:assert/strict");
|
||
|
|
const fs = require("node:fs/promises");
|
||
|
|
const path = require("node:path");
|
||
|
|
const { chromium } = require("playwright");
|
||
|
|
|
||
|
|
const TASK = "task447-tree-move-order-dual-browser-live-smoke";
|
||
|
|
const BASE_URL = (process.env.MNOTE_UI_BASE_URL || "http://127.0.0.1:3000").replace(/\/+$/, "");
|
||
|
|
const AUTH_BASE_URL = (process.env.MNOTE_AUTH_BASE_URL || BASE_URL).replace(/\/+$/, "");
|
||
|
|
const UI_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_UI_TIMEOUT_MS || 35_000);
|
||
|
|
const OUTPUT_DIR = path.join(process.cwd(), "tmp", "tree-live-cache-smoke", "20260516-task447-move-order");
|
||
|
|
const RESULT_PATH = path.join(OUTPUT_DIR, "result.json");
|
||
|
|
const SCREENSHOT_B_DOCUMENT = path.join(OUTPUT_DIR, "b-document-after-move.png");
|
||
|
|
const SCREENSHOT_B_FILETREE = path.join(OUTPUT_DIR, "b-filetree-after-move.png");
|
||
|
|
|
||
|
|
const e2ePassword = () => process.env.MNOTE_E2E_PASSWORD || ["Mnote", "E2E", "123!"].join("");
|
||
|
|
|
||
|
|
function cssString(value) {
|
||
|
|
return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
|
||
|
|
}
|
||
|
|
|
||
|
|
async function writeResult(payload) {
|
||
|
|
await fs.mkdir(OUTPUT_DIR, { recursive: true });
|
||
|
|
await fs.writeFile(RESULT_PATH, `${JSON.stringify({ ...payload, resultPath: RESULT_PATH }, null, 2)}\n`, "utf8");
|
||
|
|
}
|
||
|
|
|
||
|
|
async function requestJson(request, baseUrl, requestPath, init = {}) {
|
||
|
|
const response = await request.fetch(`${baseUrl}${requestPath}`, {
|
||
|
|
...init,
|
||
|
|
headers: {
|
||
|
|
...(init.data !== undefined ? { "content-type": "application/json" } : {}),
|
||
|
|
...(init.headers || {}),
|
||
|
|
},
|
||
|
|
timeout: 20_000,
|
||
|
|
});
|
||
|
|
const text = await response.text();
|
||
|
|
let payload = null;
|
||
|
|
try {
|
||
|
|
payload = text ? JSON.parse(text) : null;
|
||
|
|
} catch {
|
||
|
|
payload = text;
|
||
|
|
}
|
||
|
|
if (!response.ok()) {
|
||
|
|
throw new Error(`${requestPath} 请求失败: ${response.status()} ${typeof payload === "string" ? payload : JSON.stringify(payload)}`);
|
||
|
|
}
|
||
|
|
return payload;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function authenticate(request, email, name) {
|
||
|
|
await requestJson(request, AUTH_BASE_URL, "/api/auth", {
|
||
|
|
method: "POST",
|
||
|
|
data: {
|
||
|
|
action: "auth:signIn",
|
||
|
|
args: {
|
||
|
|
provider: "password",
|
||
|
|
params: { email, password: e2ePassword(), flow: "signUp", name },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function createPage(request, workspaceId, title, parentId = null) {
|
||
|
|
const payload = await requestJson(request, BASE_URL, "/api/tree/commands", {
|
||
|
|
method: "POST",
|
||
|
|
data: { action: "create", workspaceId, parentId, title },
|
||
|
|
});
|
||
|
|
const result = payload.result || payload;
|
||
|
|
const documentId = result.documentId || payload.documentId || result.id || "";
|
||
|
|
const resolvedWorkspaceId = result.workspaceId || payload.workspaceId || payload.workspace_id || workspaceId || "";
|
||
|
|
assert(documentId, `创建页面失败: ${JSON.stringify(payload)}`);
|
||
|
|
assert(resolvedWorkspaceId, `创建页面缺少 workspaceId: ${JSON.stringify(payload)}`);
|
||
|
|
return { documentId, workspaceId: resolvedWorkspaceId, title, payload };
|
||
|
|
}
|
||
|
|
|
||
|
|
async function treeCommand(request, workspaceId, action, documentId, extra = {}) {
|
||
|
|
return await requestJson(request, BASE_URL, "/api/tree/commands", {
|
||
|
|
method: "POST",
|
||
|
|
data: { action, workspaceId, documentId, ...extra },
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function emptyDocumentTrash(request, workspaceId) {
|
||
|
|
return await requestJson(request, BASE_URL, "/api/documents/empty-trash", {
|
||
|
|
method: "POST",
|
||
|
|
data: { workspaceId },
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function cleanup(request, workspaceId, documentIds) {
|
||
|
|
if (!workspaceId) return;
|
||
|
|
for (const documentId of documentIds.filter(Boolean)) {
|
||
|
|
await treeCommand(request, workspaceId, "archive", documentId).catch(() => null);
|
||
|
|
}
|
||
|
|
await emptyDocumentTrash(request, workspaceId).catch(() => null);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function openDocument(page, workspaceId, documentId) {
|
||
|
|
await page.goto(`${BASE_URL}/documents/${encodeURIComponent(documentId)}?workspaceId=${encodeURIComponent(workspaceId)}`, {
|
||
|
|
waitUntil: "commit",
|
||
|
|
timeout: UI_TIMEOUT_MS,
|
||
|
|
});
|
||
|
|
await page.locator(`[data-page-title-input="true"][data-document-id="${cssString(documentId)}"]`).first().waitFor({
|
||
|
|
state: "visible",
|
||
|
|
timeout: UI_TIMEOUT_MS,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function openFileTree(page, workspaceId, documentId) {
|
||
|
|
await openDocument(page, workspaceId, documentId);
|
||
|
|
await page.evaluate(() => {
|
||
|
|
const visible = (node) =>
|
||
|
|
node instanceof HTMLElement &&
|
||
|
|
!node.hidden &&
|
||
|
|
getComputedStyle(node).display !== "none" &&
|
||
|
|
getComputedStyle(node).visibility !== "hidden" &&
|
||
|
|
node.getClientRects().length > 0;
|
||
|
|
const fileRoot = document.getElementById("sidebar-file-tree-root");
|
||
|
|
if (visible(fileRoot)) return;
|
||
|
|
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 installTreeEventRecorder(page, label, records) {
|
||
|
|
await page.addInitScript(() => {
|
||
|
|
window.__MNOTE_TASK447_TREE_EVENTS__ = [];
|
||
|
|
const record = (name, event) => {
|
||
|
|
const detail = event && event.detail ? event.detail : {};
|
||
|
|
const payload = detail.payload || detail || {};
|
||
|
|
const raw = (() => {
|
||
|
|
try {
|
||
|
|
return JSON.stringify(payload);
|
||
|
|
} catch {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
window.__MNOTE_TASK447_TREE_EVENTS__.push({
|
||
|
|
name,
|
||
|
|
at: Date.now(),
|
||
|
|
revision: detail.revision || payload.revision || payload.cursor || "",
|
||
|
|
op: payload && payload.data && payload.data.op ? payload.data.op : payload.op || "",
|
||
|
|
raw: raw.slice(0, 2000),
|
||
|
|
});
|
||
|
|
};
|
||
|
|
window.addEventListener("tree:snapshot", (event) => record("tree:snapshot", event));
|
||
|
|
window.addEventListener("tree:delta", (event) => record("tree:delta", event));
|
||
|
|
window.addEventListener("tree:resync", (event) => record("tree:resync", event));
|
||
|
|
});
|
||
|
|
page.on("request", (request) => {
|
||
|
|
const url = request.url();
|
||
|
|
if (url.includes("/api/tree/events")) {
|
||
|
|
records.push({ label, type: "request", method: request.method(), url, at: Date.now() });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
page.on("requestfailed", (request) => {
|
||
|
|
const url = request.url();
|
||
|
|
if (url.includes("/api/tree/events")) {
|
||
|
|
records.push({
|
||
|
|
label,
|
||
|
|
type: "requestfailed",
|
||
|
|
method: request.method(),
|
||
|
|
url,
|
||
|
|
failure: request.failure()?.errorText || "",
|
||
|
|
at: Date.now(),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function recordNavigation(page, label, records) {
|
||
|
|
page.on("framenavigated", (frame) => {
|
||
|
|
if (frame === page.mainFrame()) {
|
||
|
|
records.push({ label, url: frame.url(), at: Date.now() });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function installOrderRecorder(page, rootDocumentId) {
|
||
|
|
await page.evaluate((rootId) => {
|
||
|
|
const readDirectChildren = (mode) => {
|
||
|
|
const rootSelector =
|
||
|
|
mode === "filetree"
|
||
|
|
? `#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(rootId)}"]`
|
||
|
|
: `#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(rootId)}"]`;
|
||
|
|
const rootRow = document.querySelector(rootSelector);
|
||
|
|
const list = rootRow?.closest(".tree-node")?.querySelector(":scope > .tree-children");
|
||
|
|
if (!list) return [];
|
||
|
|
return Array.from(list.querySelectorAll(":scope > .tree-node > .tree-row")).map((row) => ({
|
||
|
|
documentId: row instanceof HTMLElement ? row.dataset.documentId || row.dataset.docId || row.dataset.nodeId || "" : "",
|
||
|
|
rowId: row instanceof HTMLElement ? row.dataset.rowId || "" : "",
|
||
|
|
title: row instanceof HTMLElement ? row.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
const push = () => {
|
||
|
|
const record = {
|
||
|
|
at: Date.now(),
|
||
|
|
page: readDirectChildren("page"),
|
||
|
|
filetree: readDirectChildren("filetree"),
|
||
|
|
};
|
||
|
|
window.__MNOTE_TASK447_ORDER_HISTORY__ = window.__MNOTE_TASK447_ORDER_HISTORY__ || [];
|
||
|
|
const history = window.__MNOTE_TASK447_ORDER_HISTORY__;
|
||
|
|
const last = history[history.length - 1];
|
||
|
|
if (!last || JSON.stringify(last.page) !== JSON.stringify(record.page) || JSON.stringify(last.filetree) !== JSON.stringify(record.filetree)) {
|
||
|
|
history.push(record);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
push();
|
||
|
|
const observe = (root) => {
|
||
|
|
if (!(root instanceof HTMLElement)) return;
|
||
|
|
const observer = new MutationObserver(push);
|
||
|
|
observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-parent-id"] });
|
||
|
|
};
|
||
|
|
observe(document.getElementById("sidebar-tree-root"));
|
||
|
|
observe(document.getElementById("sidebar-file-tree-root"));
|
||
|
|
}, rootDocumentId);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function waitForExpectedOrder(page, rootDocumentId, expectedIds) {
|
||
|
|
await page.waitForFunction(
|
||
|
|
({ rootId, ids }) => {
|
||
|
|
const read = (mode) => {
|
||
|
|
const rootSelector =
|
||
|
|
mode === "filetree"
|
||
|
|
? `#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(rootId)}"]`
|
||
|
|
: `#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(rootId)}"]`;
|
||
|
|
const rootRow = document.querySelector(rootSelector);
|
||
|
|
const list = rootRow?.closest(".tree-node")?.querySelector(":scope > .tree-children");
|
||
|
|
if (!list) return [];
|
||
|
|
return Array.from(list.querySelectorAll(":scope > .tree-node > .tree-row")).map((row) =>
|
||
|
|
row instanceof HTMLElement ? row.dataset.documentId || row.dataset.docId || row.dataset.nodeId || "" : "",
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const pageOrder = read("page");
|
||
|
|
const fileOrder = read("filetree");
|
||
|
|
return ids.every((id, index) => pageOrder[index] === id && fileOrder[index] === id);
|
||
|
|
},
|
||
|
|
{ rootId: rootDocumentId, ids: expectedIds },
|
||
|
|
{ timeout: UI_TIMEOUT_MS },
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function readState(page, rootDocumentId) {
|
||
|
|
return await page.evaluate((rootId) => {
|
||
|
|
const history = window.__MNOTE_TASK447_ORDER_HISTORY__ || [];
|
||
|
|
const read = (mode) => {
|
||
|
|
const rootSelector =
|
||
|
|
mode === "filetree"
|
||
|
|
? `#sidebar-file-tree-root .tree-row[data-row-id="doc:${CSS.escape(rootId)}"]`
|
||
|
|
: `#sidebar-tree-root .tree-row[data-node-id="${CSS.escape(rootId)}"]`;
|
||
|
|
const rootRow = document.querySelector(rootSelector);
|
||
|
|
const list = rootRow?.closest(".tree-node")?.querySelector(":scope > .tree-children");
|
||
|
|
if (!list) return [];
|
||
|
|
return Array.from(list.querySelectorAll(":scope > .tree-node > .tree-row")).map((row) => ({
|
||
|
|
documentId: row instanceof HTMLElement ? row.dataset.documentId || row.dataset.docId || row.dataset.nodeId || "" : "",
|
||
|
|
parentId: row instanceof HTMLElement ? row.dataset.parentId || "" : "",
|
||
|
|
rowId: row instanceof HTMLElement ? row.dataset.rowId || "" : "",
|
||
|
|
title: row instanceof HTMLElement ? row.querySelector(".tree-link-title")?.textContent?.trim() || "" : "",
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
url: window.location.href,
|
||
|
|
liveStatus: document.documentElement.getAttribute("data-mnote-tree-live-status") || "",
|
||
|
|
liveApplied: document.documentElement.getAttribute("data-mnote-tree-live-applied") || "",
|
||
|
|
liveRevision: document.documentElement.getAttribute("data-mnote-tree-live-revision") || "",
|
||
|
|
liveError: document.documentElement.getAttribute("data-mnote-tree-live-apply-error") || "",
|
||
|
|
pageOrder: read("page"),
|
||
|
|
fileTreeOrder: read("filetree"),
|
||
|
|
orderHistory: history,
|
||
|
|
treeEvents: window.__MNOTE_TASK447_TREE_EVENTS__ || [],
|
||
|
|
};
|
||
|
|
}, rootDocumentId);
|
||
|
|
}
|
||
|
|
|
||
|
|
function orderIds(rows) {
|
||
|
|
return rows.map((row) => row.documentId);
|
||
|
|
}
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const stamp = Date.now();
|
||
|
|
const email = `mnote.stage8.move.${stamp}@example.com`;
|
||
|
|
const prefix = `TEST-10REVIEW-08-MOVE-${stamp}`;
|
||
|
|
const result = {
|
||
|
|
ok: false,
|
||
|
|
task: TASK,
|
||
|
|
baseUrl: BASE_URL,
|
||
|
|
authBaseUrl: AUTH_BASE_URL,
|
||
|
|
email,
|
||
|
|
prefix,
|
||
|
|
fixture: {},
|
||
|
|
navigationEvents: [],
|
||
|
|
treeEventRequests: [],
|
||
|
|
states: {},
|
||
|
|
screenshots: {
|
||
|
|
bDocument: SCREENSHOT_B_DOCUMENT,
|
||
|
|
bFileTree: SCREENSHOT_B_FILETREE,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const browser = await chromium.launch({ headless: process.env.HEADFUL !== "1" });
|
||
|
|
const contextA = await browser.newContext();
|
||
|
|
const contextB = await browser.newContext();
|
||
|
|
const documentB = await contextB.newPage();
|
||
|
|
const fileTreeB = await contextB.newPage();
|
||
|
|
const requestA = contextA.request;
|
||
|
|
let workspaceId = "";
|
||
|
|
const cleanupIds = [];
|
||
|
|
|
||
|
|
await installTreeEventRecorder(documentB, "B-document", result.treeEventRequests);
|
||
|
|
await installTreeEventRecorder(fileTreeB, "B-filetree", result.treeEventRequests);
|
||
|
|
recordNavigation(documentB, "B-document", result.navigationEvents);
|
||
|
|
recordNavigation(fileTreeB, "B-filetree", result.navigationEvents);
|
||
|
|
|
||
|
|
try {
|
||
|
|
for (const requestContext of [requestA, contextB.request]) {
|
||
|
|
await authenticate(requestContext, email, `stage8-move-${stamp}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const root = await createPage(requestA, null, `${prefix}-root`);
|
||
|
|
workspaceId = root.workspaceId;
|
||
|
|
cleanupIds.push(root.documentId);
|
||
|
|
const childA = await createPage(requestA, workspaceId, `${prefix}-a`, root.documentId);
|
||
|
|
const childB = await createPage(requestA, workspaceId, `${prefix}-b`, root.documentId);
|
||
|
|
const childC = await createPage(requestA, workspaceId, `${prefix}-c`, root.documentId);
|
||
|
|
cleanupIds.push(childA.documentId, childB.documentId, childC.documentId);
|
||
|
|
const initialOrder = [childA.documentId, childB.documentId, childC.documentId];
|
||
|
|
const expectedOrder = [childA.documentId, childC.documentId, childB.documentId];
|
||
|
|
result.fixture = {
|
||
|
|
workspaceId,
|
||
|
|
rootId: root.documentId,
|
||
|
|
childIds: initialOrder,
|
||
|
|
movedId: childC.documentId,
|
||
|
|
initialOrder,
|
||
|
|
expectedOrder,
|
||
|
|
};
|
||
|
|
|
||
|
|
await openDocument(documentB, workspaceId, root.documentId);
|
||
|
|
await openFileTree(fileTreeB, workspaceId, root.documentId);
|
||
|
|
await waitForExpectedOrder(documentB, root.documentId, initialOrder);
|
||
|
|
await waitForExpectedOrder(fileTreeB, root.documentId, initialOrder);
|
||
|
|
await installOrderRecorder(documentB, root.documentId);
|
||
|
|
await installOrderRecorder(fileTreeB, root.documentId);
|
||
|
|
result.states.before = {
|
||
|
|
document: await readState(documentB, root.documentId),
|
||
|
|
fileTree: await readState(fileTreeB, root.documentId),
|
||
|
|
};
|
||
|
|
|
||
|
|
const navigationStart = result.navigationEvents.length;
|
||
|
|
await treeCommand(requestA, workspaceId, "move", childC.documentId, {
|
||
|
|
parentId: root.documentId,
|
||
|
|
sortOrder: 1,
|
||
|
|
});
|
||
|
|
await waitForExpectedOrder(documentB, root.documentId, expectedOrder);
|
||
|
|
await waitForExpectedOrder(fileTreeB, root.documentId, expectedOrder);
|
||
|
|
await documentB.waitForTimeout(1000);
|
||
|
|
await fileTreeB.waitForTimeout(1000);
|
||
|
|
|
||
|
|
result.states.after = {
|
||
|
|
document: await readState(documentB, root.documentId),
|
||
|
|
fileTree: await readState(fileTreeB, root.documentId),
|
||
|
|
navigationEvents: result.navigationEvents.slice(navigationStart),
|
||
|
|
};
|
||
|
|
|
||
|
|
assert.deepEqual(orderIds(result.states.after.document.pageOrder).slice(0, 3), expectedOrder, "B 文档页 Page Tree 顺序未保持新顺序");
|
||
|
|
assert.deepEqual(orderIds(result.states.after.document.fileTreeOrder).slice(0, 3), expectedOrder, "B 文档页 File Tree 顺序未保持新顺序");
|
||
|
|
assert.deepEqual(orderIds(result.states.after.fileTree.pageOrder).slice(0, 3), expectedOrder, "B File Tree 页面 Page Tree 顺序未保持新顺序");
|
||
|
|
assert.deepEqual(orderIds(result.states.after.fileTree.fileTreeOrder).slice(0, 3), expectedOrder, "B File Tree 页面 File Tree 顺序未保持新顺序");
|
||
|
|
assert.equal(result.states.after.navigationEvents.length, 0, `B 浏览器发生了刷新/导航: ${JSON.stringify(result.states.after.navigationEvents)}`);
|
||
|
|
assert(!result.states.after.document.liveError, `B 文档页存在 live apply error: ${result.states.after.document.liveError}`);
|
||
|
|
assert(!result.states.after.fileTree.liveError, `B File Tree 存在 live apply error: ${result.states.after.fileTree.liveError}`);
|
||
|
|
|
||
|
|
await documentB.screenshot({ path: SCREENSHOT_B_DOCUMENT, fullPage: true });
|
||
|
|
await fileTreeB.screenshot({ path: SCREENSHOT_B_FILETREE, fullPage: true });
|
||
|
|
result.ok = true;
|
||
|
|
} catch (error) {
|
||
|
|
result.error = error instanceof Error ? error.stack || error.message : String(error);
|
||
|
|
result.failure = {
|
||
|
|
document: await readState(documentB, result.fixture.rootId || "").catch(() => null),
|
||
|
|
fileTree: await readState(fileTreeB, result.fixture.rootId || "").catch(() => null),
|
||
|
|
};
|
||
|
|
process.exitCode = 1;
|
||
|
|
} finally {
|
||
|
|
await cleanup(requestA, workspaceId, cleanupIds).catch((error) => {
|
||
|
|
result.cleanupError = error instanceof Error ? error.message : String(error);
|
||
|
|
});
|
||
|
|
await browser.close().catch(() => undefined);
|
||
|
|
await writeResult(result);
|
||
|
|
}
|
||
|
|
})();
|