test: add MVP QA gate

tests/e2e/dashboard.spec.ts

@@ -0,0 +1,103 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+test.describe("dashboard page QA gate", () => {
+  test("renders the model-driven dashboard on desktop", async ({
+    page,
+  }, testInfo) => {
+    test.skip(testInfo.project.name !== "chromium-desktop");
+
+    await page.goto("/");
+
+    await expect(page.getByRole("main")).toHaveAttribute(
+      "aria-labelledby",
+      /title/,
+    );
+    await expect(
+      page.getByRole("heading", { level: 1, name: "System Overview" }),
+    ).toBeVisible();
+    await expect(page.getByText("Infra RAM")).toBeVisible();
+    await expect(page.getByRole("link", { name: /Vaultwarden/i })).toBeVisible();
+    await expect(page.locator("[data-model-id='vaultwarden']")).toBeVisible();
+
+    const bodyBox = await page.locator("body").boundingBox();
+    expect(bodyBox?.width).toBeGreaterThan(1000);
+
+    const screenshot = await page.screenshot({ fullPage: true });
+    expect(screenshot.byteLength).toBeGreaterThan(20_000);
+  });
+
+  test("keeps the first screen usable on mobile", async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name !== "chromium-mobile");
+
+    await page.goto("/");
+
+    await expect(
+      page.getByRole("heading", { level: 1, name: "System Overview" }),
+    ).toBeVisible();
+    await expect(page.getByLabel("Service groups")).toBeVisible();
+
+    const screenshot = await page.screenshot({ fullPage: true });
+    expect(screenshot.byteLength).toBeGreaterThan(12_000);
+  });
+
+  test("exposes usable landmarks and a visible keyboard focus state", async ({
+    page,
+  }) => {
+    await page.goto("/");
+
+    await expect(page.getByRole("main")).toHaveCount(1);
+    await page.keyboard.press("Tab");
+
+    const focused = page.locator(":focus");
+    await expect(focused).toHaveAttribute("href", /vault\.dimensionlab\.net/);
+
+    const focusBoxShadow = await focused.evaluate((element) => {
+      return window.getComputedStyle(element).boxShadow;
+    });
+    expect(focusBoxShadow).not.toBe("none");
+  });
+
+  test("passes automated accessibility checks", async ({ page }) => {
+    await page.goto("/");
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test("honors reduced-motion preferences", async ({ browser }) => {
+    const context = await browser.newContext({ reducedMotion: "reduce" });
+    const page = await context.newPage();
+
+    try {
+      await page.goto("/");
+      const durations = await page.evaluate(() => {
+        const element = document.createElement("div");
+        element.style.animation = "qa-motion-check 10s infinite";
+        element.style.transition = "opacity 10s linear";
+        document.body.append(element);
+
+        const styles = window.getComputedStyle(element);
+        return {
+          animation: styles.animationDuration,
+          transition: styles.transitionDuration,
+        };
+      });
+
+      expect(cssDurationToMilliseconds(durations.animation)).toBeLessThanOrEqual(
+        0.01,
+      );
+      expect(cssDurationToMilliseconds(durations.transition)).toBeLessThanOrEqual(
+        0.01,
+      );
+    } finally {
+      await context.close();
+    }
+  });
+});
+
+function cssDurationToMilliseconds(duration: string): number {
+  if (duration.endsWith("ms")) return Number.parseFloat(duration);
+  if (duration.endsWith("s")) return Number.parseFloat(duration) * 1000;
+  return Number.NaN;
+}