scripts/testing/check-rich-tables.mjs

Rama main · réplica de lectura del repositorio original.

// Run against the preview URL printed by verify-rich-tables.ts, never a live app.
import assert from "node:assert/strict";
import { mkdir, readFile } from "node:fs/promises";
import { join } from "node:path";
const url = new URL(process.argv[2]);
assert.equal(url.hostname, "127.0.0.1");
assert.equal(url.pathname, "/__rich-tables.html");
const { chromium } = await import(process.env.OMB_VERIFY_PLAYWRIGHT || "playwright");
const browser = await chromium.launch({ executablePath: process.env.OMB_VERIFY_BROWSER_CHROME || undefined, headless: true });
const output = process.env.OMB_TABLE_EVIDENCE || "/tmp/omb-rich-tables-evidence";
await mkdir(output, { recursive: true });
try {
  const context = await browser.newContext({ viewport: { width: 1280, height: 900 }, permissions: ["clipboard-read", "clipboard-write"] });
  const page = await context.newPage();
  const errors = [];
  page.on("pageerror", (error) => errors.push(error.message));
  let fileRequests = 0;
  page.on("request", (request) => { if (/\/messages\/.*\/file$/.test(request.url())) fileRequests++; });
  await page.goto(url.href);
  const inline = page.locator(".rich-table").first();
  await inline.getByRole("cell", { name: "Ada", exact: true }).waitFor();
  assert.equal(fileRequests, 0, "Previews must not download before opening");
  assert.equal(await inline.locator("strong").textContent(), "Ada");
  assert.equal(await inline.getByRole("link", { name: "Account" }).getAttribute("href"), "https://example.com");
  assert.equal(await page.locator('table[dir="rtl"]').count(), 1);
  await inline.getByRole("button", { name: "Sort by Revenue", exact: true }).click();
  assert.equal(await inline.locator("tbody tr").first().locator("td").first().textContent(), "Lin");
  const expand = inline.getByRole("button", { name: "Expand table", exact: true });
  await expand.click();
  await page.getByRole("dialog").waitFor();
  await page.keyboard.press("Escape");
  await page.getByRole("dialog").waitFor({ state: "hidden" });
  assert.equal(await expand.evaluate((element) => element === document.activeElement), true, "Focus returns to expand");
  await page.screenshot({ path: join(output, "inline-dark.png"), fullPage: true });

  const preview = page.getByRole("button", { name: "Preview table: sales.csv", exact: true });
  await preview.click();
  const dialog = page.getByRole("dialog");
  await dialog.getByText("50,000 of 50,000 rows · 4 columns", { exact: true }).waitFor();
  assert.equal(fileRequests, 1);
  assert.ok(await dialog.locator("tbody tr").count() < 100, "Large tables only mount visible rows");
  const region = dialog.getByRole("region", { name: "sales.csv", exact: true });
  await region.evaluate((element) => { element.scrollTop = element.scrollHeight; });
  await dialog.getByRole("cell", { name: "Final customer", exact: true }).waitFor();
  const geometry = await region.evaluate((element) => ({ top: element.getBoundingClientRect().top, head: element.querySelector("thead").getBoundingClientRect().top }));
  assert.ok(Math.abs(geometry.top - geometry.head) < 2, "Header stays visible while scrolling");
  await dialog.getByRole("button", { name: "Wrap cell text", exact: true }).click();
  const search = dialog.getByRole("textbox", { name: "Search all rows…", exact: true });
  await search.fill("Final customer");
  await dialog.getByText("1 of 50,000 rows · 4 columns", { exact: true }).waitFor();
  await search.fill("");
  await dialog.getByText("50,000 of 50,000 rows · 4 columns", { exact: true }).waitFor();
  await dialog.getByRole("button", { name: "Copy results as CSV", exact: true }).click();
  await dialog.getByText("Copied", { exact: true }).waitFor();
  const copied = await page.evaluate(() => navigator.clipboard.readText());
  assert.equal(copied.split("\r\n").length, 50_001, "Copy contains every row, not just mounted rows");
  const downloadPromise = page.waitForEvent("download");
  await dialog.getByRole("button", { name: "Download results as CSV", exact: true }).click();
  const download = await downloadPromise;
  const downloaded = await readFile(await download.path(), "utf8");
  assert.equal(downloaded.replace(/^\uFEFF/, ""), copied);
  await page.screenshot({ path: join(output, "file-dark.png") });
  await dialog.getByRole("button", { name: "Close table", exact: true }).click();
  assert.equal(await preview.evaluate((element) => element === document.activeElement), true);

  await page.getByRole("button", { name: "Preview table: notes.tsv", exact: true }).click();
  await dialog.getByRole("cell", { name: "Unicode ✓", exact: true }).waitFor();
  assert.equal(await dialog.getByRole("cell", { name: "Two lines here", exact: true }).textContent(), "Two lines\nhere");
  await page.keyboard.press("Escape");
  await page.getByRole("button", { name: "Preview table: broken.csv", exact: true }).click();
  await dialog.getByRole("alert").waitFor();
  await dialog.getByRole("button", { name: "Retry", exact: true }).click();
  await dialog.getByRole("alert").waitFor();
  await page.keyboard.press("Escape");

  // A failed download is retryable, and a dismissed download cannot reopen the dialog.
  const fileRoute = "**/messages/*/file";
  await page.route(fileRoute, (route) => route.fulfill({ status: 503, contentType: "application/json", body: '{"error":"Synthetic offline error"}' }));
  await preview.click();
  await dialog.getByRole("alert").waitFor();
  await page.unroute(fileRoute);
  await dialog.getByRole("button", { name: "Retry", exact: true }).click();
  await dialog.getByText("50,000 of 50,000 rows · 4 columns", { exact: true }).waitFor();
  await page.keyboard.press("Escape");
  let pending;
  await page.route(fileRoute, (route) => { pending = route; });
  await preview.click();
  await dialog.getByText("Opening table…", { exact: true }).waitFor();
  await page.keyboard.press("Escape");
  await page.getByRole("dialog").waitFor({ state: "hidden" });
  await pending?.fulfill({ status: 200, body: "Name,Value\nLate,1" }).catch(() => {});
  await page.unroute(fileRoute);
  assert.equal(await page.getByRole("dialog").count(), 0);

  await page.setViewportSize({ width: 390, height: 844 });
  url.searchParams.set("skin", "atelier");
  await page.goto(url.href);
  await page.getByRole("button", { name: "Preview table: sales.csv", exact: true }).click();
  await dialog.getByText("50,000 of 50,000 rows · 4 columns", { exact: true }).waitFor();
  assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
  assert.ok(await dialog.locator("tbody tr").count() < 100);
  await page.screenshot({ path: join(output, "file-narrow-light.png") });
  await page.keyboard.press("Escape");
  await page.screenshot({ path: join(output, "inline-narrow-light.png"), fullPage: true });
  assert.deepEqual(errors, []);
  console.log(JSON.stringify({ passed: true, rows: 50000, fileRequests, output }));
} finally { await browser.close(); }