test(e2e): web-app tool open-path suite + pl_editor open/wizard-skip
Add an e2e suite that drives the real React web app (not the standalone harness): tests/playwright-web.config.ts + tests/web/tools-open.spec.ts navigate /p/demo/<tool>/<file> for all five tools and assert each boots, opens its demo file (title drops "untitled"), shows no first-run wizard, and emits no WASM abort or URL-regex modal. global-setup-web.ts re-seeds the demo project through the API if missing, so the suite is self-sufficient against a running dev stack. Wired as `npm run test:web`. Also at the harness level: - pl_editor-load.spec.ts: prove the pl_editor kicadOpenFile embind hook opens a .kicad_wks (mirrors eeschema-load.spec.ts). - seed KiCad config in pl_editor.html / symbol_editor.html (matching eeschema.html and the web app's boot.ts) so the harness boots wizard-free; repurpose pl_editor.spec.ts's stale "wizard completes" test into a wizard-skip regression. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
0157741660
commit
3ef461a0f6
8 changed files with 385 additions and 7 deletions
74
tests/web/global-setup-web.ts
Normal file
74
tests/web/global-setup-web.ts
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import type { FullConfig } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Global setup for the web-app e2e suite.
|
||||
*
|
||||
* The tests drive the real React app at :3048 and open files from the committed
|
||||
* "demo" project. That project is normally created by `pnpm db:migrate`
|
||||
* (seedDemoProject). This setup makes the suite self-sufficient: it waits for
|
||||
* the API to be reachable and, if the demo project is missing, recreates it by
|
||||
* uploading the committed seed-data files through the public API — the same
|
||||
* bytes db:seed uses. Idempotent.
|
||||
*/
|
||||
|
||||
const API_BASE = process.env.VITE_API_BASE_URL ?? 'http://localhost:3050';
|
||||
const SEED_DIR = path.resolve(__dirname, '../../web/apps/server/seed-data');
|
||||
const DEMO_SLUG = 'demo';
|
||||
const DEMO_FILES = ['demo.kicad_sch', 'demo.kicad_pcb', 'demo.kicad_wks'];
|
||||
|
||||
async function waitForApi(timeoutMs = 60000): Promise<void> {
|
||||
const deadline = Date.now() + timeoutMs;
|
||||
let lastErr = '';
|
||||
while (Date.now() < deadline) {
|
||||
try {
|
||||
const r = await fetch(`${API_BASE}/health`);
|
||||
if (r.ok) return;
|
||||
lastErr = `HTTP ${r.status}`;
|
||||
} catch (e) {
|
||||
lastErr = (e as Error).message;
|
||||
}
|
||||
await new Promise((res) => setTimeout(res, 1000));
|
||||
}
|
||||
throw new Error(
|
||||
`API not reachable at ${API_BASE} (${lastErr}). Start the web stack first: ` +
|
||||
`from web/ run \`pnpm db:up && pnpm db:migrate && pnpm dev\`.`
|
||||
);
|
||||
}
|
||||
|
||||
async function ensureDemoProject(): Promise<void> {
|
||||
const existing = await fetch(`${API_BASE}/api/projects/${DEMO_SLUG}`);
|
||||
if (existing.ok) {
|
||||
const body = (await existing.json()) as { files: { path: string }[] };
|
||||
const have = new Set(body.files.map((f) => f.path));
|
||||
if (DEMO_FILES.every((f) => have.has(f))) return;
|
||||
} else {
|
||||
// Create the project (ignore 409 if a race created it).
|
||||
const created = await fetch(`${API_BASE}/api/projects`, {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ name: 'Demo Project', slug: DEMO_SLUG }),
|
||||
});
|
||||
if (!created.ok && created.status !== 409) {
|
||||
throw new Error(`failed to create demo project: HTTP ${created.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Upload the committed seed bytes (multipart field-name = project-relative path).
|
||||
const form = new FormData();
|
||||
for (const name of DEMO_FILES) {
|
||||
const buf = fs.readFileSync(path.join(SEED_DIR, name));
|
||||
form.append(name, new Blob([buf]), name);
|
||||
}
|
||||
const up = await fetch(`${API_BASE}/api/projects/${DEMO_SLUG}/files`, {
|
||||
method: 'POST',
|
||||
body: form,
|
||||
});
|
||||
if (!up.ok) throw new Error(`failed to seed demo files: HTTP ${up.status}`);
|
||||
}
|
||||
|
||||
export default async function globalSetup(_config: FullConfig): Promise<void> {
|
||||
await waitForApi();
|
||||
await ensureDemoProject();
|
||||
}
|
||||
81
tests/web/tools-open.spec.ts
Normal file
81
tests/web/tools-open.spec.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
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.
|
||||
*/
|
||||
|
||||
interface ToolCase {
|
||||
/** URL path after /p/demo/ */
|
||||
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: 'eeschema/demo.kicad_sch', titleRe: /demo — Schematic Editor/i, fileless: false },
|
||||
pcbnew: { route: 'pcbnew/demo.kicad_pcb', titleRe: /demo — PCB Editor/i, fileless: false },
|
||||
pl_editor: { route: 'pl_editor/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 },
|
||||
};
|
||||
|
||||
/** 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(`/p/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: 'device' });
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue