mnote/scripts/task440-page-title-filetree-md-sync-smoke.js

#!/usr/bin/env node
"use strict";

const { loginViaAuthForm } = require('./lib/browser-auth-login');
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) {
  // 7-76 P0: 标准表单登录（无测试快速登录按钮）
  const base =
    (typeof BASE_URL !== "undefined" && BASE_URL) ||
    (typeof baseUrl !== "undefined" && baseUrl) ||
    process.env.MNOTE_UI_BASE_URL ||
    "http://127.0.0.1:3000";
  const timeout =
    (typeof UI_TIMEOUT_MS !== "undefined" && UI_TIMEOUT_MS) ||
    (typeof TIMEOUT !== "undefined" && TIMEOUT) ||
    30_000;
  if (!String(page.url() || "").includes("/auth")) {
    await page.goto(String(base).replace(/\/+$/, "") + "/auth", {
      waitUntil: "commit",
      timeout,
    });
  }
  await loginViaAuthForm(page, {
    baseUrl: base,
    timeoutMs: timeout,
    gotoAuth: false,
  });
  await page
    .waitForURL((url) => !String(url).includes("/auth"), { timeout })
    .catch(() => {});
}

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);
});