pcbjam/tests/kicad/pcbnew-move.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

174 lines
7.6 KiB
TypeScript

import type { Page } from '@playwright/test';
import { test, expect } from './fixtures';
import { clickByTooltip, findByTooltip } from '../e2e/utils/element-tracker';
import { completeWizard, hideCursor } from './utils/screenshot-compare';
/**
* PCBnew "m" move regression — GitHub issue #9.
*
* On desktop you select an item, press `m`, then nudge it with the arrow keys.
* In the WASM build the arrow keys did nothing and the item snapped to the
* cursor on grab, because wxWindowWasm::WarpPointer() was a no-op: KiCad's
* arrow-key cursor nudge warps the pointer and reads it back via
* wxGetMousePosition(), so a dead warp left the move loop reading a stale
* position. The fix makes WarpPointer update the cached mouse position.
*
* This drives the real path — draw a graphic line, select it, press `m`, then
* ArrowRight, and COMMIT WITH ENTER (a click would drop the item at the cursor
* and hide the arrow nudges) — and asserts via the embind position hooks that
* the item actually moved right.
*
* RED (bug present): the line does not move; delta == 0.
* GREEN (fixed): the line moves right; delta_x > 0.
*/
type SnapItem = { id: string; type: string; x: number; y: number };
type CollabModule = {
kicadCollabSnapshot(): string;
kicadCollabGetPos(id: string): string;
};
async function waitForCollabModule(page: Page): Promise<void> {
await page.waitForFunction(
() => {
const m = (window as unknown as { Module?: Partial<CollabModule> }).Module;
return typeof m?.kicadCollabSnapshot === 'function'
&& typeof m?.kicadCollabGetPos === 'function';
},
null,
{ timeout: 30000 },
);
}
async function snapshotItems(page: Page): Promise<SnapItem[]> {
return page.evaluate(() => {
const m = (window as unknown as { Module: CollabModule }).Module;
const snap = JSON.parse(m.kicadCollabSnapshot()) as { added: SnapItem[] };
return snap.added;
});
}
async function getPos(page: Page, id: string): Promise<{ x: number; y: number }> {
const raw = await page.evaluate(
(i) => (window as unknown as { Module: CollabModule }).Module.kicadCollabGetPos(i),
id,
);
const [x, y] = raw.split(',').map(Number);
return { x, y };
}
async function visibleGlCanvasBox(page: Page) {
const glCanvasId = await page.evaluate(() => {
const glCanvas =
Array.from(document.querySelectorAll('[id^="glcanvas-"]'))
.map((c) => c as HTMLCanvasElement)
.find((c) => {
const rect = c.getBoundingClientRect();
const style = window.getComputedStyle(c);
return style.display !== 'none' && rect.width > 0 && rect.height > 0;
}) ?? (document.querySelector('[id^="glcanvas-"]') as HTMLCanvasElement | null);
return glCanvas?.id ?? null;
});
expect(glCanvasId, 'visible GL canvas').not.toBeNull();
const box = await page.locator(`#${glCanvasId}`).boundingBox();
expect(box, 'GL canvas bounding box').not.toBeNull();
return box!;
}
test.describe('PCBnew move with "m" (#9)', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/kicad/pcbnew.html');
});
test('selected item moves with the arrow keys after pressing m', async ({ page, testLogger }) => {
await completeWizard(page, { screenshots: false });
await hideCursor(page);
await waitForCollabModule(page);
// Wait until the Draw Lines tool is registered, then select it.
await page.waitForFunction(() => {
const registry = window.wxElementRegistry;
return !!registry?.findAllRendered
&& registry.findAllRendered({ elementType: 'tool' })
.some((t) => t.tooltip?.includes('Draw Lines'));
}, null, { timeout: 15000 });
const isToolChecked = (t: { label?: string } | null | undefined) =>
(t?.label ?? '').includes('[checked]');
const idsBeforeDraw = new Set((await snapshotItems(page)).map((i) => i.id));
expect(await clickByTooltip(page, 'Draw Lines', { elementType: 'tool' })).toBe(true);
await expect.poll(async () =>
isToolChecked(await findByTooltip(page, 'Draw Lines', { elementType: 'tool' })), {
message: 'Draw Lines tool should stay selected',
timeout: 5000,
}).toBe(true);
// Draw a horizontal segment at known canvas pixels. Settle after each
// move so the asyncified pointer-move handler updates the world cursor
// before the click lands (see pcbnew.spec.ts draw-lines test).
const glBox = await visibleGlCanvasBox(page);
const startPoint = { x: Math.round(glBox.x + glBox.width * 0.35), y: Math.round(glBox.y + glBox.height * 0.45) };
const endPoint = { x: Math.round(glBox.x + glBox.width * 0.55), y: Math.round(glBox.y + glBox.height * 0.45) };
const midPoint = { x: Math.round((startPoint.x + endPoint.x) / 2), y: startPoint.y };
await page.mouse.move(startPoint.x, startPoint.y);
await page.waitForTimeout(350);
await page.mouse.down();
await page.mouse.up();
await page.waitForTimeout(350);
await page.mouse.move(endPoint.x, endPoint.y);
await page.waitForTimeout(350);
await page.mouse.down();
await page.mouse.up();
await page.waitForTimeout(500);
// Finish the segment and return to the selection tool.
await page.keyboard.press('Escape');
await page.waitForTimeout(250);
await page.keyboard.press('Escape');
await page.waitForTimeout(250);
// Identify the drawn item and its starting position.
const newItems = (await snapshotItems(page)).filter((i) => !idsBeforeDraw.has(i.id));
expect(newItems.length, `exactly one new board item was drawn (got ${JSON.stringify(newItems)})`).toBe(1);
const drawnId = newItems[0].id;
const pos0 = await getPos(page, drawnId);
const beforeMove = await page.screenshot({ path: 'test-results/pcbnew-move-00-before.png', scale: 'css' });
// Hover the cursor onto the line and select it, then move with the keyboard.
await page.mouse.move(midPoint.x, midPoint.y);
await page.waitForTimeout(350);
await page.mouse.down();
await page.mouse.up();
await page.waitForTimeout(350);
const NUDGES = 10;
await page.keyboard.press('m');
await page.waitForTimeout(400);
for (let i = 0; i < NUDGES; i++) {
await page.keyboard.press('ArrowRight');
await page.waitForTimeout(150);
}
// Commit at the nudged position WITHOUT moving the cursor (Enter, not click).
await page.keyboard.press('Enter');
await page.waitForTimeout(500);
const afterMove = await page.screenshot({ path: 'test-results/pcbnew-move-01-after.png', scale: 'css' });
const pos1 = await getPos(page, drawnId);
const dx = pos1.x - pos0.x;
const dy = pos1.y - pos0.y;
testLogger; // logs captured by fixture
console.log(`[TEST] pcbnew move dx=${dx} dy=${dy} pos0=${JSON.stringify(pos0)} pos1=${JSON.stringify(pos1)}`);
// Core regression: ArrowRight after `m` must move the item to the right.
// RED (no-op warp): dx == 0. GREEN (fixed): dx > 0, predominantly horizontal.
expect(dx, 'item should move right by the arrow keys (issue #9)').toBeGreaterThan(0);
expect(Math.abs(dy), 'ArrowRight move should be horizontal').toBeLessThanOrEqual(Math.abs(dx));
expect(beforeMove.length).toBeGreaterThan(0);
expect(afterMove.length).toBeGreaterThan(0);
});
});