feat(wasm-dom): tests for context menus + scrollbars; fix clean wx build
- Standalone wx test apps (contextmenu, scrollbar) + e2e specs proving the wxScrollBar control, the wxScrolledWindow gutter, and DoPopupMenu. - KiCad in-app specs: pl_editor + pcbnew canvas right-click context menus and scrolled-panel scrollbar gutters, with baseline screenshots. - build-wx-wasm.sh: serial -j1 fallback when the parallel build trips the intermittent clean-build race (a generated header read mid-rewrite by concurrent compiles; never happens at -j1). Recovery resumes from built objects; a genuine error still fails the serial pass. - Bump wxwidgets submodule (context menus + draggable scrollbars). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Viktor Vaczi
parent
8dbca8a48b
commit
68430fa87c
19 changed files with 742 additions and 3 deletions
141
tests/kicad/contextmenu-scrollbar-pcbnew.spec.ts
Normal file
141
tests/kicad/contextmenu-scrollbar-pcbnew.spec.ts
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
import type { Page } from '@playwright/test';
|
||||
import { test, expect } from './fixtures';
|
||||
import { clickByLabel, clickMenuItem, findRenderedByType } from '../e2e/utils/element-tracker';
|
||||
|
||||
/**
|
||||
* Secondary in-app proof on pcbnew (the user's explicit ask): the right-side
|
||||
* Appearance/Layers panel is a wxScrolledWindow whose layer list always
|
||||
* overflows, so its built-in scrollbar gutter is a reliable demonstration of
|
||||
* the draggable scrollbar; the GAL canvas right-click demonstrates the context
|
||||
* menu. pcbnew is the largest app — this spec is slow by design.
|
||||
*
|
||||
* Screenshots: test-results/pcbnew-sidebar-scrollbar.png, pcbnew-context-menu.png.
|
||||
*/
|
||||
|
||||
async function waitForEditor(page: Page): Promise<void> {
|
||||
await expect(page.locator('#canvas')).toBeVisible({ timeout: 120000 });
|
||||
await page.waitForFunction(() => !!window.wxElementRegistry, null, { timeout: 120000 });
|
||||
await page.waitForTimeout(2000);
|
||||
// Dismiss the first-run setup wizard (pcbnew shows one).
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const next = await clickByLabel(page, 'Next >');
|
||||
if (!next) {
|
||||
await clickByLabel(page, 'Finish');
|
||||
break;
|
||||
}
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
await page.waitForTimeout(2000);
|
||||
}
|
||||
|
||||
async function getGlBox(page: Page): Promise<{ x: number; y: number; width: number; height: number }> {
|
||||
const id = await page.evaluate(() => {
|
||||
const visible = Array.from(document.querySelectorAll('[id^="glcanvas-"]'))
|
||||
.map((c) => c as HTMLCanvasElement)
|
||||
.find((c) => {
|
||||
const rect = c.getBoundingClientRect();
|
||||
return window.getComputedStyle(c).display !== 'none' && rect.width > 0 && rect.height > 0;
|
||||
});
|
||||
return (visible ?? (document.querySelector('[id^="glcanvas-"]') as HTMLCanvasElement | null))?.id ?? null;
|
||||
});
|
||||
if (!id) throw new Error('No visible GL canvas found');
|
||||
const box = await page.locator(`#${id}`).boundingBox();
|
||||
if (!box) throw new Error('GL canvas bounding box unavailable');
|
||||
return box;
|
||||
}
|
||||
|
||||
test.describe('pcbnew: DOM-port scrollbar + context menu', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/kicad/pcbnew.html');
|
||||
});
|
||||
|
||||
test('the appearance/layers panel shows a draggable scrollbar gutter', async ({ page }) => {
|
||||
await waitForEditor(page);
|
||||
|
||||
await expect.poll(async () => (await findRenderedByType(page, 'slidertrack')).length, {
|
||||
timeout: 15000,
|
||||
message: 'the overflowing layers panel should show a built-in scrollbar gutter',
|
||||
}).toBeGreaterThan(0);
|
||||
|
||||
await page.screenshot({ path: 'test-results/pcbnew-sidebar-scrollbar.png', fullPage: true });
|
||||
|
||||
const tracks = await findRenderedByType(page, 'slidertrack');
|
||||
const sliders = await findRenderedByType(page, 'slider');
|
||||
const vTrack = tracks.find((t) => t.height > t.width) ?? tracks[0];
|
||||
const vThumb = sliders.find((s) => s.parentId === vTrack.parentId) ?? sliders[0];
|
||||
expect(vThumb, 'a vertical gutter thumb should exist').toBeTruthy();
|
||||
|
||||
await page.mouse.move(vThumb.centerX, vThumb.centerY);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(vTrack.centerX, vTrack.screenY + vTrack.height * 0.7, { steps: 6 });
|
||||
await page.mouse.up();
|
||||
await page.waitForTimeout(400);
|
||||
await page.screenshot({ path: 'test-results/pcbnew-sidebar-scrollbar-dragged.png', fullPage: true });
|
||||
});
|
||||
|
||||
// Labels of the items in the currently-open DOM context-menu popup.
|
||||
async function popupLabels(page: Page): Promise<string[]> {
|
||||
const items = await findRenderedByType(page, 'menuitem', { parentId: 'popupmenu' });
|
||||
return items.map((i) => i.label);
|
||||
}
|
||||
|
||||
test('right-click on the canvas opens the tool-framework context menu', async ({
|
||||
page,
|
||||
testLogger,
|
||||
}) => {
|
||||
await waitForEditor(page);
|
||||
|
||||
// Right-click the drawing canvas. pcbnew's selection tool builds its menu
|
||||
// (common/tool/tool_manager.cpp) and calls frame->PopupMenu() from inside
|
||||
// a suspended tool coroutine — the DOM port renders it as a popup at the
|
||||
// cursor and routes the chosen command back synchronously.
|
||||
const box = await getGlBox(page);
|
||||
const x = Math.round(box.x + box.width * 0.5);
|
||||
const y = Math.round(box.y + box.height * 0.5);
|
||||
await page.mouse.click(x, y); // activate the selection tool
|
||||
await page.waitForTimeout(400);
|
||||
await page.mouse.click(x, y, { button: 'right' });
|
||||
|
||||
// The popup items register in the e2e registry under parentId 'popupmenu'.
|
||||
await expect.poll(async () => (await popupLabels(page)).length, {
|
||||
timeout: 15000,
|
||||
message: 'the canvas right-click should open a DOM context menu',
|
||||
}).toBeGreaterThan(0);
|
||||
|
||||
// It must be the REAL pcbnew context menu: Zoom and Grid submenus are
|
||||
// always present regardless of selection/clipboard state.
|
||||
const labels = await popupLabels(page);
|
||||
expect(labels, `menu items were: ${JSON.stringify(labels)}`).toEqual(
|
||||
expect.arrayContaining(['Zoom', 'Grid']),
|
||||
);
|
||||
|
||||
// Every shown item is enabled and routable.
|
||||
const items = await findRenderedByType(page, 'menuitem', { parentId: 'popupmenu' });
|
||||
expect(items.every((i) => i.enabled)).toBe(true);
|
||||
|
||||
await page.screenshot({ path: 'test-results/pcbnew-context-menu.png', fullPage: true });
|
||||
|
||||
// The menu is interactive: opening the "Zoom" submenu replaces the popup
|
||||
// with the submenu's items (so the top-level "Grid" entry disappears).
|
||||
expect(await clickMenuItem(page, 'Zoom'), 'Zoom submenu should be clickable').toBe(true);
|
||||
await expect.poll(async () => (await popupLabels(page)).includes('Grid'), {
|
||||
timeout: 5000,
|
||||
message: 'clicking "Zoom" should descend into its submenu (top-level items gone)',
|
||||
}).toBe(false);
|
||||
const subLabels = await popupLabels(page);
|
||||
expect(subLabels.length, `submenu was: ${JSON.stringify(subLabels)}`).toBeGreaterThan(0);
|
||||
await page.screenshot({ path: 'test-results/pcbnew-context-submenu.png', fullPage: true });
|
||||
|
||||
// Escape dismisses the popup without firing a command (registry clears).
|
||||
await page.keyboard.press('Escape');
|
||||
await expect.poll(async () => (await popupLabels(page)).length, {
|
||||
timeout: 5000,
|
||||
message: 'Escape should dismiss the context menu',
|
||||
}).toBe(0);
|
||||
|
||||
expect(
|
||||
testLogger.errors.filter((e) => !e.includes('favicon') && !e.includes('WebGL')),
|
||||
'no page errors during the context-menu flow',
|
||||
).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
144
tests/kicad/contextmenu-scrollbar.spec.ts
Normal file
144
tests/kicad/contextmenu-scrollbar.spec.ts
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
import type { Page } from '@playwright/test';
|
||||
import { test, expect } from './fixtures';
|
||||
import { clickByLabel, findRenderedByType } from '../e2e/utils/element-tracker';
|
||||
|
||||
/**
|
||||
* In-app proof that the two DOM-port features work inside a real KiCad app.
|
||||
*
|
||||
* pl_editor is the smallest KiCad editor (fast to build, seeded config so no
|
||||
* setup wizard). It exercises BOTH features that were stubbed:
|
||||
* 1. a right-click CONTEXT MENU on the GAL canvas — KiCad's tool framework
|
||||
* calls frame->PopupMenu() (common/tool/tool_manager.cpp) from inside a
|
||||
* suspended tool coroutine; this is the hardest DoPopupMenu path.
|
||||
* 2. a built-in SCROLLBAR gutter on a wxScrolledWindow (the properties
|
||||
* panel); a short viewport forces it to overflow so the gutter shows.
|
||||
*
|
||||
* Screenshots (test-results/pl_editor-*.png) are the deliverable — always
|
||||
* open them to confirm the menu sits at the cursor and the thumb is visible.
|
||||
*/
|
||||
|
||||
async function waitForEditor(page: Page): Promise<void> {
|
||||
await expect(page.locator('#canvas')).toBeVisible({ timeout: 90000 });
|
||||
await page.waitForFunction(() => !!window.wxElementRegistry, null, { timeout: 90000 });
|
||||
await page.waitForTimeout(2000);
|
||||
// pl_editor's seeded config skips the wizard; the loop is a harmless no-op.
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const next = await clickByLabel(page, 'Next >');
|
||||
if (!next) {
|
||||
await clickByLabel(page, 'Finish');
|
||||
break;
|
||||
}
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
await page.waitForTimeout(1500);
|
||||
}
|
||||
|
||||
async function getGlBox(page: Page): Promise<{ x: number; y: number; width: number; height: number }> {
|
||||
const id = await page.evaluate(() => {
|
||||
const visible = Array.from(document.querySelectorAll('[id^="glcanvas-"]'))
|
||||
.map((c) => c as HTMLCanvasElement)
|
||||
.find((c) => {
|
||||
const rect = c.getBoundingClientRect();
|
||||
return window.getComputedStyle(c).display !== 'none' && rect.width > 0 && rect.height > 0;
|
||||
});
|
||||
return (visible ?? (document.querySelector('[id^="glcanvas-"]') as HTMLCanvasElement | null))?.id ?? null;
|
||||
});
|
||||
if (!id) throw new Error('No visible GL canvas found');
|
||||
const box = await page.locator(`#${id}`).boundingBox();
|
||||
if (!box) throw new Error('GL canvas bounding box unavailable');
|
||||
return box;
|
||||
}
|
||||
|
||||
async function popupItems(page: Page) {
|
||||
return findRenderedByType(page, 'menuitem', { parentId: 'popupmenu' });
|
||||
}
|
||||
|
||||
test.describe('pl_editor: DOM-port context menu + scrollbar', () => {
|
||||
// A short viewport makes the right-side properties panel overflow so its
|
||||
// built-in scrollbar gutter appears.
|
||||
test.use({ viewport: { width: 1280, height: 540 } });
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/kicad/pl_editor.html');
|
||||
});
|
||||
|
||||
test('right-click on the canvas opens a context menu', async ({ page, testLogger }) => {
|
||||
await waitForEditor(page);
|
||||
|
||||
const box = await getGlBox(page);
|
||||
const x = Math.round(box.x + box.width * 0.5);
|
||||
const y = Math.round(box.y + box.height * 0.5);
|
||||
|
||||
// Left-click first so the selection tool is active, then right-click.
|
||||
await page.mouse.click(x, y);
|
||||
await page.waitForTimeout(300);
|
||||
await page.mouse.click(x, y, { button: 'right' });
|
||||
|
||||
await expect.poll(async () => (await popupItems(page)).length, {
|
||||
timeout: 12000,
|
||||
message: 'the canvas right-click should open a DOM context menu',
|
||||
}).toBeGreaterThan(0);
|
||||
|
||||
await page.screenshot({ path: 'test-results/pl_editor-context-menu.png', fullPage: true });
|
||||
|
||||
// Dismiss it; the popup should disappear.
|
||||
await page.keyboard.press('Escape');
|
||||
await expect.poll(async () => (await popupItems(page)).length, { timeout: 5000 }).toBe(0);
|
||||
|
||||
expect(
|
||||
testLogger.errors.filter((e) => !e.includes('favicon') && !e.includes('WebGL')),
|
||||
'no page errors during the context-menu flow',
|
||||
).toHaveLength(0);
|
||||
});
|
||||
|
||||
// Returns the visible (display != none, real size) DOM scrollbar gutters.
|
||||
async function visibleGutters(page: Page) {
|
||||
return page.evaluate(() => {
|
||||
return Array.from(document.querySelectorAll('[data-wx-scrollbar]'))
|
||||
.map((el) => {
|
||||
const r = (el as HTMLElement).getBoundingClientRect();
|
||||
return {
|
||||
x: Math.round(r.x), y: Math.round(r.y),
|
||||
w: Math.round(r.width), h: Math.round(r.height),
|
||||
shown: getComputedStyle(el as HTMLElement).display !== 'none',
|
||||
};
|
||||
})
|
||||
.filter((g) => g.shown && g.w > 0 && g.h > 0);
|
||||
});
|
||||
}
|
||||
|
||||
test('the properties panel shows a draggable scrollbar gutter', async ({ page }) => {
|
||||
await waitForEditor(page);
|
||||
|
||||
// The right-hand properties panel's "General Options" tab is a
|
||||
// wxScrolledWindow full of page-setup fields; in a short window it
|
||||
// overflows, so its built-in scrollbar gutter renders. Switch to it and
|
||||
// shrink the window.
|
||||
await page.setViewportSize({ width: 1180, height: 460 });
|
||||
await page.waitForTimeout(500);
|
||||
// Click the "Gener..." tab (top-right of the properties panel).
|
||||
await page.mouse.click(1140, 80);
|
||||
await page.waitForTimeout(900);
|
||||
|
||||
await expect.poll(async () => (await visibleGutters(page)).length, {
|
||||
timeout: 12000,
|
||||
message: 'a built-in scrollbar gutter should render on the overflowing properties panel',
|
||||
}).toBeGreaterThan(0);
|
||||
|
||||
await page.screenshot({ path: 'test-results/pl_editor-scrollbar.png', fullPage: true });
|
||||
|
||||
// Drag the vertical gutter's thumb and screenshot the move.
|
||||
const tracks = await findRenderedByType(page, 'slidertrack');
|
||||
const sliders = await findRenderedByType(page, 'slider');
|
||||
const vTrack = tracks.find((t) => t.height > t.width && t.height > 0) ?? null;
|
||||
const vThumb = vTrack ? sliders.find((s) => s.parentId === vTrack.parentId) : null;
|
||||
if (vThumb && vTrack) {
|
||||
await page.mouse.move(vThumb.centerX, vThumb.centerY);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(vTrack.centerX, vTrack.screenY + vTrack.height * 0.7, { steps: 6 });
|
||||
await page.mouse.up();
|
||||
await page.waitForTimeout(300);
|
||||
await page.screenshot({ path: 'test-results/pl_editor-scrollbar-dragged.png', fullPage: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue