97 lines
4.7 KiB
TypeScript
97 lines
4.7 KiB
TypeScript
import { createRequire } from "node:module";
|
|
import { expect, test } from "@playwright/test";
|
|
|
|
const require = createRequire(import.meta.url);
|
|
const axePath = require.resolve("axe-core/axe.min.js");
|
|
|
|
async function expectNoAccessibilityViolations(page: import("@playwright/test").Page) {
|
|
await page.addScriptTag({ path: axePath });
|
|
const violations = await page.evaluate(async () => {
|
|
const axe = (window as typeof window & { axe: { run: (options: unknown) => Promise<{ violations: Array<{ id: string; impact?: string | null; help: string; nodes: Array<{ target: unknown; failureSummary?: string }> }> }> } }).axe;
|
|
const result = await axe.run({ runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21aa"] } });
|
|
return result.violations.map(({ id, impact, help, nodes }) => ({
|
|
id,
|
|
impact,
|
|
help,
|
|
nodes: nodes.map((node: { target: unknown; failureSummary?: string }) => ({ target: node.target, failureSummary: node.failureSummary }))
|
|
}));
|
|
});
|
|
expect(violations).toEqual([]);
|
|
}
|
|
|
|
test("shared components remain accessible and keyboard operable", async ({ page }) => {
|
|
await page.goto("/?theme=light");
|
|
await expect(page.getByRole("heading", { level: 1, name: "Zentrale GovOPlaN-Oberflächen" })).toBeVisible();
|
|
await expectNoAccessibilityViolations(page);
|
|
|
|
const editorActions = page.getByRole("toolbar", { name: "Bearbeitungsaktionen" });
|
|
await expect(editorActions.getByRole("button")).toHaveText([
|
|
"Neu laden",
|
|
"Vorschau öffnen",
|
|
"Löschen",
|
|
"Verwerfen",
|
|
"Änderungen speichern"
|
|
]);
|
|
await editorActions.getByRole("button", { name: "Neu laden" }).focus();
|
|
await page.keyboard.press("Tab");
|
|
await expect(editorActions.getByRole("button", { name: "Vorschau öffnen" })).toBeFocused();
|
|
await page.keyboard.press("Tab");
|
|
await expect(editorActions.locator(".disabled-action-tooltip")).toBeFocused();
|
|
await expect(page.getByRole("tooltip")).toContainText("Nur die federführende Stelle");
|
|
await page.keyboard.press("Tab");
|
|
await expect(editorActions.getByRole("button", { name: "Verwerfen" })).toBeFocused();
|
|
await page.keyboard.press("Tab");
|
|
await expect(editorActions.getByRole("button", { name: "Änderungen speichern" })).toBeFocused();
|
|
|
|
const opener = page.getByTestId("open-dialog");
|
|
await opener.focus();
|
|
await page.keyboard.press("Enter");
|
|
await expect(page.getByRole("dialog", { name: "Konsequenz vor Ausführung prüfen" })).toBeVisible();
|
|
await expectNoAccessibilityViolations(page);
|
|
await page.keyboard.press("Escape");
|
|
await expect(page.getByRole("dialog")).toBeHidden();
|
|
await expect(opener).toBeFocused();
|
|
});
|
|
|
|
test("full-page tool launch preserves a bounded return context", async ({ page }) => {
|
|
await page.goto("/?theme=light");
|
|
await page.getByTestId("launch-full-page").click();
|
|
await expect(page).toHaveURL(/\/files$/);
|
|
const returnButton = page.getByRole("button", { name: /RPP-2026-0001.*Anwohnerparkausweis/ });
|
|
await expect(returnButton).toBeVisible();
|
|
await returnButton.click();
|
|
await expect(page).toHaveURL(/\/?\?theme=light$/);
|
|
});
|
|
|
|
test("light and dark desktop geometry remains stable", async ({ page }) => {
|
|
await page.setViewportSize({ width: 1440, height: 1000 });
|
|
await page.goto("/?theme=light");
|
|
await expect(page.locator("[data-conformance-id='shared-ui-lab']")).toHaveScreenshot("shared-ui-light-desktop.png", { animations: "disabled", maxDiffPixelRatio: 0.005 });
|
|
|
|
await page.goto("/?theme=dark");
|
|
await expect(page.locator("[data-conformance-id='shared-ui-lab']")).toHaveScreenshot("shared-ui-dark-desktop.png", { animations: "disabled", maxDiffPixelRatio: 0.005 });
|
|
});
|
|
|
|
test("narrow layout preserves task order without horizontal overflow", async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto("/?theme=light");
|
|
await expect(page.getByText("Bedingung prüfen")).toBeVisible();
|
|
const overflowing = await page.evaluate(() => Array.from(document.querySelectorAll<HTMLElement>("body *"))
|
|
.map((element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
return {
|
|
element: `${element.tagName.toLowerCase()}.${Array.from(element.classList).join(".")}`,
|
|
left: Math.round(rect.left),
|
|
right: Math.round(rect.right),
|
|
scrollWidth: element.scrollWidth,
|
|
clientWidth: element.clientWidth
|
|
};
|
|
})
|
|
.filter(({ left, right }) => left < -1 || right > window.innerWidth + 1)
|
|
.slice(0, 20));
|
|
expect(overflowing).toEqual([]);
|
|
await expect(page.locator("[data-page-action-archetype='editor'] [data-page-action-group='trailing']"))
|
|
.toHaveCSS("justify-content", "flex-end");
|
|
await expect(page.locator("[data-conformance-id='shared-ui-lab']")).toHaveScreenshot("shared-ui-light-narrow.png", { animations: "disabled", maxDiffPixelRatio: 0.005 });
|
|
});
|