e2e/ui-layouts.spec.ts

Linked repository file from this build.

import { expect, test } from "@playwright/test";

test("unified navigation, sidebar preferences and accessibility survive reload", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await page.goto("/dashboard");
  const nav = page.locator(".app-nav");
  const header = page.locator(".app-header");
  expect((await nav.boundingBox())!.y).toBe((await header.boundingBox())!.y);
  await page.getByRole("button", { name: "Appearance", exact: true }).click();
  const settings = page.locator(".appearance-settings");
  await expect(
    settings.getByRole("radiogroup", { name: "Layout", exact: true }).getByRole("radio"),
  ).toHaveCount(3);
  await settings.getByText("Sidebar", { exact: true }).click();
  await settings.getByRole("switch", { name: "Show icons when closed" }).check();
  await settings.getByRole("slider", { name: "Font size" }).fill("22");
  await settings.getByText("High contrast · black & white", { exact: true }).click();
  await settings.getByLabel("Font", { exact: true }).selectOption("serif");
  await page.keyboard.press("Escape");
  await page.reload();
  await expect(page.locator("html")).toHaveAttribute("data-layout", "workbench");
  await expect(page.locator("html")).toHaveAttribute("data-sidebar", "icons");
  await expect(page.locator("html")).toHaveAttribute("data-font", "serif");
  await expect(page.locator("html")).toHaveCSS("font-size", "22px");
  await expect(header).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
  await expect(header).toHaveCSS("border-bottom-width", "0px");
  await page.getByRole("button", { name: "Pin sidebar open" }).click();
  await expect(nav.getByText("Reviews", { exact: true })).toBeVisible();
});

test("Home refreshes only after five minutes and queue layout opens reviews", async ({ page }) => {
  await page.clock.install();
  let calls = 0;
  await page.route(/\/api\/inbox\?/, (route) => {
    calls++;
    return route.fulfill({
      json: {
        asOf: new Date().toISOString(),
        since: new Date().toISOString(),
        newReviews: [],
        lastTouched: [],
        awaitingReview: [],
        events: [],
        totals: { newReviews: 0, lastTouched: 0, awaitingReview: 0, events: 0 },
        lastInboxSeenAt: null,
      },
    });
  });
  await page.goto("/dashboard");
  await expect(page.getByRole("heading", { name: "Home", exact: true })).toBeVisible();
  await expect(page.locator(".elapsed-time")).toBeVisible();
  const initial = calls;
  await page.clock.fastForward(299_000);
  expect(calls).toBe(initial);
  await page.clock.fastForward(2_000);
  await expect.poll(() => calls).toBe(initial + 1);
  await page.getByRole("button", { name: "Appearance", exact: true }).click();
  await page
    .getByRole("radiogroup", { name: "Layout", exact: true })
    .getByText("Queue", { exact: true })
    .click();
  await expect(page).toHaveURL(/\/reviews$/);
  await page.getByRole("button", { name: "Pin sidebar open" }).hover();
  await expect(page.getByRole("complementary", { name: "Review queues" })).toBeVisible();
  await expect(page.locator(".app-queue").getByRole("button", { name: /Refresh/ })).toHaveCount(0);
});