Files
galaxy-game/ui/frontend/tests/e2e/a11y-keyboard.spec.ts
T
Ilia Denisov 4e0058d46c test(ui): migrate suite to the app-shell (state-driven navigation)
- Unit: repoint moved screen imports (lib/screens, lib/game), mock
  $lib/app-nav (appScreen/activeView) instead of $app/navigation, drop the
  removed gameId props, assert screen/view selection.
- e2e: add a dev-only window.__galaxyNav affordance; specs enter a game via
  enterGame(...) instead of a /games/:id URL; URL assertions become content
  assertions (the URL stays /game/); reload uses waitUntil:"commit" (shallow
  routing) and mocks /rpc on game entry.
- Remove the obsolete report scroll-restore test (it relied on a SvelteKit
  route Snapshot that no longer exists); update the missing-membership test
  to the new lobby-redirect+toast behaviour. Fix a stale report.svelte
  docstring.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-23 20:49:35 +02:00

72 lines
2.6 KiB
TypeScript

// F2 — keyboard-only navigation coverage for the in-game shell.
// Runs on chromium-desktop (a stable ≥1024px viewport where the sidebar
// is visible); the behaviours under test are engine-independent.
import { expect, test, type Page } from "@playwright/test";
const SESSION_ID = "f2-a11y-keyboard-session";
const GAME_ID = "10101010-1010-1010-1010-101010101010";
async function bootShell(page: Page): Promise<void> {
await page.goto("/__debug/store");
await expect(page.getByTestId("debug-store-ready")).toBeVisible();
await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
await page.evaluate(() => window.__galaxyDebug!.clearSession());
await page.evaluate(
(id) => window.__galaxyDebug!.setDeviceSessionId(id),
SESSION_ID,
);
await page.goto("/");
await page.waitForFunction(() => window.__galaxyNav !== undefined);
await page.evaluate(
(id) => window.__galaxyNav!.enterGame(id, "map", {}),
GAME_ID,
);
await expect(page.getByTestId("game-shell")).toBeVisible();
await expect(page.getByTestId("active-view-map")).toBeVisible();
}
test.describe("keyboard navigation", () => {
test.beforeEach(({}, testInfo) => {
test.skip(
testInfo.project.name !== "chromium-desktop",
"keyboard specs run on chromium-desktop",
);
});
test("skip link is the first focusable and jumps to main content", async ({
page,
}) => {
await bootShell(page);
await page.keyboard.press("Tab");
await expect(page.locator(".skip-link")).toBeFocused();
await page.keyboard.press("Enter");
await expect(page.locator("#active-view-host")).toBeFocused();
});
test("Escape closes the account menu and returns focus to its trigger", async ({
page,
}) => {
await bootShell(page);
await page.getByTestId("account-menu-trigger").click();
await expect(page.getByTestId("account-menu-list")).toBeVisible();
// Move focus into the menu, then dismiss with Escape.
await page.getByTestId("account-menu-theme-select").focus();
await page.keyboard.press("Escape");
await expect(page.getByTestId("account-menu-list")).toBeHidden();
await expect(page.getByTestId("account-menu-trigger")).toBeFocused();
});
test("sidebar tabs move with the arrow keys (roving)", async ({ page }) => {
await bootShell(page);
const calculator = page.getByTestId("sidebar-tab-calculator");
const inspector = page.getByTestId("sidebar-tab-inspector");
await calculator.click();
await expect(calculator).toHaveAttribute("aria-selected", "true");
await calculator.focus();
await page.keyboard.press("ArrowRight");
await expect(inspector).toBeFocused();
await expect(inspector).toHaveAttribute("aria-selected", "true");
});
});