339 lines
16 KiB
JavaScript
339 lines
16 KiB
JavaScript
#!/usr/bin/env node
|
|
"use strict";
|
|
|
|
const assert = require("node:assert");
|
|
const { spawn } = require("node:child_process");
|
|
const fs = require("node:fs");
|
|
const net = require("node:net");
|
|
const os = require("node:os");
|
|
const path = require("node:path");
|
|
const { chromium } = require("playwright");
|
|
const { fetchWithTimeout } = require("./task114-rust-web-gateway-entry-smoke.js");
|
|
|
|
let BASE_URL = (process.env.MNOTE_UI_BASE_URL || process.env.MNOTE_WEB_SMOKE_BASE_URL || "").replace(/\/+$/, "");
|
|
const UI_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_UI_TIMEOUT_MS || 30_000);
|
|
const SERVER_TIMEOUT_MS = Number(process.env.MNOTE_SMOKE_SERVER_TIMEOUT_MS || 90_000);
|
|
const SCREENSHOT_DIR = process.env.MNOTE_PHASE_E_SCREENSHOT_DIR || "/mnt/Data1T/mnote/tmp/wolai-editor-parity/task801-image-double-click-preview-local-smoke";
|
|
const LEPTOS_SPIKE_SOURCE = "/mnt/Data1T/mnote/rust/spikes/leptos-tiptap-spike/src/lib.rs";
|
|
const IMAGE_SRC = "/api/editor/image-placeholder.svg";
|
|
const ACTOR_ID = `task801-${process.pid}-${Date.now().toString(36)}`;
|
|
const RELATIVE_PATH = "README.md";
|
|
|
|
function assertImagePreviewSourceBoundary() {
|
|
const source = fs.readFileSync(LEPTOS_SPIKE_SOURCE, "utf8");
|
|
assert(
|
|
source.includes("ImagePreviewState") && source.includes("image_preview_state_from_image"),
|
|
"图片双击预览必须有独立 preview state，不能复用普通 image toolbar 状态",
|
|
);
|
|
assert(
|
|
source.includes("on:dblclick") && source.includes('data-testid="image-preview-dialog"'),
|
|
"图片双击必须打开稳定可测的全屏预览 dialog",
|
|
);
|
|
assert(
|
|
source.includes("on:wheel") && source.includes("data-preview-offset-x") && source.includes("ImagePreviewPanState"),
|
|
"图片预览必须支持滚轮缩放和中键拖拽平移，并暴露 offset 状态用于回归验证",
|
|
);
|
|
}
|
|
|
|
function fileUrl(localPath) {
|
|
return `file://${localPath}`;
|
|
}
|
|
|
|
function localMdDocumentId(relativePath) {
|
|
return `local-md:${relativePath.replaceAll("/", "~2F")}`;
|
|
}
|
|
|
|
function documentUrl(root, relativePath) {
|
|
const url = new URL(`${BASE_URL}/documents/${encodeURIComponent(localMdDocumentId(relativePath))}`);
|
|
url.searchParams.set("sourceKind", "local_folder");
|
|
url.searchParams.set("rootUri", fileUrl(root));
|
|
url.searchParams.set("treeView", "filetree");
|
|
return url.toString();
|
|
}
|
|
|
|
function writeWorkspaceManifest(root, ownerId) {
|
|
const metadataDir = path.join(root, ".mnote");
|
|
fs.mkdirSync(metadataDir, { recursive: true });
|
|
fs.writeFileSync(
|
|
path.join(metadataDir, "workspace.json"),
|
|
`${JSON.stringify({
|
|
workspaceId: `local-ws:${ownerId}:task801`,
|
|
ownerId,
|
|
createdAt: new Date().toISOString(),
|
|
capabilities: ["local_files", "markdown_edit", "asset_upload"],
|
|
}, null, 2)}\n`,
|
|
"utf8",
|
|
);
|
|
}
|
|
|
|
function createLocalFixture() {
|
|
const dataRoot = fs.mkdtempSync(path.join(os.tmpdir(), "mnote-task801-image-preview-"));
|
|
const root = path.join(dataRoot, "workspace");
|
|
fs.mkdirSync(root, { recursive: true });
|
|
writeWorkspaceManifest(root, ACTOR_ID);
|
|
fs.writeFileSync(
|
|
path.join(root, RELATIVE_PATH),
|
|
["---", "title: Image Preview", "---", "", "# Image Preview", "", "初始正文", ""].join("\n"),
|
|
"utf8",
|
|
);
|
|
return { dataRoot, root, relativePath: RELATIVE_PATH, documentId: localMdDocumentId(RELATIVE_PATH) };
|
|
}
|
|
|
|
function pickPort() {
|
|
return new Promise((resolve, reject) => {
|
|
const server = net.createServer();
|
|
server.listen(0, "127.0.0.1", () => {
|
|
const address = server.address();
|
|
const port = address && typeof address === "object" ? address.port : 0;
|
|
server.close(() => resolve(port));
|
|
});
|
|
server.on("error", reject);
|
|
});
|
|
}
|
|
|
|
async function waitForServer(baseUrl) {
|
|
const deadline = Date.now() + SERVER_TIMEOUT_MS;
|
|
let lastError = null;
|
|
while (Date.now() < deadline) {
|
|
try {
|
|
const response = await fetchWithTimeout(`${baseUrl}/health`);
|
|
if (response.status >= 200 && response.status < 500) return;
|
|
lastError = new Error(`server_not_ready_${response.status}`);
|
|
} catch (error) {
|
|
lastError = error;
|
|
}
|
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
|
}
|
|
throw lastError || new Error(`server_not_ready: ${baseUrl}`);
|
|
}
|
|
|
|
async function startLocalServer(dataRoot) {
|
|
if (BASE_URL) return null;
|
|
const port = await pickPort();
|
|
BASE_URL = `http://127.0.0.1:${port}`;
|
|
const server = spawn("cargo", ["run", "-p", "mnote-web", "--bin", "mnote-web"], {
|
|
cwd: path.join(__dirname, "..", "rust"),
|
|
env: {
|
|
...process.env,
|
|
MNOTE_WEB_BIND: `127.0.0.1:${port}`,
|
|
MNOTE_WEB_PUBLIC_BIND: `127.0.0.1:${port}`,
|
|
MNOTE_LOCAL_WORKSPACE_BASE_DIR: dataRoot,
|
|
},
|
|
stdio: ["ignore", "pipe", "pipe"],
|
|
});
|
|
let stderr = "";
|
|
server.stderr.on("data", (chunk) => {
|
|
stderr += chunk.toString();
|
|
});
|
|
try {
|
|
await waitForServer(BASE_URL);
|
|
} catch (error) {
|
|
server.kill("SIGTERM");
|
|
throw new Error(`${error.message}\n${stderr.slice(-3000)}`);
|
|
}
|
|
return server;
|
|
}
|
|
|
|
async function waitForRuntimeIsland(page) {
|
|
const root = page.locator('[data-testid="mnote-leptos-tiptap-island-editor-root"]').first();
|
|
await root.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
|
const editor = page.locator('[data-testid="mnote-leptos-tiptap-island-editor-root"] .editor-surface .ProseMirror[contenteditable="true"]').first();
|
|
await editor.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
|
await page.waitForFunction(() => {
|
|
const host = document.querySelector('[data-testid="mnote-leptos-tiptap-island-editor-root"]');
|
|
const editorNode = host?.querySelector('.editor-surface .ProseMirror[contenteditable="true"]');
|
|
return host?.getAttribute("data-runtime-editor-status") !== "error" && editorNode instanceof HTMLElement && editorNode.isContentEditable;
|
|
}, null, { timeout: UI_TIMEOUT_MS });
|
|
return editor;
|
|
}
|
|
|
|
async function screenshot(page, name) {
|
|
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
|
await page.screenshot({ path: `${SCREENSHOT_DIR}/${name}.png`, fullPage: true });
|
|
}
|
|
|
|
async function setImageFixture(page) {
|
|
await page.evaluate((imageSrc) => {
|
|
const editor = document.querySelector('.editor-surface .ProseMirror')?.editor;
|
|
if (!editor) throw new Error("找不到 Tiptap editor");
|
|
editor.commands.setContent({
|
|
type: "doc",
|
|
content: [
|
|
{ type: "paragraph", content: [{ type: "text", text: "task801 image preview fixture" }] },
|
|
{ type: "image", attrs: { src: imageSrc, alt: "E24 图片占位", title: "E24 图片", "data-align": "center" } },
|
|
],
|
|
}, true);
|
|
editor.commands.focus("start");
|
|
}, IMAGE_SRC);
|
|
await page.waitForFunction((imageSrc) => {
|
|
const image = document.querySelector(`.editor-surface .ProseMirror img[src="${imageSrc}"]`);
|
|
return image instanceof HTMLImageElement && image.naturalWidth > 0 && image.naturalHeight > 0;
|
|
}, IMAGE_SRC, { timeout: UI_TIMEOUT_MS });
|
|
}
|
|
|
|
async function main() {
|
|
assertImagePreviewSourceBoundary();
|
|
|
|
const target = createLocalFixture();
|
|
const server = await startLocalServer(target.dataRoot);
|
|
const browser = await chromium.launch({ headless: true });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1440, height: 960 },
|
|
acceptDownloads: true,
|
|
extraHTTPHeaders: {
|
|
"x-mnote-actor-id": ACTOR_ID,
|
|
"x-mnote-actor-type": "user",
|
|
},
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
try {
|
|
const url = documentUrl(target.root, target.relativePath);
|
|
const response = await page.goto(url, { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
|
|
assert(response, "文档页没有返回响应");
|
|
assert.equal(response.status(), 200, `文档页状态码异常: ${response.status()}`);
|
|
|
|
const editor = await waitForRuntimeIsland(page);
|
|
await setImageFixture(page);
|
|
|
|
const beforeUrl = page.url();
|
|
const beforeLayout = await page.evaluate(() => {
|
|
const sidebar = document.querySelector(".wolai-sidebar, .mnote-sidebar");
|
|
const content = document.querySelector(".mnote-content, .document-workspace");
|
|
const sidebarRect = sidebar?.getBoundingClientRect();
|
|
const contentRect = content?.getBoundingClientRect();
|
|
return {
|
|
sidebarLeft: sidebarRect?.left ?? null,
|
|
sidebarTop: sidebarRect?.top ?? null,
|
|
contentLeft: contentRect?.left ?? null,
|
|
contentTop: contentRect?.top ?? null,
|
|
};
|
|
});
|
|
const image = page.locator('.editor-surface .ProseMirror img[src]').first();
|
|
await image.dblclick({ timeout: UI_TIMEOUT_MS });
|
|
|
|
const dialog = page.locator('[data-testid="image-preview-dialog"]').first();
|
|
await dialog.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
|
await screenshot(page, "01-image-preview-open");
|
|
|
|
assert.equal(page.url(), beforeUrl, "双击图片打开预览不应改变 URL");
|
|
assert.equal(await dialog.getAttribute("role"), "dialog", "图片预览应暴露 dialog 语义");
|
|
assert.equal(await dialog.getAttribute("aria-modal"), "true", "图片预览应是 modal");
|
|
assert.equal(await dialog.getAttribute("data-preview-index"), "0", "单图预览 index 应为 0");
|
|
assert.equal(await dialog.getAttribute("data-preview-total"), "1", "单图预览 total 应为 1");
|
|
assert.equal(await dialog.locator('[data-testid="image-preview-image"]').first().getAttribute("src"), IMAGE_SRC, "预览图 src 应保持原图");
|
|
assert.equal(await dialog.evaluate((node) => Boolean(node.closest('[data-testid="mnote-leptos-tiptap-editor-stage"]'))), false, "预览 dialog 不能挂在 editor-stage 内，否则 fixed 坐标会被外层布局/transform 改写");
|
|
const dialogRect = await dialog.evaluate((node) => {
|
|
const rect = node.getBoundingClientRect();
|
|
return {
|
|
left: rect.left,
|
|
top: rect.top,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
viewportWidth: window.innerWidth,
|
|
viewportHeight: window.innerHeight,
|
|
};
|
|
});
|
|
assert.ok(Math.abs(dialogRect.left) <= 1 && Math.abs(dialogRect.top) <= 1, `预览遮罩必须从视口左上角开始: ${JSON.stringify(dialogRect)}`);
|
|
assert.ok(Math.abs(dialogRect.width - dialogRect.viewportWidth) <= 1, `预览遮罩必须覆盖完整视口宽度: ${JSON.stringify(dialogRect)}`);
|
|
assert.ok(Math.abs(dialogRect.height - dialogRect.viewportHeight) <= 1, `预览遮罩必须覆盖完整视口高度: ${JSON.stringify(dialogRect)}`);
|
|
|
|
for (const testid of [
|
|
"image-preview-close",
|
|
"image-preview-prev",
|
|
"image-preview-next",
|
|
"image-preview-zoom-in",
|
|
"image-preview-zoom-out",
|
|
"image-preview-one-to-one",
|
|
"image-preview-rotate",
|
|
"image-preview-download",
|
|
"image-preview-fullscreen",
|
|
]) {
|
|
await dialog.locator(`[data-testid="${testid}"]`).first().waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
|
}
|
|
assert.equal(await dialog.locator('[data-testid="image-preview-prev"]').first().isDisabled(), true, "单图预览上一张应禁用");
|
|
assert.equal(await dialog.locator('[data-testid="image-preview-next"]').first().isDisabled(), true, "单图预览下一张应禁用");
|
|
|
|
await dialog.locator('[data-testid="image-preview-zoom-in"]').first().click({ timeout: UI_TIMEOUT_MS });
|
|
await page.waitForFunction(() => document.querySelector('[data-testid="image-preview-dialog"]')?.getAttribute("data-preview-zoom") === "1.25", null, { timeout: UI_TIMEOUT_MS });
|
|
await dialog.locator('[data-testid="image-preview-rotate"]').first().click({ timeout: UI_TIMEOUT_MS });
|
|
await page.waitForFunction(() => document.querySelector('[data-testid="image-preview-dialog"]')?.getAttribute("data-preview-rotation") === "90", null, { timeout: UI_TIMEOUT_MS });
|
|
await dialog.locator('[data-testid="image-preview-one-to-one"]').first().click({ timeout: UI_TIMEOUT_MS });
|
|
await page.waitForFunction(() => {
|
|
const node = document.querySelector('[data-testid="image-preview-dialog"]');
|
|
return node?.getAttribute("data-preview-zoom") === "1"
|
|
&& node?.getAttribute("data-preview-rotation") === "0"
|
|
&& node?.getAttribute("data-preview-offset-x") === "0"
|
|
&& node?.getAttribute("data-preview-offset-y") === "0";
|
|
}, null, { timeout: UI_TIMEOUT_MS });
|
|
const stageBox = await dialog.locator('[data-testid="image-preview-stage"]').first().boundingBox();
|
|
assert.ok(stageBox, "预览 stage 应有可交互区域");
|
|
const stageCenter = {
|
|
x: stageBox.x + stageBox.width / 2,
|
|
y: stageBox.y + stageBox.height / 2,
|
|
};
|
|
await page.mouse.move(stageCenter.x, stageCenter.y);
|
|
await page.mouse.wheel(0, -240);
|
|
await page.waitForFunction(() => Number(document.querySelector('[data-testid="image-preview-dialog"]')?.getAttribute("data-preview-zoom") || "1") > 1, null, { timeout: UI_TIMEOUT_MS });
|
|
await page.mouse.down({ button: "middle" });
|
|
await page.mouse.move(stageCenter.x + 72, stageCenter.y + 38, { steps: 6 });
|
|
await page.mouse.up({ button: "middle" });
|
|
await page.waitForFunction(() => {
|
|
const node = document.querySelector('[data-testid="image-preview-dialog"]');
|
|
return Math.abs(Number(node?.getAttribute("data-preview-offset-x") || "0")) >= 60
|
|
&& Math.abs(Number(node?.getAttribute("data-preview-offset-y") || "0")) >= 30;
|
|
}, null, { timeout: UI_TIMEOUT_MS });
|
|
const afterLayout = await page.evaluate(() => {
|
|
const sidebar = document.querySelector(".wolai-sidebar, .mnote-sidebar");
|
|
const content = document.querySelector(".mnote-content, .document-workspace");
|
|
const sidebarRect = sidebar?.getBoundingClientRect();
|
|
const contentRect = content?.getBoundingClientRect();
|
|
return {
|
|
sidebarLeft: sidebarRect?.left ?? null,
|
|
sidebarTop: sidebarRect?.top ?? null,
|
|
contentLeft: contentRect?.left ?? null,
|
|
contentTop: contentRect?.top ?? null,
|
|
};
|
|
});
|
|
for (const key of ["sidebarLeft", "sidebarTop", "contentLeft", "contentTop"]) {
|
|
if (beforeLayout[key] === null || afterLayout[key] === null) continue;
|
|
assert.ok(Math.abs(beforeLayout[key] - afterLayout[key]) <= 1, `预览交互不应导致左侧框架/正文布局漂移 ${key}: before=${beforeLayout[key]} after=${afterLayout[key]}`);
|
|
}
|
|
|
|
const downloadPromise = page.waitForEvent("download", { timeout: UI_TIMEOUT_MS });
|
|
await dialog.locator('[data-testid="image-preview-download"]').first().click({ timeout: UI_TIMEOUT_MS });
|
|
const download = await downloadPromise;
|
|
assert(/E24.*\.svg$/i.test(download.suggestedFilename()), `图片预览下载文件名异常: ${download.suggestedFilename()}`);
|
|
await download.delete().catch(() => undefined);
|
|
|
|
await page.keyboard.press("Escape");
|
|
await dialog.waitFor({ state: "detached", timeout: UI_TIMEOUT_MS });
|
|
await image.dblclick({ timeout: UI_TIMEOUT_MS });
|
|
await dialog.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS });
|
|
await dialog.locator('[data-testid="image-preview-close"]').first().click({ timeout: UI_TIMEOUT_MS });
|
|
await dialog.waitFor({ state: "detached", timeout: UI_TIMEOUT_MS });
|
|
|
|
await editor.click({ timeout: UI_TIMEOUT_MS });
|
|
assert.equal(await page.locator('[data-testid="image-preview-dialog"]').count(), 0, "关闭预览后不应残留 dialog");
|
|
|
|
console.log(JSON.stringify({ ok: true, baseUrl: BASE_URL, documentId: target.documentId, root: target.root, screenshotDir: SCREENSHOT_DIR }, null, 2));
|
|
} finally {
|
|
await page.close().catch(() => undefined);
|
|
await context.close().catch(() => undefined);
|
|
await browser.close().catch(() => undefined);
|
|
if (server?.pid) {
|
|
server.kill("SIGTERM");
|
|
setTimeout(() => {
|
|
if (!server.killed) server.kill("SIGKILL");
|
|
}, 2000).unref();
|
|
}
|
|
}
|
|
}
|
|
|
|
if (require.main === module) {
|
|
main().catch((error) => {
|
|
console.error(error instanceof Error ? error.stack || error.message : String(error));
|
|
process.exit(1);
|
|
});
|
|
}
|