feat: 接入 mnote web tree shell 与主页链路整理
- 增加 mnote-web tree/command 支持与前端 MnoteWebTreeShell 集成 - 调整 sidebar、documents、runtime config 与 dev/prod server 配套逻辑 - 补充 homepage/tree shell smoke 脚本并更新 harness 进度文件
This commit is contained in:
lix-2026
@@ -0,0 +1,363 @@
|
||||
"use strict";
|
||||
|
||||
// 说明：
|
||||
// - 这是 Sidebar / PageTree Rust Web tree shell 的真实网页 smoke 脚本。
|
||||
// - 目标覆盖：主页面已挂载 iframe tree shell、展开/折叠、在 shell 内创建子页面、重命名、移动、导航。
|
||||
// - 脚本会创建临时页面并在结束后清理，避免污染现有数据。
|
||||
|
||||
const { chromium } = require("playwright");
|
||||
|
||||
const BASE_URL = process.env.MNOTE_UI_BASE_URL || "http://127.0.0.1:3000";
|
||||
const MNOTE_WEB_BASE_URL = process.env.MNOTE_WEB_SMOKE_BASE_URL || "http://127.0.0.1:3104";
|
||||
const REQUEST_TIMEOUT_MS = 20_000;
|
||||
const UI_TIMEOUT_MS = 30_000;
|
||||
const TEST_LOGIN_BUTTON_NAME = "测试账号快速登录";
|
||||
|
||||
function assert(condition, message) {
|
||||
if (!condition) {
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
|
||||
async function requestJson(requestContext, path, init = {}) {
|
||||
const response = await requestContext.fetch(`${BASE_URL}${path}`, {
|
||||
...init,
|
||||
headers:
|
||||
init.data !== undefined
|
||||
? {
|
||||
"content-type": "application/json",
|
||||
...(init.headers || {}),
|
||||
}
|
||||
: {
|
||||
...(init.headers || {}),
|
||||
},
|
||||
timeout: REQUEST_TIMEOUT_MS,
|
||||
});
|
||||
|
||||
const text = await response.text();
|
||||
let payload = null;
|
||||
try {
|
||||
payload = text ? JSON.parse(text) : null;
|
||||
} catch {
|
||||
payload = text;
|
||||
}
|
||||
|
||||
if (!response.ok()) {
|
||||
throw new Error(
|
||||
`${path} 请求失败: ${response.status()} ${response.statusText()} ${typeof payload === "string" ? payload : JSON.stringify(payload)}`,
|
||||
);
|
||||
}
|
||||
|
||||
const contentType = response.headers()["content-type"] || "";
|
||||
if (!contentType.includes("application/json")) {
|
||||
const snippet = typeof payload === "string" ? payload.slice(0, 200) : JSON.stringify(payload).slice(0, 200);
|
||||
throw new Error(`${path} 返回了非 JSON 内容：${snippet}`);
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function createTempDocument(requestContext, parentId = null) {
|
||||
const payload = await requestJson(requestContext, "/api/documents/create", {
|
||||
method: "POST",
|
||||
data: { parentId },
|
||||
});
|
||||
assert(payload && typeof payload.id === "string", "创建临时页面失败：缺少 id");
|
||||
assert(payload && typeof payload.workspace_id === "string", "创建临时页面失败：缺少 workspace_id");
|
||||
return {
|
||||
documentId: payload.id,
|
||||
workspaceId: payload.workspace_id,
|
||||
};
|
||||
}
|
||||
|
||||
async function renameDocument(requestContext, workspaceId, documentId, title) {
|
||||
await requestJson(requestContext, "/api/documents/title", {
|
||||
method: "POST",
|
||||
data: {
|
||||
workspaceId,
|
||||
documentId,
|
||||
title,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function purgeDocument(requestContext, documentId) {
|
||||
await requestJson(requestContext, "/api/documents/purge", {
|
||||
method: "POST",
|
||||
data: { documentId },
|
||||
});
|
||||
}
|
||||
|
||||
async function getViewerIdentity(requestContext) {
|
||||
const payload = await requestJson(requestContext, "/api/auth/whoami", { method: "GET" });
|
||||
assert(payload && typeof payload.userId === "string" && payload.userId, "获取当前用户失败：缺少 userId");
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function ensureAuthenticated(page, requestContext) {
|
||||
await page.goto(`${BASE_URL}/auth`, { waitUntil: "networkidle", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
if (page.url().includes("/auth")) {
|
||||
const quickLoginButton = page.getByRole("button", { name: TEST_LOGIN_BUTTON_NAME });
|
||||
await quickLoginButton.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
await quickLoginButton.click({ timeout: UI_TIMEOUT_MS });
|
||||
await page.waitForURL((url) => !url.toString().includes("/auth"), {
|
||||
timeout: UI_TIMEOUT_MS,
|
||||
});
|
||||
}
|
||||
|
||||
return await getViewerIdentity(requestContext);
|
||||
}
|
||||
|
||||
async function runTreeShellRegression(page, requestContext, viewer, target) {
|
||||
const uniqueSuffix = Date.now().toString();
|
||||
const rootTitle = `task091-root-${uniqueSuffix}`;
|
||||
const childTitle = `task091-child-${uniqueSuffix}`;
|
||||
const createdTitle = `task091-created-${uniqueSuffix}`;
|
||||
const renamedTitle = `task091-renamed-${uniqueSuffix}`;
|
||||
|
||||
await renameDocument(requestContext, target.workspaceId, target.parentId, rootTitle);
|
||||
await renameDocument(requestContext, target.workspaceId, target.childId, childTitle);
|
||||
|
||||
const documentUrl = `${BASE_URL}/documents/${target.parentId}?workspaceId=${encodeURIComponent(target.workspaceId)}`;
|
||||
await page.goto(documentUrl, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const groupButton = page.getByRole("button", { name: "分组" });
|
||||
await groupButton.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
await groupButton.click({ timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const sidebarPanel = page.getByText("页面树");
|
||||
await sidebarPanel.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const iframe = page.locator('iframe[title="mnote-web tree shell"]');
|
||||
await iframe.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
const iframeSrc = await iframe.getAttribute("src");
|
||||
assert(iframeSrc && iframeSrc.includes(`${MNOTE_WEB_BASE_URL}/tree`), `Sidebar 未挂载 mnote-web tree shell：${iframeSrc}`);
|
||||
assert(iframeSrc.includes(`actorId=${encodeURIComponent(viewer.userId)}`), `tree shell 未透传当前用户 actorId：${iframeSrc}`);
|
||||
|
||||
const getTreeFrame = () => page.frameLocator('iframe[title="mnote-web tree shell"]');
|
||||
const waitForTreeReady = async () => {
|
||||
const frame = getTreeFrame();
|
||||
await frame.locator('[data-testid="tree-create-root"]').waitFor({
|
||||
state: "visible",
|
||||
timeout: UI_TIMEOUT_MS,
|
||||
});
|
||||
return frame;
|
||||
};
|
||||
const getFirstChildId = async (parentId) => {
|
||||
const frame = await waitForTreeReady();
|
||||
return await frame
|
||||
.locator(`.tree-node[data-node-id="${parentId}"] > .tree-children > .tree-node`)
|
||||
.first()
|
||||
.getAttribute("data-node-id");
|
||||
};
|
||||
const waitForFirstChildId = async (parentId, expectedId) => {
|
||||
const deadline = Date.now() + UI_TIMEOUT_MS;
|
||||
while (Date.now() < deadline) {
|
||||
const actualId = await getFirstChildId(parentId);
|
||||
if (actualId === expectedId) {
|
||||
return actualId;
|
||||
}
|
||||
await page.waitForTimeout(250);
|
||||
}
|
||||
return await getFirstChildId(parentId);
|
||||
};
|
||||
let treeFrame = await waitForTreeReady();
|
||||
|
||||
const parentRow = treeFrame.locator(`.tree-row[data-node-id="${target.parentId}"]`);
|
||||
const childRow = treeFrame.locator(`.tree-row[data-node-id="${target.childId}"]`);
|
||||
await parentRow.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
await childRow.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const toggleButton = parentRow.locator('[data-testid="tree-node-toggle"]');
|
||||
await toggleButton.click({ timeout: UI_TIMEOUT_MS });
|
||||
await childRow.waitFor({ state: "hidden", timeout: UI_TIMEOUT_MS });
|
||||
await toggleButton.click({ timeout: UI_TIMEOUT_MS });
|
||||
await childRow.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
page.once("dialog", (dialog) => dialog.accept(createdTitle));
|
||||
const createResponsePromise = page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes(`${MNOTE_WEB_BASE_URL}/api/tree/commands`) &&
|
||||
response.request().method() === "POST" &&
|
||||
response.status() === 200 &&
|
||||
(response.request().postData() || "").includes('"action":"create"'),
|
||||
{ timeout: UI_TIMEOUT_MS },
|
||||
);
|
||||
await parentRow.locator('[data-testid="tree-action-create"]').click({ timeout: UI_TIMEOUT_MS });
|
||||
const createResponse = await createResponsePromise;
|
||||
const createPayload = await createResponse.json();
|
||||
const createdDocumentId = createPayload?.result?.documentId;
|
||||
assert(typeof createdDocumentId === "string" && createdDocumentId, "tree shell 创建子页面失败：缺少 documentId");
|
||||
await page.waitForURL((url) => url.toString().includes(`/documents/${createdDocumentId}`), {
|
||||
timeout: UI_TIMEOUT_MS,
|
||||
});
|
||||
target.createdIds.push(createdDocumentId);
|
||||
|
||||
treeFrame = await waitForTreeReady();
|
||||
const createdRow = treeFrame.locator(`.tree-row[data-node-id="${createdDocumentId}"]`);
|
||||
await createdRow.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
page.once("dialog", (dialog) => dialog.accept(renamedTitle));
|
||||
const renameResponsePromise = page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes(`${MNOTE_WEB_BASE_URL}/api/tree/commands`) &&
|
||||
response.request().method() === "POST" &&
|
||||
response.status() === 200 &&
|
||||
(response.request().postData() || "").includes('"action":"rename"'),
|
||||
{ timeout: UI_TIMEOUT_MS },
|
||||
);
|
||||
await createdRow.locator('[data-testid="tree-action-rename"]').click({ timeout: UI_TIMEOUT_MS });
|
||||
await renameResponsePromise;
|
||||
treeFrame = await waitForTreeReady();
|
||||
const renamedRow = treeFrame.locator(`.tree-row[data-node-id="${createdDocumentId}"]`);
|
||||
await renamedRow.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const childOrderBeforeMove = await getFirstChildId(target.parentId);
|
||||
assert(
|
||||
childOrderBeforeMove === target.childId,
|
||||
`移动前的首个子节点异常：期望 ${target.childId}，实际 ${childOrderBeforeMove}`,
|
||||
);
|
||||
|
||||
const moveResponsePromise = page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes(`${MNOTE_WEB_BASE_URL}/api/tree/commands`) &&
|
||||
response.request().method() === "POST" &&
|
||||
response.status() === 200 &&
|
||||
(response.request().postData() || "").includes('"action":"move"'),
|
||||
{ timeout: UI_TIMEOUT_MS },
|
||||
);
|
||||
await renamedRow.locator('[data-testid="tree-action-move-up"]').click({ timeout: UI_TIMEOUT_MS });
|
||||
await moveResponsePromise;
|
||||
const firstChildAfterMove = await waitForFirstChildId(target.parentId, createdDocumentId);
|
||||
assert(
|
||||
firstChildAfterMove === createdDocumentId,
|
||||
`移动后排序未生效：期望首个子节点为 ${createdDocumentId}，实际 ${firstChildAfterMove}`,
|
||||
);
|
||||
|
||||
treeFrame = await waitForTreeReady();
|
||||
const latestChildRow = treeFrame.locator(`.tree-row[data-node-id="${target.childId}"]`);
|
||||
await latestChildRow.locator('[data-testid="tree-node-open"]').click({ timeout: UI_TIMEOUT_MS });
|
||||
await page.waitForURL((url) => url.toString().includes(`/documents/${target.childId}`), {
|
||||
timeout: UI_TIMEOUT_MS,
|
||||
});
|
||||
|
||||
return {
|
||||
documentUrl,
|
||||
rootTitle,
|
||||
childTitle,
|
||||
createdTitle,
|
||||
renamedTitle,
|
||||
createdDocumentId,
|
||||
};
|
||||
}
|
||||
|
||||
async function runPickerRegression(page, target) {
|
||||
const documentUrl = `${BASE_URL}/documents/${target.parentId}?workspaceId=${encodeURIComponent(target.workspaceId)}`;
|
||||
await page.goto(documentUrl, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const inspectorToggle = page.getByRole("button", { name: /显示页面选项|隐藏页面选项/ });
|
||||
await inspectorToggle.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
const currentLabel = (await inspectorToggle.getAttribute("aria-label")) || "";
|
||||
if (currentLabel.includes("显示")) {
|
||||
await inspectorToggle.click({ timeout: UI_TIMEOUT_MS });
|
||||
}
|
||||
|
||||
const moveEmbedButton = page.getByRole("button", { name: "移动/嵌入到..." });
|
||||
await moveEmbedButton.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
await moveEmbedButton.click({ timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const dialog = page.getByRole("dialog");
|
||||
await dialog.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
|
||||
const pickerIframe = dialog.locator('iframe[title="mnote-web tree shell"]');
|
||||
await pickerIframe.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
const iframeSrc = await pickerIframe.getAttribute("src");
|
||||
assert(iframeSrc && iframeSrc.includes("mode=picker"), `picker 未以 tree shell 轻量模式挂载：${iframeSrc}`);
|
||||
assert(iframeSrc.includes("allowRootPick=1"), `picker 未透传 allowRootPick：${iframeSrc}`);
|
||||
assert(
|
||||
iframeSrc.includes(`excludeIds=${encodeURIComponent(target.parentId)}`),
|
||||
`picker 未透传 excludeIds：${iframeSrc}`,
|
||||
);
|
||||
|
||||
const frame = dialog.frameLocator('iframe[title="mnote-web tree shell"]');
|
||||
const rootPick = frame.locator('[data-testid="tree-picker-root"]');
|
||||
await rootPick.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
||||
await rootPick.click({ timeout: UI_TIMEOUT_MS });
|
||||
|
||||
await dialog.waitFor({ state: "hidden", timeout: UI_TIMEOUT_MS });
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 960 },
|
||||
});
|
||||
const page = await context.newPage();
|
||||
|
||||
let caughtError = null;
|
||||
let result = null;
|
||||
const createdIds = [];
|
||||
|
||||
try {
|
||||
const viewer = await ensureAuthenticated(page, context.request);
|
||||
const parent = await createTempDocument(context.request, null);
|
||||
createdIds.push(parent.documentId);
|
||||
const child = await createTempDocument(context.request, parent.documentId);
|
||||
createdIds.push(child.documentId);
|
||||
|
||||
result = await runTreeShellRegression(page, context.request, viewer, {
|
||||
workspaceId: parent.workspaceId,
|
||||
parentId: parent.documentId,
|
||||
childId: child.documentId,
|
||||
createdIds,
|
||||
});
|
||||
await runPickerRegression(page, {
|
||||
workspaceId: parent.workspaceId,
|
||||
parentId: parent.documentId,
|
||||
});
|
||||
|
||||
console.log(
|
||||
JSON.stringify(
|
||||
{
|
||||
ok: true,
|
||||
workspaceId: parent.workspaceId,
|
||||
viewerUserId: viewer.userId,
|
||||
parentId: parent.documentId,
|
||||
childId: child.documentId,
|
||||
...result,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
} catch (error) {
|
||||
caughtError = error;
|
||||
} finally {
|
||||
for (const documentId of [...createdIds].reverse()) {
|
||||
try {
|
||||
await purgeDocument(context.request, documentId);
|
||||
} catch (cleanupError) {
|
||||
if (!caughtError) {
|
||||
caughtError = cleanupError;
|
||||
} else {
|
||||
console.error(
|
||||
`清理临时页面失败：${cleanupError instanceof Error ? cleanupError.stack || cleanupError.message : String(cleanupError)}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
await page.close().catch(() => undefined);
|
||||
await context.close().catch(() => undefined);
|
||||
await browser.close().catch(() => undefined);
|
||||
}
|
||||
|
||||
if (caughtError) {
|
||||
throw caughtError;
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error(error instanceof Error ? error.stack || error.message : String(error));
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,124 @@
|
||||
"use strict";
|
||||
|
||||
// 说明：
|
||||
// - 这是一条最小首页入口 smoke，不验证完整业务流。
|
||||
// - 它只验证 3000 主站入口链路是否可达，并明确 3104 不是首页可进入的前置条件。
|
||||
// - 未登录场景允许 "/" 返回 30x 到 "/auth"，也允许直接返回 HTML。
|
||||
|
||||
const BASE_URL = (process.env.MNOTE_UI_BASE_URL || "http://127.0.0.1:3000").replace(/\/+$/, "");
|
||||
const MNOTE_WEB_BASE_URL = (process.env.MNOTE_WEB_SMOKE_BASE_URL || "http://127.0.0.1:3104").replace(/\/+$/, "");
|
||||
const TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_TIMEOUT_MS || 8000);
|
||||
|
||||
function assert(condition, message) {
|
||||
if (!condition) {
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchWithTimeout(url, init = {}) {
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(new Error(`请求超时: ${url}`)), TIMEOUT_MS);
|
||||
try {
|
||||
return await fetch(url, {
|
||||
redirect: "manual",
|
||||
cache: "no-store",
|
||||
...init,
|
||||
signal: controller.signal,
|
||||
});
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
|
||||
async function readSnippet(response) {
|
||||
const text = await response.text().catch(() => "");
|
||||
return text.slice(0, 200);
|
||||
}
|
||||
|
||||
async function probeMnoteWeb() {
|
||||
try {
|
||||
const response = await fetchWithTimeout(`${MNOTE_WEB_BASE_URL}/health`, {
|
||||
method: "GET",
|
||||
});
|
||||
return {
|
||||
reachable: true,
|
||||
status: response.status,
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
reachable: false,
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function validateAuthEntry() {
|
||||
const response = await fetchWithTimeout(`${BASE_URL}/auth`, { method: "GET" });
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
const snippet = await readSnippet(response);
|
||||
|
||||
assert(response.ok, `/auth 请求失败: ${response.status} ${snippet}`);
|
||||
assert(
|
||||
contentType.includes("text/html"),
|
||||
`/auth 返回了非 HTML 内容: ${contentType || "<empty>"} ${snippet}`,
|
||||
);
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
contentType,
|
||||
};
|
||||
}
|
||||
|
||||
async function validateRootEntry() {
|
||||
const response = await fetchWithTimeout(`${BASE_URL}/`, { method: "GET" });
|
||||
const location = response.headers.get("location");
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
const snippet = await readSnippet(response);
|
||||
|
||||
const isRedirectToAllowedTarget =
|
||||
response.status >= 300 &&
|
||||
response.status < 400 &&
|
||||
typeof location === "string" &&
|
||||
(location.includes("/auth") || location.includes("/documents/"));
|
||||
|
||||
const isHtmlOk =
|
||||
response.ok &&
|
||||
contentType.includes("text/html");
|
||||
|
||||
assert(
|
||||
isRedirectToAllowedTarget || isHtmlOk,
|
||||
`/ 返回了不符合预期的结果: status=${response.status} location=${location || "<empty>"} contentType=${contentType || "<empty>"} snippet=${snippet}`,
|
||||
);
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
location,
|
||||
contentType,
|
||||
};
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const mnoteWeb = await probeMnoteWeb();
|
||||
const authEntry = await validateAuthEntry();
|
||||
const rootEntry = await validateRootEntry();
|
||||
|
||||
console.log(
|
||||
JSON.stringify(
|
||||
{
|
||||
ok: true,
|
||||
baseUrl: BASE_URL,
|
||||
mnoteWebBaseUrl: MNOTE_WEB_BASE_URL,
|
||||
mnoteWeb,
|
||||
authEntry,
|
||||
rootEntry,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error(error instanceof Error ? error.stack || error.message : String(error));
|
||||
process.exit(1);
|
||||
});
|
||||
Reference in New Issue
Block a user