Files
galaxy-game/ui/frontend/tests/e2e/a11y-axe.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

129 lines
4.1 KiB
TypeScript

// F2 — automated WCAG 2.2 AA scans with axe-core across every
// top-level view. Runs only on chromium-desktop (axe's colour-contrast
// and computed-role checks need one real engine; repeating across the
// webkit/mobile projects adds cost without new signal).
//
// Auth is bootstrapped through `/__debug/store` exactly as the
// game-shell specs do; the in-game shell tolerates a missing gateway
// (ECONNREFUSED) and still renders the chrome + view shells, which is
// what the structural a11y scan needs. Screens and in-game views are
// reached through the dev-only `window.__galaxyNav` affordance — the
// single-URL app-shell has no per-screen / per-view routes.
import AxeBuilder from "@axe-core/playwright";
import { expect, test, type Page } from "@playwright/test";
import type { GameView, GameViewState } from "../../src/lib/app-nav.svelte";
const SESSION_ID = "f2-a11y-axe-session";
// A real UUID — the layout's auto-sync calls `uuidToHiLo` on it.
const GAME_ID = "10101010-1010-1010-1010-101010101010";
const WCAG_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
async function authenticate(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,
);
}
async function expectNoViolations(page: Page): Promise<void> {
const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
// Surface the rule ids in the assertion message for a fast triage.
expect(
results.violations,
results.violations.map((v) => `${v.id} (${v.nodes.length})`).join(", "),
).toEqual([]);
}
test.describe("axe WCAG 2.2 AA", () => {
test.beforeEach(({}, testInfo) => {
test.skip(
testInfo.project.name !== "chromium-desktop",
"axe scan runs once, on chromium-desktop",
);
});
test("login", async ({ page }) => {
// No seeded session → the dispatcher renders the login screen.
await page.goto("/");
await expect(page.locator("#main-content")).toBeVisible();
await expectNoViolations(page);
});
test("lobby", async ({ page }) => {
await authenticate(page);
await page.goto("/");
await expect(page.locator("#main-content")).toBeVisible();
await expectNoViolations(page);
});
test("lobby create", async ({ page }) => {
await authenticate(page);
await page.goto("/");
await page.waitForFunction(() => window.__galaxyNav !== undefined);
await page.evaluate(() => window.__galaxyNav!.go("lobby-create"));
await expect(page.locator("#main-content")).toBeVisible();
await expectNoViolations(page);
});
type ViewParams = Omit<GameViewState, "view">;
const inGameViews: Array<{
label: string;
view: GameView;
params: ViewParams;
testId: string;
}> = [
{ label: "map", view: "map", params: {}, testId: "active-view-map" },
{
label: "report",
view: "report",
params: {},
testId: "active-view-report",
},
{ label: "mail", view: "mail", params: {}, testId: "active-view-mail" },
{
label: "battle",
view: "battle",
params: {},
testId: "active-view-battle",
},
{
label: "designer/science",
view: "designer-science",
params: {},
testId: "active-view-designer-science",
},
{
label: "table/planets",
view: "table",
params: { tableEntity: "planets" },
testId: "active-view-table",
},
];
for (const { label, view, params, testId } of inGameViews) {
test(`in-game: ${label}`, async ({ page }) => {
await authenticate(page);
await page.goto("/");
await page.waitForFunction(() => window.__galaxyNav !== undefined);
await page.evaluate(
([id, v, p]) =>
window.__galaxyNav!.enterGame(
id as string,
v as GameView,
p as ViewParams,
),
[GAME_ID, view, params] as const,
);
await expect(page.getByTestId("game-shell")).toBeVisible();
await expect(page.getByTestId(testId)).toBeVisible();
await expectNoViolations(page);
});
}
});