pcbjam/tests/web/tools-open.spec.ts
Viktor Vaczi 13551f4f22 feat(tests): screenshot regression + Discord review, perf-tracked
New tooling in tests/tools/screenshots/ (TypeScript via tsx):
- compare.ts: one pixelmatch engine (AA-excluded), connected-component
  "where to look" boxes, old|new+boxes|heatmap triptych, per-engine floors.
- promote.ts: churn-free updater — overwrite a baseline only when decoded
  pixels differ beyond the floor, copying CI bytes verbatim (no re-encode
  churn); pulls a CI run via `gh run download` or a local --from dir.
- post-discord.ts: always-on CI-on-main report (SHA + e2e status + the
  track-only runtime-perf table), then screenshot triptychs, batched +
  size-capped + flood-collapsed + 429-aware.
- perf-report.ts: perf table with Δ vs the previous main run (via gh).
- changelog.ts: no-build git-history baseline differ (Discord trigger B).
- noise.ts / gen-manifest.ts: calibration + manifest generation.

CI wiring:
- wasm-build.yml: post-test step runs the gate + report on the already-
  produced test-results (no extra build); report-only (continue-on-error),
  posts only on push to main, inert without DISCORD_WEBHOOK_URL.
- ci-ubicloud.yml: secrets: inherit (pass the webhook through).
- screenshot-changelog.yml: ~30s no-build changelog on baseline changes.

screenshot-manifest.json: canonical 354-name set + best-effort engine tags
(313 chromium-swiftshader / 41 firefox-llvmpipe).

Normalize scale:'device'->'css' across 18 spec files (no-op at CI DSF=1)
so committed baselines are uniformly css-scaled.

Design: CI's Linux render is the single source of truth; no pinned
container (accept rare env drift -> re-promote); dev commits via promote.
Replaces the byte-cmp compare-screenshots.sh + file-size-proxy
update-baseline-screenshots.sh (kept for now until the first re-baseline).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-01 18:17:20 +02:00

87 lines
3.9 KiB
TypeScript

import { test, expect, type Page } from '@playwright/test';
/**
* Web-app tool open-path e2e.
*
* Drives the real React app (not the standalone harness): for each tool, navigate
* to its route, let WasmTool boot the tool in-document and (for file tools)
* auto-open the demo file via Module.kicadOpenFile, then assert the editor came up
* with the expected title, a painted canvas, no first-run wizard, and no WASM abort
* or URL-regex modal. Fixtures live in the committed "demo" project (seed-data/),
* ensured by global-setup-web.ts.
*/
/** Scope segment for the demo project (the reference backend serves it for any). */
const SCOPE = 'default';
interface ToolCase {
/** URL tail after /:scope/projects/demo/ — a file path (tool inferred from the
* extension) for file tools, or `-/<tool>` for a file-less boot. */
route: string;
/** title the document settles on once the tool is up / file is open */
titleRe: RegExp;
/** file tools must drop "untitled"; file-less tools just need to boot */
fileless: boolean;
}
const CASES: Record<string, ToolCase> = {
eeschema: { route: 'demo.kicad_sch', titleRe: /demo — Schematic Editor/i, fileless: false },
pcbnew: { route: 'demo.kicad_pcb', titleRe: /demo — PCB Editor/i, fileless: false },
pl_editor: { route: 'demo.kicad_wks', titleRe: /demo — Drawing Sheet Editor/i, fileless: false },
calculator: { route: '-/calculator', titleRe: /Calculator Tools/i, fileless: true },
symbol_editor: { route: '-/symbol_editor', titleRe: /Symbol Editor/i, fileless: true },
footprint_editor: { route: '-/footprint_editor', titleRe: /Footprint Editor/i, fileless: true },
gerbview: { route: '-/gerbview', titleRe: /Gerber Viewer/i, fileless: true },
};
/** Console text that must never appear (wizard-crash + URL-regex modal markers). */
const FORBIDDEN = /Aborted\(|Invalid regular expression|code points 0xd800|func is not a function/i;
async function bootAndAssert(page: Page, tc: ToolCase): Promise<void> {
const consoleLines: string[] = [];
page.on('console', (m) => consoleLines.push(m.text()));
page.on('pageerror', (e) => consoleLines.push(`pageerror: ${e.message}`));
await page.goto(`/${SCOPE}/projects/demo/${tc.route}`);
// boot.ts mounts the Emscripten <canvas id="canvas"> once the runtime starts.
await expect(page.locator('#canvas')).toBeVisible({ timeout: 120000 });
// The wasm sets the document title once the frame is up (and, for file tools,
// once OpenProjectFiles finishes). Poll until it matches.
await expect
.poll(() => page.title(), {
message: `${tc.route}: editor never reached expected title`,
timeout: 120000,
intervals: [1000],
})
.toMatch(tc.titleRe);
// File tools must have actually loaded the file (title no longer "untitled").
if (!tc.fileless) {
expect(await page.title(), 'file should be open (title not untitled)').not.toMatch(/untitled/i);
}
// No first-run setup wizard should be visible (config seed must have skipped it).
const wizardVisible = await page.evaluate(() => {
const reg = (window as unknown as { wxElementRegistry?: { findAll(f: object): { typeName: string }[] } })
.wxElementRegistry;
if (!reg) return 0;
return reg.findAll({ visible: true }).filter((e) => /^wxDialog|Wizard/.test(e.typeName)).length;
});
expect(wizardVisible, 'no setup wizard/dialog should be visible').toBe(0);
const offending = consoleLines.filter((l) => FORBIDDEN.test(l));
expect(offending, `forbidden console output:\n${offending.join('\n')}`).toHaveLength(0);
}
test.describe('web app — tool open paths', () => {
for (const [tool, tc] of Object.entries(CASES)) {
test(`${tool}: ${tc.fileless ? 'boots file-less' : 'opens its demo file'} wizard-free`, async ({
page,
}) => {
await bootAndAssert(page, tc);
await page.screenshot({ path: `test-results/web-${tool}.png`, scale: 'css' });
});
}
});