e2e/loading-preview.spec.ts

Linked repository file from this build.

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

for (const destination of ["Home", "Reviews", "Workspace"] as const) {
  test(`${destination} loading reuses inert UI without fetching placeholder records`, async ({
    page,
  }) => {
    await page.goto(destination === "Reviews" ? "/dashboard" : "/reviews");
    const link =
      destination === "Workspace"
        ? page.locator('.app-page-content table a[href^="/reviews/"]').first()
        : page
            .getByRole("navigation", { name: "Main navigation" })
            .getByRole("link", { name: destination, exact: true });
    const href = await link.getAttribute("href");
    expect(href).toBeTruthy();
    let release!: () => void;
    const gate = new Promise<void>((resolve) => {
      release = resolve;
    });
    await page.route(
      (url) => url.pathname === href && url.searchParams.has("_rsc"),
      async (route) => {
        await gate;
        await route.continue();
      },
    );
    const requests: string[] = [];
    page.on("request", (request) => {
      if (/\/api\/(inbox|catalog|reviews)/.test(request.url())) requests.push(request.url());
    });
    await link.click();
    const preview = page.locator(".page-transition-loading .skeleton-ui").first();
    await expect(preview).toBeVisible({ timeout: 1000 });
    await expect(preview).toHaveAttribute("inert", "");
    await expect(preview).toHaveAttribute("aria-hidden", "true");
    if (destination === "Home") {
      await expect(preview.locator("section")).toHaveCount(9);
    } else if (destination === "Reviews") {
      await expect(preview.locator("tbody tr")).toHaveCount(10);
    } else {
      await expect(preview.locator(".workspace-session")).toBeVisible();
      await expect(preview.locator("#client-name")).toBeVisible();
      await expect(preview.locator('[role="tab"]').filter({ hasText: "Household" })).toBeVisible();
    }
    expect(requests).toEqual([]);
    release();
    await expect(page.locator(".page-transition-loading")).toHaveCount(0);
  });
}

for (const { destination, staff, selector } of [
  {
    destination: "Exports",
    staff: "501",
    selector: 'table[aria-label="Export eligibility by sample month"]',
  },
  { destination: "Imports", staff: "401", selector: 'label[for="closedSuspended"]' },
  { destination: "Policy", staff: "401", selector: '[aria-labelledby="policy-households"] table' },
  { destination: "Mail desk", staff: "401", selector: 'table[aria-label="Search results"]' },
]) {
  test(`${destination} navigation renders its shared page skeleton`, async ({ page }) => {
    await page
      .context()
      .addCookies([{ name: "qc-test-staff", value: staff, domain: "localhost", path: "/" }]);
    await page.goto("/reviews");
    const link = page
      .getByRole("navigation", { name: "Main navigation" })
      .getByRole("link", { name: destination, exact: true });
    const href = await link.getAttribute("href");
    let release!: () => void;
    const gate = new Promise<void>((resolve) => {
      release = resolve;
    });
    await page.route(
      (url) => url.pathname === href && url.searchParams.has("_rsc"),
      async (route) => {
        await gate;
        await route.continue();
      },
    );
    const requests: string[] = [];
    page.on("request", (request) => {
      if (/\/api\/(exports|search|policy|imports|reviews)(?:[/?]|$)/.test(request.url()))
        requests.push(request.url());
    });
    await link.click();
    const preview = page.locator(".page-transition-loading .skeleton-ui").first();
    await expect(preview).toBeVisible({ timeout: 1000 });
    await expect(preview).toHaveAttribute("inert", "");
    await expect(preview).toHaveAttribute("aria-hidden", "true");
    await expect(preview.locator(selector).first()).toBeVisible();
    await expect(preview.locator(".app-shell")).toHaveCount(0);
    expect(requests).toEqual([]);
    release();
    await expect(page.locator(".page-transition-loading")).toHaveCount(0);
    await expect(page.locator(".app-page-content").locator(selector).first()).toBeVisible();
  });
}