vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): restore react dashboard visual parity

Browse source
This commit is contained in:
vince 2026-06-19 23:56:49 +02:00
parent 72d56cb3c9
commit b1d196e4ca
5 changed files with 362 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/e2e/dashboard.spec.ts
View file

@ -1,5 +1,5 @@
import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";
import { expect, test, type Page } from "@playwright/test";
const linkedServiceIds = [
"vaultwarden",
@ -33,6 +33,7 @@ test.describe("dashboard page QA gate", () => {
test.skip(testInfo.project.name !== "chromium-desktop");
await page.goto("/");
await waitForDashboardReady(page);
await expect(page.getByRole("main")).toHaveAttribute(
"aria-labelledby",
@ -61,6 +62,7 @@ test.describe("dashboard page QA gate", () => {
await page.setViewportSize({ width: 1470, height: 956 });
await page.goto("/");
await waitForDashboardReady(page);
const metrics = await page.evaluate(() => {
const footer = document.querySelector("[data-model-id='footer-status']");
@ -111,6 +113,7 @@ test.describe("dashboard page QA gate", () => {
test.skip(testInfo.project.name !== "chromium-desktop");
await page.goto("/");
await waitForDashboardReady(page);
const bookmarkDensity = await page.evaluate(() => {
const panelBody = document.querySelector(".service-panel .panel__body");
@ -155,6 +158,7 @@ test.describe("dashboard page QA gate", () => {
await page.setViewportSize({ width: 1470, height: 956 });
await page.goto("/");
await waitForDashboardReady(page);
const typeScale = await page.evaluate(() => {
const fontSize = (selector: string) => {
@ -185,6 +189,7 @@ test.describe("dashboard page QA gate", () => {
test.skip(testInfo.project.name !== "chromium-mobile");
await page.goto("/");
await waitForDashboardReady(page);
await expect(
page.getByRole("heading", { level: 1, name: "System Overview" }),
@ -201,6 +206,7 @@ test.describe("dashboard page QA gate", () => {
page,
}) => {
await page.goto("/");
await waitForDashboardReady(page);
await expect(page.getByRole("main")).toHaveCount(1);
for (const serviceId of linkedServiceIds) {
@ -218,6 +224,7 @@ test.describe("dashboard page QA gate", () => {
test("passes automated accessibility checks", async ({ page }) => {
await page.goto("/");
await waitForDashboardReady(page);
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
@ -227,6 +234,7 @@ test.describe("dashboard page QA gate", () => {
await page.emulateMedia({ reducedMotion: "reduce" });
await page.goto("/");
await waitForDashboardReady(page);
const durations = await page.evaluate(() => {
const element = document.createElement("div");
element.style.animation = "qa-motion-check 10s infinite";
@ -249,6 +257,13 @@ test.describe("dashboard page QA gate", () => {
});
});
async function waitForDashboardReady(page: Page): Promise<void> {
await expect(
page.getByRole("heading", { level: 1, name: "System Overview" }),
).toBeVisible();
await expect(page.locator("[data-model-id='vaultwarden']")).toBeVisible();
}
function cssDurationToMilliseconds(duration: string): number {
if (duration.endsWith("ms")) return Number.parseFloat(duration);
if (duration.endsWith("s")) return Number.parseFloat(duration) * 1000;