e2e/documentation.spec.ts

Linked repository file from this build.

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

test("documentation navigates without a reload or review data requests", async ({ page }) => {
  const requests: string[] = [];
  page.on("request", (request) => {
    if (new URL(request.url()).pathname.startsWith("/api/")) requests.push(request.url());
  });
  await page.goto("/docs");
  await expect(page.getByRole("heading", { name: "Map of the repo", exact: true })).toBeVisible();
  await page.evaluate(() => {
    (window as Window & { docsNavigationMarker?: string }).docsNavigationMarker = "same-document";
  });
  await page
    .getByRole("navigation", { name: "Documentation pages" })
    .getByRole("link", { name: "Your first day", exact: true })
    .click();
  await expect(page).toHaveURL(/\/docs\/first-day$/);
  await expect(page.getByRole("heading", { name: "Your first day", exact: true })).toBeVisible();
  expect(
    await page.evaluate(
      () => (window as Window & { docsNavigationMarker?: string }).docsNavigationMarker,
    ),
  ).toBe("same-document");
  await page.getByText("On this page", { exact: true }).click();
  await page
    .getByRole("navigation", { name: "Article sections" })
    .getByRole("link", { name: "5. Choose the checks" })
    .click();
  await expect(page).toHaveURL(/#checks$/);
  await page.getByLabel("Find documentation").fill("object storage");
  await expect(
    page
      .getByRole("navigation", { name: "Documentation pages" })
      .getByRole("link", { name: "Documents", exact: true }),
  ).toBeVisible();
  await page
    .getByRole("navigation", { name: "Documentation pages" })
    .getByRole("link", { name: "Documents", exact: true })
    .click();
  await expect(page.getByRole("heading", { name: "Documents", exact: true })).toBeVisible();
  expect(requests.filter((url) => /\/api\/(inbox|catalog|reviews|search)/.test(url))).toEqual([]);
});

test("article source links use the built allowlist and arbitrary files are unavailable", async ({
  page,
}) => {
  await page.goto("/docs/systems/database");
  await page.locator('.docs-article a[href="/docs/source/src/lib/db/schema.ts"]').click();
  await expect(
    page.getByRole("heading", { name: "src/lib/db/schema.ts", exact: true }),
  ).toBeVisible();
  await expect(page.locator(".docs-source")).toContainText("reviewSnapshots");
  await page.goto("/docs/source/docs/data-loading.md#deterministic-seeding");
  await expect(page.locator("#deterministic-seeding")).toBeVisible();
  await page.goto("/docs/source/.env");
  await expect(page.getByText("This page could not be found.")).toBeVisible();
  await page.goto("/docs/missing-page");
  await expect(page.getByText("This page could not be found.")).toBeVisible();
});

test("mobile documentation navigation closes after selecting a page and content fits", async ({
  page,
}) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto("/docs");
  const menu = page.getByRole("button", { name: "Browse documentation" });
  await expect(menu).toHaveAttribute("aria-expanded", "false");
  await menu.click();
  await page.getByLabel("Find documentation").fill("architecture");
  await page
    .getByRole("navigation", { name: "Documentation pages" })
    .getByRole("link", { name: "Architecture", exact: true })
    .click();
  await expect(page.getByRole("heading", { name: "Architecture", exact: true })).toBeVisible();
  await expect(menu).toHaveAttribute("aria-expanded", "false");
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
});

test("staff navigation opens documentation and the public landing links to onboarding", async ({
  page,
}) => {
  await page
    .context()
    .addCookies([{ name: "qc-test-staff", value: "401", domain: "localhost", path: "/" }]);
  await page.route("**/api/inbox/events", (route) =>
    route.fulfill({ json: { events: [], unreadCount: 0 } }),
  );
  await page.goto("/imports");
  await page
    .getByRole("navigation", { name: "Main navigation" })
    .getByRole("link", { name: "Documentation", exact: true })
    .click();
  await expect(page).toHaveURL(/\/docs$/);
  await expect(page.getByRole("heading", { name: "Map of the repo", exact: true })).toBeVisible();
  await page.context().clearCookies();
  await page.goto("/");
  await expect(page.getByRole("link", { name: "Documentation", exact: true })).toHaveAttribute(
    "href",
    "/docs",
  );
  await page.getByRole("link", { name: "Explore the codebase", exact: true }).click();
  await expect(page.getByRole("heading", { name: "Your first day", exact: true })).toBeVisible();
});