mnote/scripts/task445-filetree-mindmap-switch-no-flicker-smoke.js

#!/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);
});