create-ailk 0.17.0 → 0.19.0

package/templates/apps/web/app/[locale]/(authed)/account/artifacts/__tests__/page.test.tsx

@@ -0,0 +1,514 @@
+/**
+ * The Artifacts pages (#8234, spec 8234 D3, D4; #8338, spec
+ * docs/specs/8338-account-artifacts-structured-like-the-spec.md D3, D7,
+ * AC-3).
+ *
+ * `/account/artifacts` and `/account/artifacts/[pieceId]`, rendered as the
+ * RSCs they are, with the api-client's `member.artifacts` as the one mocked
+ * read. Covers:
+ *   - the list renders `AccountListFrame`'s table in the read's order (newest
+ *     delivery first, never by title), each row's Latest/Delivered/Review
+ *     cells and caption reading the LATEST version's own number, its
+ *     delivery date and the review state — approval first, then the latest
+ *     version's review — and the facet nav's counts over every artifact;
+ *   - a 404 (and a 401/403 while the email is unverified) is the empty line;
+ *     any other failure is the error row with Retry and no frame (7423 D12);
+ *   - the artifact page lists versions newest first, each with its number,
+ *     delivery date and note, and Download (this site's file route) or View
+ *     (an https link, new tab, noopener) — and nothing for a link that is not
+ *     https; no deliverer is shown;
+ *   - the review form shows on the latest version only, only while the
+ *     artifact is not approved and that version has no review; after a
+ *     Request changes the page says the next version will appear there.
+ */
+
+import { fireEvent, render, screen, within } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => {
+  const msgs: unknown = require("../../../../../../messages/en.json");
+  const dig = (obj: unknown, path: string): unknown =>
+    path
+      .split(".")
+      .reduce<unknown>(
+        (acc, k) =>
+          acc !== null && typeof acc === "object"
+            ? (acc as Record<string, unknown>)[k]
+            : undefined,
+        obj,
+      );
+  return {
+    __esModule: true,
+    getTranslations: async (
+      arg: string | { namespace?: string; locale?: string },
+    ) => {
+      const ns = typeof arg === "string" ? arg : (arg.namespace ?? "");
+      const messages = dig(msgs, ns);
+      return (key: string, values?: Record<string, unknown>): string => {
+        const value = dig(messages, key);
+        if (typeof value !== "string") return `${ns}.${key}`;
+        return value.replace(/\{(\w+)\}/g, (m, name: string) =>
+          values && name in values ? String(values[name]) : m,
+        );
+      };
+    },
+  };
+});
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue(new Headers()),
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockGetSession = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth.ts's lazy Better-Auth singleton has no HTTP/DB boundary a unit test of the session fields can mock without standing up Prisma.
+jest.mock("../../../../../../auth", () => ({
+  __esModule: true,
+  auth: {
+    api: { getSession: (...args: unknown[]) => mockGetSession(...args) },
+  },
+}));
+
+const mockArtifacts = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistSignups: { me: jest.fn() },
+  subscription: { me: jest.fn() },
+  member: { artifacts: (...args: unknown[]) => mockArtifacts(...args) },
+}));
+
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+const mockRefresh = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+  useRouter: () => ({ push: jest.fn(), refresh: mockRefresh }),
+  usePathname: () => "/account/artifacts",
+}));
+
+// jsdom does not implement the pointer-capture / scroll APIs Radix Select
+// relies on to open its listbox (packages/ui's own established precedent —
+// packages/ui/src/__tests__/setup.ts).
+beforeAll(() => {
+  Element.prototype.hasPointerCapture = (): boolean => false;
+  Element.prototype.setPointerCapture = (): void => {};
+  Element.prototype.releasePointerCapture = (): void => {};
+  Element.prototype.scrollIntoView = (): void => {};
+});
+
+import ArtifactPage from "../[pieceId]/page";
+import ListPage from "../page";
+
+const VERIFIED = {
+  user: {
+    id: "user_1",
+    name: "Ada",
+    email: "ada@example.com",
+    emailVerified: true,
+  },
+};
+
+const ID = {
+  zebra: "piece_01920000-0000-7000-8000-00000000000a",
+  mango: "piece_01920000-0000-7000-8000-00000000000b",
+  alpha: "piece_01920000-0000-7000-8000-00000000000c",
+};
+
+interface VersionFixture {
+  version: number;
+  file?: { filename: string; contentType: string; byteSize: number } | null;
+  link?: string | null;
+  note?: string | null;
+  deliveredAt?: string;
+  review?: "approved" | "changes-requested" | null;
+  reviewComment?: string | null;
+  reviewedAt?: string | null;
+}
+
+function version(v: VersionFixture) {
+  const hasLink = v.link !== undefined && v.link !== null;
+  return {
+    version: v.version,
+    file: hasLink
+      ? null
+      : (v.file ?? {
+          filename: `v${v.version}.pdf`,
+          contentType: "application/pdf",
+          byteSize: 10,
+        }),
+    link: v.link ?? null,
+    note: v.note ?? null,
+    deliveredAt: v.deliveredAt ?? `2026-09-0${v.version}T12:00:00.000Z`,
+    review: v.review ?? null,
+    reviewComment: v.reviewComment ?? null,
+    reviewedAt: v.reviewedAt ?? (v.review ? "2026-09-20T12:00:00.000Z" : null),
+  };
+}
+
+function ok(items: unknown[]) {
+  return { ok: true, body: { items } };
+}
+
+function refused(status: number, code = "x") {
+  return {
+    ok: false,
+    status,
+    body: { ok: false, error: { code, message: "x" } },
+  };
+}
+
+// AC-3's fixture: Zebra (approved, delivered last), Mango (changes requested
+// on the latest version, delivered second — never its OLDER version's date),
+// Alpha (unreviewed) — in the read's own order (never re-sorted by title).
+const ZEBRA = {
+  id: ID.zebra,
+  title: "Zebra logo",
+  approvedAt: "2026-09-25T09:00:00.000Z",
+  versions: [version({ version: 3, deliveredAt: "2026-10-03T12:00:00.000Z" })],
+};
+const MANGO = {
+  id: ID.mango,
+  title: "Mango brief",
+  approvedAt: null,
+  versions: [
+    version({
+      version: 2,
+      review: "changes-requested",
+      reviewComment: "Warmer",
+      deliveredAt: "2026-10-02T12:00:00.000Z",
+    }),
+    version({ version: 1, deliveredAt: "2026-09-20T12:00:00.000Z" }),
+  ],
+};
+const ALPHA = {
+  id: ID.alpha,
+  title: "Alpha deck",
+  approvedAt: null,
+  versions: [version({ version: 1, deliveredAt: "2026-09-18T12:00:00.000Z" })],
+};
+
+beforeEach(() => {
+  mockGetSession.mockReset().mockResolvedValue(VERIFIED);
+  mockArtifacts.mockReset().mockResolvedValue(ok([ZEBRA, MANGO, ALPHA]));
+  mockNotFound.mockClear();
+  mockRefresh.mockReset();
+  jest.spyOn(console, "error").mockImplementation(() => undefined);
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+async function renderList(): Promise<void> {
+  render(await ListPage({ params: Promise.resolve({ locale: "en" }) }));
+}
+
+async function renderArtifact(pieceId: string): Promise<void> {
+  render(
+    await ArtifactPage({ params: Promise.resolve({ locale: "en", pieceId }) }),
+  );
+}
+
+const medium = (iso: string): string =>
+  new Intl.DateTimeFormat("en", {
+    dateStyle: "medium",
+    timeZone: "UTC",
+  }).format(new Date(iso));
+
+function facetItems(): HTMLElement[] {
+  return within(screen.getByTestId("artifacts-facets")).getAllByTestId(
+    /^artifacts-facets-item-/,
+  );
+}
+
+describe("/account/artifacts (D3, AC-3)", () => {
+  it("renders the table in the read's order, each row's Latest/Delivered/Review and the nav's counts", async () => {
+    await renderList();
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      "Artifacts",
+    );
+
+    const table = screen.getByTestId("artifacts-table");
+    const titles = within(table).getAllByTestId(/-title$/);
+    expect(titles.map((t) => t.textContent)).toEqual([
+      "Zebra logo",
+      "Mango brief",
+      "Alpha deck",
+    ]);
+    expect(titles.map((t) => t.getAttribute("href"))).toEqual([
+      `/account/artifacts/${ID.zebra}`,
+      `/account/artifacts/${ID.mango}`,
+      `/account/artifacts/${ID.alpha}`,
+    ]);
+
+    const zebraRow = screen.getByTestId(`artifacts-table-row-${ID.zebra}`);
+    expect(zebraRow).toHaveTextContent("Version 3");
+    expect(zebraRow).toHaveTextContent(medium("2026-10-03T12:00:00.000Z"));
+    expect(zebraRow).toHaveTextContent("Approved");
+
+    const mangoRow = screen.getByTestId(`artifacts-table-row-${ID.mango}`);
+    expect(mangoRow).toHaveTextContent(medium("2026-10-02T12:00:00.000Z"));
+    expect(mangoRow).not.toHaveTextContent(medium("2026-09-20T12:00:00.000Z"));
+    expect(mangoRow).toHaveTextContent("Changes requested");
+
+    const alphaRow = screen.getByTestId(`artifacts-table-row-${ID.alpha}`);
+    expect(alphaRow).toHaveTextContent("Ready for review");
+
+    const captions = screen.getAllByTestId("artifacts-row");
+    // The phone rows render the same read, so their captions exist in the DOM
+    // even though only the table is visible at this (desktop) width.
+    expect(captions.map((c) => c.textContent)).toEqual([
+      expect.stringContaining("Version 3 · Approved"),
+      expect.stringContaining("Version 2 · Changes requested"),
+      expect.stringContaining("Version 1 · Ready for review"),
+    ]);
+
+    const items = facetItems();
+    expect(items.map((i) => i.getAttribute("data-testid"))).toEqual([
+      "artifacts-facets-item-all",
+      "artifacts-facets-item-ready",
+      "artifacts-facets-item-changes-requested",
+      "artifacts-facets-item-approved",
+    ]);
+    expect(items[0]).toHaveTextContent("All artifacts");
+    expect(items[0]).toHaveTextContent("3");
+    expect(items[1]).toHaveTextContent("1");
+    expect(items[2]).toHaveTextContent("1");
+    expect(items[3]).toHaveTextContent("1");
+    expect(screen.queryByTestId("inbox-error")).toBeNull();
+  });
+
+  it("a 404 read shows the empty line and a nav at 0, not an error row", async () => {
+    mockArtifacts.mockResolvedValue(refused(404, "not_found"));
+    await renderList();
+    expect(screen.getByTestId("artifacts-empty")).toHaveTextContent(
+      "Nothing has been delivered to you yet.",
+    );
+    for (const item of facetItems()) expect(item).toHaveTextContent("0");
+    expect(screen.queryByTestId("inbox-error")).toBeNull();
+  });
+
+  it("a 403 while the email is unverified shows the empty line too", async () => {
+    mockGetSession.mockResolvedValue({
+      user: { ...VERIFIED.user, emailVerified: false },
+    });
+    mockArtifacts.mockResolvedValue(refused(403, "forbidden"));
+    await renderList();
+    expect(screen.getByTestId("artifacts-empty")).toBeInTheDocument();
+    expect(screen.queryByTestId("inbox-error")).toBeNull();
+  });
+
+  it.each([
+    ["a 500", refused(500)],
+    ["a status-0 refusal", refused(0, "insecure_transport")],
+  ])("%s shows the error row with Retry and no frame", async (_case, res) => {
+    mockArtifacts.mockResolvedValue(res);
+    await renderList();
+    expect(screen.getByTestId("inbox-error")).toHaveTextContent(
+      "We couldn't load your artifacts.",
+    );
+    expect(screen.queryByTestId("artifacts-facets")).toBeNull();
+    expect(screen.queryByTestId("artifacts-table")).toBeNull();
+    expect(screen.queryByTestId("artifacts-empty")).toBeNull();
+    fireEvent.click(screen.getByTestId("inbox-retry"));
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  // The (authed) layout renders the sign-in gate for a missing session and
+  // the page renders in parallel with it, so a `notFound()` here streamed a
+  // 404 digest over the gate (the scaffold render sweep's
+  // `/account/artifacts -> streamed not-found`). Like `/account/general`, the
+  // page now renders its heading alone and reads nothing.
+  it("no session renders the heading alone and loads nothing", async () => {
+    mockGetSession.mockResolvedValue(null);
+    await renderList();
+    expect(screen.getByTestId("artifacts")).toBeInTheDocument();
+    expect(screen.queryByTestId("artifacts-empty")).toBeNull();
+    expect(screen.queryByTestId("inbox-error")).toBeNull();
+    expect(mockArtifacts).not.toHaveBeenCalled();
+  });
+});
+
+const VERSIONED = {
+  id: ID.alpha,
+  title: "Alpha deck",
+  approvedAt: null,
+  versions: [
+    version({
+      version: 3,
+      file: {
+        filename: "brief-v3.pdf",
+        contentType: "application/pdf",
+        byteSize: 2048,
+      },
+      note: "Final colours\nand the new mark",
+      deliveredAt: "2026-09-12T10:00:00.000Z",
+    }),
+    version({
+      version: 2,
+      link: "https://files.example.com/v2",
+      note: "Second pass",
+      deliveredAt: "2026-09-08T10:00:00.000Z",
+      review: "changes-requested",
+      reviewComment: "Bigger logo",
+    }),
+    version({
+      version: 1,
+      link: "http://insecure.example.com/v1",
+      note: "First draft",
+      deliveredAt: "2026-09-01T10:00:00.000Z",
+      review: "changes-requested",
+      reviewComment: "Warmer",
+    }),
+  ],
+};
+
+describe("/account/artifacts/[pieceId] (D4, AC-2)", () => {
+  beforeEach(() => {
+    mockArtifacts.mockResolvedValue(ok([VERSIONED]));
+  });
+
+  it("lists the versions newest first, each with its number, delivery date and note — and no deliverer", async () => {
+    await renderArtifact(ID.alpha);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      "Alpha deck",
+    );
+    expect(screen.getByTestId("artifact-back")).toHaveAttribute(
+      "href",
+      "/account/artifacts",
+    );
+    const blocks = screen.getAllByTestId(/^artifact-version-\d+$/);
+    expect(blocks.map((b) => b.getAttribute("data-testid"))).toEqual([
+      "artifact-version-3",
+      "artifact-version-2",
+      "artifact-version-1",
+    ]);
+    for (const v of VERSIONED.versions) {
+      const block = screen.getByTestId(`artifact-version-${v.version}`);
+      expect(block).toHaveTextContent(`Version ${v.version}`);
+      expect(block).toHaveTextContent(`Delivered ${medium(v.deliveredAt)}`);
+      expect(block).toHaveTextContent(v.note!.replace("\n", " "));
+    }
+    expect(
+      within(screen.getByTestId("artifact-version-2")).getByText("Bigger logo"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("artifact").textContent).not.toMatch(
+      /delivered by/i,
+    );
+  });
+
+  it("a file version downloads through this site's route; an https link is View in a new tab; a non-https link has no action", async () => {
+    await renderArtifact(ID.alpha);
+    const download = screen.getByTestId("artifact-version-3-download");
+    expect(download).toHaveAttribute(
+      "href",
+      `/account/artifacts/${ID.alpha}/versions/3/file`,
+    );
+    expect(download).toHaveTextContent("Download brief-v3.pdf");
+    expect(screen.queryByTestId("artifact-version-3-view")).toBeNull();
+
+    const view = screen.getByTestId("artifact-version-2-view");
+    expect(view).toHaveAttribute("href", "https://files.example.com/v2");
+    expect(view).toHaveAttribute("target", "_blank");
+    expect(view).toHaveAttribute("rel", "noopener noreferrer");
+    expect(view).toHaveTextContent("View");
+
+    const v1 = screen.getByTestId("artifact-version-1");
+    expect(within(v1).queryByRole("link")).toBeNull();
+    expect(screen.queryByTestId("artifact-version-1-view")).toBeNull();
+    expect(screen.queryByTestId("artifact-version-1-download")).toBeNull();
+  });
+
+  it("an encoded id segment still finds the artifact", async () => {
+    await renderArtifact(encodeURIComponent(ID.alpha));
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      "Alpha deck",
+    );
+  });
+
+  it("an id the read did not return is a not-found", async () => {
+    await expect(renderArtifact(ID.zebra)).rejects.toThrow("NEXT_NOT_FOUND");
+  });
+
+  it("a 404 read is a not-found", async () => {
+    mockArtifacts.mockResolvedValue(refused(404, "not_found"));
+    await expect(renderArtifact(ID.alpha)).rejects.toThrow("NEXT_NOT_FOUND");
+  });
+
+  it("a 500 read renders the error row with Retry, not a not-found", async () => {
+    mockArtifacts.mockResolvedValue(refused(500));
+    await renderArtifact(ID.alpha);
+    expect(mockNotFound).not.toHaveBeenCalled();
+    expect(screen.getByTestId("inbox-error")).toHaveTextContent(
+      "We couldn't load this artifact.",
+    );
+    expect(screen.getByTestId("inbox-retry")).toHaveTextContent("Retry");
+  });
+});
+
+describe("the review form's place (D4, C3, AC-4)", () => {
+  const FORM_IDS = [
+    "artifact-review-approve",
+    "artifact-review-request-changes",
+    "artifact-review-comment",
+  ];
+
+  it("shows once, inside the latest version, while the artifact is not approved and that version is unreviewed", async () => {
+    mockArtifacts.mockResolvedValue(ok([VERSIONED]));
+    await renderArtifact(ID.alpha);
+    for (const id of FORM_IDS) {
+      expect(screen.getAllByTestId(id)).toHaveLength(1);
+      expect(
+        within(screen.getByTestId("artifact-version-3")).getByTestId(id),
+      ).toBeInTheDocument();
+    }
+    expect(screen.getByTestId("artifact-status")).toHaveTextContent(
+      "Ready for review",
+    );
+    expect(screen.queryByTestId("artifact-review-waiting")).toBeNull();
+  });
+
+  it("is absent everywhere once the artifact is approved, which shows Approved and the date", async () => {
+    const approvedAt = "2026-09-30T08:00:00.000Z";
+    mockArtifacts.mockResolvedValue(ok([{ ...VERSIONED, approvedAt }]));
+    await renderArtifact(ID.alpha);
+    for (const id of FORM_IDS) expect(screen.queryByTestId(id)).toBeNull();
+    expect(screen.getByTestId("artifact-status")).toHaveTextContent("Approved");
+    expect(screen.getByTestId("artifact")).toHaveTextContent(
+      `Approved ${medium(approvedAt)}`,
+    );
+    expect(screen.queryByTestId("artifact-review-waiting")).toBeNull();
+  });
+
+  it("is absent on a latest version the member already asked changes on, which says the next version will appear here", async () => {
+    const [latest, ...rest] = VERSIONED.versions;
+    const reviewed = {
+      ...VERSIONED,
+      versions: [
+        {
+          ...latest!,
+          review: "changes-requested",
+          reviewComment: "Tighten the logo",
+          reviewedAt: "2026-09-13T10:00:00.000Z",
+        },
+        ...rest,
+      ],
+    };
+    mockArtifacts.mockResolvedValue(ok([reviewed]));
+    await renderArtifact(ID.alpha);
+    for (const id of FORM_IDS) expect(screen.queryByTestId(id)).toBeNull();
+    const v3 = screen.getByTestId("artifact-version-3");
+    expect(within(v3).getByTestId("artifact-review-waiting")).toHaveTextContent(
+      "You requested changes. The next version will appear here.",
+    );
+    expect(v3).toHaveTextContent(
+      `You requested changes on ${medium("2026-09-13T10:00:00.000Z")}.`,
+    );
+    expect(within(v3).getByText("Tighten the logo")).toBeInTheDocument();
+    expect(screen.getByTestId("artifact-status")).toHaveTextContent(
+      "Changes requested",
+    );
+  });
+});