mnote/scripts/task462-resource-tab-error-placeholder-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");
const os = require("node:os");
const path = require("node:path");
const { chromium } = require("playwright");

const 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 CHROMIUM_EXECUTABLE_PATH = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH
  || ["/usr/bin/google-chrome-stable", "/usr/bin/google-chrome", "/snap/bin/chromium"]
    .find((candidate) => fs.existsSync(candidate));

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}:task462`,
      ownerId,
      createdAt: new Date().toISOString(),
      capabilities: ["local_files", "markdown_edit", "asset_upload"],
    }, null, 2)}\n`,
    "utf8",
  );
}

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 main() {
  const root = fs.mkdtempSync(path.join(os.tmpdir(), "mnote-task462-error-placeholder-"));
  const relativePath = "README.md";
  writeWorkspaceManifest(root, "user_real");
  fs.writeFileSync(path.join(root, relativePath), "# Page\n\n正文\n", "utf8");

  const browser = await chromium.launch({
    headless: true,
    executablePath: CHROMIUM_EXECUTABLE_PATH,
  });
  const context = await browser.newContext({
    viewport: { width: 1360, height: 900 },
    extraHTTPHeaders: {
      "x-mnote-actor-id": "user_real",
      "x-mnote-actor-type": "user",
    },
  });
  const page = await context.newPage();

  try {
    await quickLogin(page);
    await page.goto(documentUrl(root, relativePath), { waitUntil: "domcontentloaded", timeout: UI_TIMEOUT_MS });
    await page.locator(".document-pane[data-pane-role=\"primary\"] .editor-surface .ProseMirror").first().waitFor({
      state: "visible",
      timeout: UI_TIMEOUT_MS,
    });

    // ======== Test 1: Open non-existent resource → error placeholder tab ========
    console.log("Test 1: Open non-existent asset → error placeholder tab");
    const fakeAssetId = `local-file:nonexistent/error-test-${Date.now()}.md`;
    
    // Dispatch tree.asset.open with a non-existent local asset
    await page.evaluate(({ fakeAssetId }) => {
      window.dispatchEvent(new CustomEvent("tree.asset.open", {
        detail: {
          assetId: fakeAssetId,
          documentId: document.body?.dataset?.documentId || "",
          title: "error-test.md",
          assetType: "attachment",
        },
      }));
    }, { fakeAssetId });

    // Wait for the error tab to appear (since the file doesn't exist, it should create an error tab)
    await page.waitForTimeout(1000);

    // Check error placeholder created: the resource tab panel should have an error indicator
    const errorPanelState = await page.evaluate(() => {
      const errorPanel = document.querySelector('[data-resource-tab-error="true"]');
      const activeTab = document.querySelector('.mnote-main-tab.is-active:not([data-mnote-main-tab="page"])');
      const allResourceTabs = document.querySelectorAll('.mnote-main-tab[data-mnote-main-tab]:not([data-mnote-main-tab="page"])');
      // Count how many tabs have error content
      const errorTabs = Array.from(allResourceTabs).filter(tab => {
        const identity = tab.getAttribute('data-mnote-main-tab') || '';
        const panel = document.querySelector(`[data-mnote-resource-tab-panel="${CSS.escape(identity)}"]`);
        return panel && panel.querySelector('[data-resource-tab-error="true"]');
      });
      return {
        hasErrorPanel: !!errorPanel,
        errorPanelText: errorPanel?.textContent || "",
        activeTabExists: !!activeTab,
        totalResourceTabs: allResourceTabs.length,
        errorTabCount: errorTabs.length,
      };
    });
    
    console.log(`  Error panel state: ${JSON.stringify(errorPanelState)}`);
    assert.equal(errorPanelState.hasErrorPanel, true, `missing error placeholder: ${JSON.stringify(errorPanelState)}`);
    assert.match(errorPanelState.errorPanelText, /资源打开失败/, `error panel should explain failure: ${JSON.stringify(errorPanelState)}`);
    assert.equal(errorPanelState.activeTabExists, true, `error tab should stay active: ${JSON.stringify(errorPanelState)}`);
    assert.equal(errorPanelState.errorTabCount, 1, `one error tab should be registered: ${JSON.stringify(errorPanelState)}`);

    const pageTabReachable = await page.evaluate(() => {
      const pageTab = document.querySelector('[data-mnote-main-tab="page"]');
      return pageTab instanceof HTMLElement;
    });
    assert.ok(pageTabReachable, "Page tab should always be present");

    // ======== Test 2: Error tab close button → removes tab ========
    console.log("Test 2: Close error tab → cleans up");
    
    // Try to close any open resource tab
    await page.evaluate(() => {
      const resourceTab = document.querySelector('.mnote-main-tab.is-active:not([data-mnote-main-tab="page"])');
      if (resourceTab instanceof HTMLElement) {
        const closeBtn = resourceTab.querySelector('.mnote-main-tab-close');
        if (closeBtn instanceof HTMLElement) {
          closeBtn.click();
        }
      }
    });
    await page.waitForTimeout(300);

    const afterCloseState = await page.evaluate(() => {
      return {
        resourceTabs: document.querySelectorAll('.mnote-main-tab[data-mnote-main-tab]:not([data-mnote-main-tab="page"])').length,
        pageTabActive: document.querySelector('[data-mnote-main-tab="page"]')?.classList.contains("is-active") || false,
        errorPanels: document.querySelectorAll('[data-resource-tab-error="true"]').length,
      };
    });
    console.log(`  After close: ${JSON.stringify(afterCloseState)}`);
    
    // Page tab should be active after closing all resource tabs
    assert.ok(afterCloseState.pageTabActive, "Page tab should be active after closing error tab");

    // ======== Test 3: Multiple sequential opens with failure ========
    console.log("Test 3: Sequential failed opens should not cause runaway tabs");
    
    const fakeIds = [];
    for (let i = 0; i < 3; i++) {
      fakeIds.push(`local-file:nonexistent/test-${i}-${Date.now()}.md`);
    }

    for (const fakeId of fakeIds) {
      await page.evaluate(({ fakeId }) => {
        window.dispatchEvent(new CustomEvent("tree.asset.open", {
          detail: {
            assetId: fakeId,
            documentId: document.body?.dataset?.documentId || "",
            title: `test-${fakeId.split("-")[1]}.md`,
            assetType: "attachment",
          },
        }));
      }, { fakeId });
    }
    await page.waitForTimeout(500);

    const afterMultipleState = await page.evaluate(() => {
      return {
        resourceTabs: document.querySelectorAll('.mnote-main-tab[data-mnote-main-tab]:not([data-mnote-main-tab="page"])').length,
        errorPanels: document.querySelectorAll('[data-resource-tab-error="true"]').length,
        pageTabActive: document.querySelector('[data-mnote-main-tab="page"]')?.classList.contains("is-active") || false,
      };
    });
    console.log(`  After multiple failed opens: ${JSON.stringify(afterMultipleState)}`);
    
    // Should not have runaway tabs (at most the 3 we opened, some may not create tabs if they fail fast)
    assert.ok(afterMultipleState.resourceTabs <= fakeIds.length,
      `Should not exceed ${fakeIds.length} resource tabs: ${afterMultipleState.resourceTabs}`);

    // ======== Test 4: Recover after error state ========
    console.log("Test 4: Close all error tabs and verify page tab is cleanly active");
    
    // Close all resource tabs
    await page.evaluate(() => {
      const allResourceTabs = document.querySelectorAll('.mnote-main-tab[data-mnote-main-tab]:not([data-mnote-main-tab="page"])');
      allResourceTabs.forEach(tab => {
        const closeBtn = tab.querySelector('.mnote-main-tab-close');
        if (closeBtn instanceof HTMLElement) closeBtn.click();
      });
    });
    await page.waitForTimeout(500);

    const finalState = await page.evaluate(() => {
      return {
        resourceTabs: document.querySelectorAll('.mnote-main-tab[data-mnote-main-tab]:not([data-mnote-main-tab="page"])').length,
        pageTabActive: document.querySelector('[data-mnote-main-tab="page"]')?.classList.contains("is-active") || false,
        pagePanelHidden: document.querySelector('[data-mnote-page-tab-panel]')?.hidden || false,
        resourceHostHidden: document.querySelector('[data-mnote-resource-tab-host]')?.hidden ?? true,
        errorPanels: document.querySelectorAll('[data-resource-tab-error="true"]').length,
      };
    });
    console.log(`  Final state: ${JSON.stringify(finalState)}`);

    assert.ok(finalState.pageTabActive, "Page tab should be active after cleanup");
    assert.equal(finalState.resourceTabs, 0, "All resource tabs should be removed");
    assert.equal(finalState.errorPanels, 0, "All error panels should be removed");
    assert.equal(finalState.pagePanelHidden, false, "Page panel should not be hidden");

    console.log(JSON.stringify({ ok: true, root }, null, 2));
  } finally {
    await context.close().catch(() => undefined);
    await browser.close().catch(() => undefined);
  }
}

main().catch((error) => {
  console.error(error && error.stack ? error.stack : error);
  process.exit(1);
});