create-ailk 0.17.0 → 0.19.0

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

@@ -0,0 +1,568 @@
+/**
+ * Tests for /[locale]/account/general — User settings › General (#8339
+ * D8; builds on #8232 D1-D8; AC-1, AC-3, AC-4, AC-6).
+ *
+ * General now renders through the shared `AccountSettings` composition
+ * (@working-theory/templates/account, spec 8339 D4) via the `GeneralSettings`
+ * adapter — the Admin's form structure and test ids
+ * (`account-general-*`), not the former `account-name-*` ones. Sign-in and
+ * cookie settings moved to Security/Notifications (security.test.tsx,
+ * notifications.test.tsx); this file keeps:
+ *
+ *   1. The frame — Back to the Inbox, the four-tab rail with General
+ *      current.
+ *   2. The color-mode control, the profile form (email read-only, name,
+ *      photo, Save) and the deletion block in the pane's DOM order.
+ *   3. The profile form on the member path: one Save sends the name, and
+ *      the photo only when it changed; a refusal keeps what was typed.
+ *   4. The profile form with no member API (a 404): Better Auth's save, no
+ *      photo field.
+ *   5. The deletion request: the answer names who it went to; the action's
+ *      refusal mapping; a Support pointer with no member API.
+ *   6. `#billing` forwards to Billing; `#general` and no fragment stay.
+ */
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+import { act, fireEvent, render, screen, waitFor, 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,
+        );
+      };
+    },
+  };
+});
+
+const mockHeaders = jest.fn();
+const mockCookieSet = jest.fn();
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: (...args: unknown[]) => mockHeaders(...args),
+  cookies: jest.fn().mockImplementation(async () => ({
+    toString: () => "session=abc",
+    set: (...args: unknown[]) => mockCookieSet(...args),
+  })),
+}));
+
+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 mockPieces = jest.fn();
+const mockUpdateProfile = jest.fn();
+const mockRequestDeletion = jest.fn();
+const mockHubMe = jest.fn();
+const mockLeadsSubmit = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistSignups: { me: jest.fn() },
+  flowCheckouts: { me: jest.fn() },
+  subscription: { me: jest.fn(), portalSession: jest.fn() },
+  leads: { submit: (...args: unknown[]) => mockLeadsSubmit(...args) },
+  member: {
+    pieces: (...args: unknown[]) => mockPieces(...args),
+    updateProfile: (...args: unknown[]) => mockUpdateProfile(...args),
+    requestDeletion: (...args: unknown[]) => mockRequestDeletion(...args),
+  },
+  hubSignIn: { me: (...args: unknown[]) => mockHubMe(...args) },
+  visitorForwardHeaders: () => null,
+}));
+
+const mockUpdateUser = jest.fn();
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({
+    signOut: jest.fn(),
+    updateUser: (...args: unknown[]) => mockUpdateUser(...args),
+  }),
+}));
+
+const mockRefresh = jest.fn();
+const mockReplace = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: jest.fn(), refresh: mockRefresh, replace: mockReplace }),
+  usePathname: () => "/account/general",
+  redirect: jest.fn(),
+}));
+
+// The colour-mode cases test the theme's modes, so they run against an unpinned
+// chrome, as settings.test.tsx did (theme-modes.test.ts covers the pin).
+// eslint-disable-next-line no-restricted-syntax -- #507: `site-chrome.ts` is a generated data module with no external boundary to mock instead (as theme-modes.test.ts).
+jest.mock("../../../../../lib/site-chrome", () => {
+  const actual = jest.requireActual("../../../../../lib/site-chrome");
+  const { colorMode, ...unpinned } = actual.siteChrome;
+  return { ...actual, siteChrome: unpinned };
+});
+
+import type { AccountSettingsSection } from "@working-theory/templates/account";
+
+import { accountSettingsSections } from "../../../../../lib/account-config";
+import { seal } from "../../../../../lib/hub-session/seal";
+import { BillingAnchor } from "../general/billing-anchor";
+import Page from "../general/page";
+import { requestAccountDeletion, saveProfile } from "../profile-actions";
+
+const PHOTO = "https://cdn.example.com/ada.png";
+const SESSION = {
+  user: {
+    id: "user_1",
+    name: "Ada Lovelace",
+    email: "ada@example.com",
+    emailVerified: true,
+    image: PHOTO,
+    createdAt: new Date("2026-09-01T00:00:00.000Z"),
+  },
+};
+const COOKIE_INIT = { headers: { cookie: "session=abc" } };
+const ok = <T,>(body: T) => ({ ok: true, body });
+const refusal = (status: number, code: string) => ({
+  ok: false,
+  status,
+  body: { ok: false, error: { code, message: code } },
+});
+
+// ── The site's theme and env ─────────────────────────────────────────────────
+
+let contentRoot: string;
+
+function writeSite(frontmatter: string): void {
+  writeFileSync(join(contentRoot, "_site.mdx"), `---\n${frontmatter}\n---\n`);
+}
+
+const ENV = process.env;
+const ENV_KEYS = [
+  "GOOGLE_CLIENT_ID",
+  "GOOGLE_CLIENT_SECRET",
+  "GITHUB_CLIENT_ID",
+  "GITHUB_CLIENT_SECRET",
+  "AUTH_EMAIL_SERVER",
+  "AUTH_EMAIL_FROM",
+  "AUTH_EMAIL_WEBHOOK_SECRET",
+  "BETTER_AUTH_URL",
+  "BETTER_AUTH_SECRET",
+  "AILK_HUB_SIGN_IN_URL",
+  "AILK_HUB_CLIENT_ID",
+  "AILK_HUB_CLIENT_SECRET",
+  "AILK_HUB_SESSION_SECRET",
+] as const;
+
+beforeEach(() => {
+  process.env = { ...ENV };
+  for (const key of ENV_KEYS) delete process.env[key];
+  contentRoot = mkdtempSync(join(tmpdir(), "ailk-general-"));
+  process.env.AILK_CONTENT_ROOT = contentRoot;
+  writeSite('siteName: "Test"');
+  mockHeaders.mockReset().mockResolvedValue(new Headers());
+  mockCookieSet.mockReset();
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockPieces.mockReset().mockResolvedValue(ok([]));
+  mockUpdateProfile.mockReset().mockResolvedValue(ok({ name: "Ada King", image: PHOTO }));
+  mockRequestDeletion.mockReset().mockResolvedValue(ok({ sentTo: "site-operator" }));
+  mockHubMe.mockReset();
+  mockLeadsSubmit.mockReset();
+  mockUpdateUser.mockReset().mockResolvedValue({ data: { status: true }, error: null });
+  mockRefresh.mockReset();
+  mockReplace.mockReset();
+});
+
+afterEach(() => {
+  rmSync(contentRoot, { recursive: true, force: true });
+  process.env = ENV;
+});
+
+async function renderPage(locale = "en"): Promise<void> {
+  render(await Page({ params: Promise.resolve({ locale }) }));
+}
+
+async function clickSave(): Promise<void> {
+  await act(async () => {
+    fireEvent.click(screen.getByTestId("account-general-save"));
+  });
+}
+
+// ── 1. The frame (AC-1, AC-4) ──────────────────────────────────────────────────
+
+describe("AC-1 — the frame (D2, D7)", () => {
+  it("renders in the settings frame: Back to the Inbox, and the four tabs with General current", async () => {
+    await renderPage();
+    expect(screen.getByTestId("account-settings")).toContainElement(
+      screen.getByRole("heading", { level: 1, name: "General" }),
+    );
+    expect(screen.getByTestId("account-settings-back")).toHaveAttribute("href", "/account");
+    expect(screen.getByTestId("account-settings-back")).toHaveTextContent("Back");
+    const rail = screen.getByRole("navigation", { name: "Settings" });
+    const links = within(rail).getAllByRole("link");
+    expect(links.map((link) => [link.textContent, link.getAttribute("href")])).toEqual([
+      ["General", "/account/general"],
+      ["Security", "/account/security"],
+      ["Notifications", "/account/notifications"],
+      ["Billing", "/account/billing"],
+    ]);
+    expect(links[0]).toHaveAttribute("aria-current", "page");
+    for (const link of links.slice(1)) expect(link).not.toHaveAttribute("aria-current");
+  });
+
+  it("a non-default locale prefixes Back and the rail", async () => {
+    await renderPage("fr");
+    expect(screen.getByTestId("account-settings-back")).toHaveAttribute("href", "/fr/account");
+    expect(screen.getByTestId("account-settings-rail-general")).toHaveAttribute("href", "/fr/account/general");
+    expect(screen.getByTestId("account-settings-rail-security")).toHaveAttribute("href", "/fr/account/security");
+    expect(screen.getByTestId("account-settings-rail-notifications")).toHaveAttribute(
+      "href",
+      "/fr/account/notifications",
+    );
+    expect(screen.getByTestId("account-settings-rail-billing")).toHaveAttribute("href", "/fr/account/billing");
+  });
+
+  it("renders no Security or Notifications content on General", async () => {
+    await renderPage();
+    expect(screen.queryByTestId("account-signin-method")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-cookie-settings")).not.toBeInTheDocument();
+    expect(screen.queryByText("Sign-in methods")).not.toBeInTheDocument();
+    for (const absent of [/credentials/i, /scope/i, /organizations/i, /credits/i]) {
+      expect(screen.queryByRole("heading", { name: absent })).not.toBeInTheDocument();
+    }
+  });
+
+  it("the pane holds the email read-only, the name and photo inputs, in order before the deletion block", async () => {
+    await renderPage();
+    const pane = screen.getByTestId("account-settings-general");
+    expect(within(pane).getByTestId("account-general-email")).toHaveTextContent("ada@example.com");
+    expect(within(pane).queryByRole("textbox", { name: "Email" })).not.toBeInTheDocument();
+    expect(within(pane).getByLabelText("Name")).toHaveValue("Ada Lovelace");
+    expect(within(pane).getByLabelText("Photo")).toHaveValue(PHOTO);
+    const form = within(pane).getByTestId("account-general-form");
+    const deletion = within(pane).getByTestId("account-deletion");
+    expect(form.compareDocumentPosition(deletion) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(within(deletion).getByTestId("account-deletion-request")).toHaveTextContent(
+      "Request account deletion",
+    );
+  });
+
+  it("the photo is never rendered as an image", async () => {
+    await renderPage();
+    expect(document.querySelector(`img[src="${PHOTO}"]`)).toBeNull();
+  });
+
+  it("a light-only theme renders no color-mode control", async () => {
+    writeSite('theme:\n  colors:\n    light:\n      bg: "#fdfcfa"\n      text: "#1c1917"');
+    await renderPage();
+    expect(screen.queryByTestId("account-color-mode")).not.toBeInTheDocument();
+  });
+
+  it("the color-mode control holds Light · Auto · Dark", async () => {
+    await renderPage();
+    const control = screen.getByTestId("account-color-mode");
+    expect(within(control).getAllByRole("radio").map((r) => r.textContent)).toEqual(["Light", "Auto", "Dark"]);
+  });
+
+  it("a contributed settings section renders after the deletion block (C8)", async () => {
+    const section: AccountSettingsSection = {
+      id: "extra",
+      title: "settings.general.title",
+      render: () => <p data-testid="extra-body">Extra</p>,
+    };
+    accountSettingsSections.push(section);
+    try {
+      await renderPage();
+      const deletion = screen.getByTestId("account-deletion");
+      const extra = screen.getByTestId("account-settings-extra");
+      expect(deletion.compareDocumentPosition(extra) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+      expect(screen.getByTestId("extra-body")).toBeInTheDocument();
+    } finally {
+      accountSettingsSections.splice(accountSettingsSections.indexOf(section), 1);
+    }
+  });
+});
+
+// ── 2. The profile form on the member path (AC-3) ─────────────────────────────
+
+describe("AC-3 — name and photo through the member API (D4, D8)", () => {
+  it("a changed name saves { name } with no image key, then refreshes", async () => {
+    await renderPage();
+    const save = screen.getByTestId("account-general-save");
+    expect(save).toBeDisabled();
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "  Ada King " } });
+    await clickSave();
+    expect(mockUpdateProfile).toHaveBeenCalledTimes(1);
+    expect(mockUpdateProfile).toHaveBeenCalledWith({ name: "Ada King" }, COOKIE_INIT);
+    await waitFor(() => expect(mockRefresh).toHaveBeenCalledTimes(1));
+    expect(screen.getByTestId("account-general-status")).toHaveTextContent("Saved.");
+    expect(mockUpdateUser).not.toHaveBeenCalled();
+  });
+
+  it("a typed photo sends { name, image }", async () => {
+    await renderPage();
+    const next = "https://cdn.example.com/new.png";
+    mockUpdateProfile.mockResolvedValue(ok({ name: "Ada Lovelace", image: next }));
+    fireEvent.change(screen.getByLabelText("Photo"), { target: { value: next } });
+    await clickSave();
+    expect(mockUpdateProfile).toHaveBeenCalledWith({ name: "Ada Lovelace", image: next }, COOKIE_INIT);
+  });
+
+  it("emptying a started photo sends image: null", async () => {
+    await renderPage();
+    mockUpdateProfile.mockResolvedValue(ok({ name: "Ada Lovelace", image: null }));
+    fireEvent.change(screen.getByLabelText("Photo"), { target: { value: "" } });
+    await clickSave();
+    expect(mockUpdateProfile).toHaveBeenCalledWith({ name: "Ada Lovelace", image: null }, COOKIE_INIT);
+  });
+
+  it("a refused photo says so plainly and both fields keep what was typed (AC-MAA-07)", async () => {
+    mockUpdateProfile.mockResolvedValue(refusal(400, "link_not_https"));
+    await renderPage();
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "Ada King" } });
+    fireEvent.change(screen.getByLabelText("Photo"), { target: { value: "http://cdn.example.com/a.png" } });
+    await clickSave();
+    expect(screen.getByRole("alert")).toHaveTextContent("Enter a link that starts with https://.");
+    expect(screen.getByLabelText("Name")).toHaveValue("Ada King");
+    expect(screen.getByLabelText("Photo")).toHaveValue("http://cdn.example.com/a.png");
+    expect(mockRefresh).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    [refusal(403, "email_unverified"), "Confirm your email address first, then try again."],
+    [refusal(404, "not_found"), "Profile changes aren't available on this site yet."],
+    [refusal(500, "internal"), "We couldn't save your changes. Try again."],
+  ])("a refusal shows its message and keeps the edit (%#)", async (answer, message) => {
+    mockUpdateProfile.mockResolvedValue(answer);
+    await renderPage();
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "Ada King" } });
+    await clickSave();
+    expect(screen.getByTestId("account-general-status")).toHaveTextContent(message);
+    expect(screen.getByLabelText("Name")).toHaveValue("Ada King");
+  });
+
+  it("a blank name calls nothing", async () => {
+    await renderPage();
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "   " } });
+    await clickSave();
+    expect(mockUpdateProfile).not.toHaveBeenCalled();
+    expect(screen.getByRole("alert")).toHaveTextContent("Enter your name.");
+  });
+
+  it("a 503 from the pieces read still offers the member writes", async () => {
+    mockPieces.mockResolvedValue(refusal(503, "tenant_unresolved"));
+    await renderPage();
+    expect(screen.getByLabelText("Photo")).toBeInTheDocument();
+    expect(screen.getByTestId("account-deletion-request")).toBeInTheDocument();
+  });
+});
+
+describe("AC-3 — saveProfile (D6)", () => {
+  it("calls member.updateProfile with forwardedCookieInit()'s init and answers the saved pair", async () => {
+    mockHeaders.mockResolvedValue(new Headers({ origin: "https://site.example.com" }));
+    await expect(saveProfile({ name: " Ada King ", image: " " })).resolves.toEqual({
+      ok: true,
+      name: "Ada King",
+      image: PHOTO,
+    });
+    expect(mockUpdateProfile).toHaveBeenCalledWith(
+      { name: "Ada King", image: null },
+      { headers: { cookie: "session=abc", origin: "https://site.example.com" } },
+    );
+  });
+
+  it.each([
+    [refusal(400, "link_not_https"), "photo"],
+    [refusal(400, "invalid_input"), "failed"],
+    [refusal(403, "email_unverified"), "unverified"],
+    [refusal(404, "not_found"), "unavailable"],
+    [refusal(503, "tenant_unresolved"), "unavailable"],
+    [refusal(500, "internal"), "failed"],
+  ])("maps %j to %s", async (answer, reason) => {
+    mockUpdateProfile.mockResolvedValue(answer);
+    await expect(saveProfile({ name: "Ada" })).resolves.toEqual({ ok: false, reason });
+  });
+
+  it("refuses an image that is neither a string nor null, rather than clearing the photo", async () => {
+    await expect(saveProfile({ name: "Ada", image: 42 as never })).resolves.toEqual({
+      ok: false,
+      reason: "photo",
+    });
+    expect(mockUpdateProfile).not.toHaveBeenCalled();
+    await expect(saveProfile(null as never)).resolves.toEqual({ ok: false, reason: "required" });
+  });
+
+  it("a throw is failed; a blank name is required with no call", async () => {
+    mockUpdateProfile.mockRejectedValue(new TypeError("fetch failed"));
+    await expect(saveProfile({ name: "Ada" })).resolves.toEqual({ ok: false, reason: "failed" });
+    mockUpdateProfile.mockClear();
+    await expect(saveProfile({ name: "  " })).resolves.toEqual({ ok: false, reason: "required" });
+    expect(mockUpdateProfile).not.toHaveBeenCalled();
+  });
+
+  it("re-seals the hub session once after a 200 (D11), and never after a refusal", async () => {
+    const secret = "s".repeat(43);
+    process.env.AILK_HUB_SIGN_IN_URL = "https://hub.example.com";
+    process.env.AILK_HUB_CLIENT_ID = "spoke_0001";
+    process.env.AILK_HUB_CLIENT_SECRET = `ailk_hcs_${"c".repeat(43)}`;
+    process.env.AILK_HUB_SESSION_SECRET = secret;
+    process.env.NEXT_PUBLIC_BASE_URL = "http://127.0.0.1:3100";
+    const user = { name: "Ada Lovelace", email: "ada@example.com", emailVerified: true, createdAt: "2026-09-01T00:00:00.000Z" };
+    const sealed = seal(
+      { v: 1, accessToken: `ailk_hst_${"t".repeat(43)}`, expiresAt: Date.now() + 60_000, user },
+      secret,
+      "session",
+      "ailk-hub-session",
+    );
+    mockHeaders.mockResolvedValue(new Headers({ cookie: `ailk-hub-session=${sealed}` }));
+    mockHubMe.mockResolvedValue(ok({ user: { ...user, name: "Ada King" }, billingCustomerId: null }));
+
+    await saveProfile({ name: "Ada King" });
+    expect(mockHubMe).toHaveBeenCalledTimes(1);
+    expect(mockCookieSet).toHaveBeenCalledTimes(1);
+
+    mockUpdateProfile.mockResolvedValue(refusal(403, "email_unverified"));
+    await saveProfile({ name: "Ada King" });
+    expect(mockHubMe).toHaveBeenCalledTimes(1);
+  });
+
+  it("re-seals nothing on a single site with no hub configuration", async () => {
+    await expect(saveProfile({ name: "Ada King" })).resolves.toMatchObject({ ok: true });
+    expect(mockHubMe).not.toHaveBeenCalled();
+    expect(mockCookieSet).not.toHaveBeenCalled();
+  });
+});
+
+// ── 3. No member API (C2, D3) ─────────────────────────────────────────────────
+
+describe("AC-3 — a single site with no member API (a 404 from the pieces read)", () => {
+  beforeEach(() => {
+    mockPieces.mockResolvedValue(refusal(404, "not_found"));
+  });
+
+  it("shows no photo field and saves the name through Better Auth, not the member API", async () => {
+    await renderPage();
+    expect(screen.queryByLabelText("Photo")).not.toBeInTheDocument();
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: " Grace Hopper " } });
+    await clickSave();
+    expect(mockUpdateUser).toHaveBeenCalledWith({ name: "Grace Hopper" });
+    expect(mockUpdateProfile).not.toHaveBeenCalled();
+    await waitFor(() => expect(mockRefresh).toHaveBeenCalledTimes(1));
+  });
+
+  it("a failed Better Auth save says so and keeps the edit", async () => {
+    mockUpdateUser.mockResolvedValue({ data: null, error: { message: "nope" } });
+    await renderPage();
+    fireEvent.change(screen.getByLabelText("Name"), { target: { value: "Ada King" } });
+    await clickSave();
+    expect(screen.getByTestId("account-general-status")).toHaveTextContent(
+      "We couldn't save your changes. Try again.",
+    );
+    expect(screen.getByLabelText("Name")).toHaveValue("Ada King");
+  });
+
+  it("points the deletion request at Support, with no Request button (C2, D5)", async () => {
+    await renderPage();
+    expect(screen.queryByTestId("account-deletion-request")).not.toBeInTheDocument();
+    expect(screen.getByTestId("account-deletion-support")).toHaveAttribute("href", "/account/support");
+    expect(screen.getByText("To ask for your account to be deleted, contact support.")).toBeInTheDocument();
+  });
+});
+
+// ── 4. The deletion request (AC-4) ────────────────────────────────────────────
+
+describe("AC-4 — Request account deletion through the member API (D5)", () => {
+  async function requestDeletion(): Promise<void> {
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("account-deletion-request"));
+    });
+  }
+
+  it.each([
+    ["site-operator", "Sent to the site operator."],
+    ["hub-operator", "Sent to the hub operator."],
+  ])("an answer naming %s shows %s — the answer picks the line", async (sentTo, line) => {
+    mockRequestDeletion.mockResolvedValue(ok({ sentTo }));
+    await renderPage();
+    await requestDeletion();
+    expect(mockRequestDeletion).toHaveBeenCalledWith({}, COOKIE_INIT);
+    await waitFor(() => expect(screen.getByRole("status")).toHaveTextContent(line));
+    expect(screen.queryByTestId("account-deletion-request")).not.toBeInTheDocument();
+    expect(mockLeadsSubmit).not.toHaveBeenCalled();
+  });
+
+  it("a refusal shows its line and keeps the button", async () => {
+    mockRequestDeletion.mockResolvedValue(refusal(403, "email_unverified"));
+    await renderPage();
+    await requestDeletion();
+    await waitFor(() =>
+      expect(screen.getByRole("alert")).toHaveTextContent("Confirm your email address first, then ask again."),
+    );
+    expect(screen.getByTestId("account-deletion-request")).toBeEnabled();
+  });
+
+  it.each([
+    [refusal(403, "email_unverified"), "unverified"],
+    [refusal(404, "not_found"), "unavailable"],
+    [refusal(503, "not_configured"), "unavailable"],
+    [refusal(503, "delivery_failed"), "unavailable"],
+    [refusal(500, "internal"), "failed"],
+  ])("requestAccountDeletion maps %j to %s", async (answer, reason) => {
+    mockRequestDeletion.mockResolvedValue(answer);
+    await expect(requestAccountDeletion()).resolves.toEqual({ ok: false, reason });
+    expect(mockRequestDeletion).toHaveBeenCalledWith({}, COOKIE_INIT);
+  });
+
+  it("requestAccountDeletion answers who it went to, and a throw is failed", async () => {
+    mockRequestDeletion.mockResolvedValue(ok({ sentTo: "hub-operator" }));
+    await expect(requestAccountDeletion()).resolves.toEqual({ ok: true, sentTo: "hub-operator" });
+    mockRequestDeletion.mockRejectedValue(new TypeError("fetch failed"));
+    await expect(requestAccountDeletion()).resolves.toEqual({ ok: false, reason: "failed" });
+  });
+});
+
+// ── 5. #billing (AC-6) ────────────────────────────────────────────────────────
+
+describe("AC-6 — BillingAnchor forwards #billing to Billing (D8)", () => {
+  afterEach(() => {
+    window.location.hash = "";
+  });
+
+  it("#billing replaces the route with /account/billing, once", () => {
+    window.location.hash = "#billing";
+    render(<BillingAnchor locale="en" />);
+    expect(mockReplace).toHaveBeenCalledTimes(1);
+    expect(mockReplace).toHaveBeenCalledWith("/account/billing");
+  });
+
+  it("keeps the locale", () => {
+    window.location.hash = "#billing";
+    render(<BillingAnchor locale="fr" />);
+    expect(mockReplace).toHaveBeenCalledWith("/fr/account/billing");
+  });
+
+  it.each(["#general", ""])("%j stays on General", (hash) => {
+    window.location.hash = hash;
+    render(<BillingAnchor locale="en" />);
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+
+  it("General carries the anchor", async () => {
+    window.location.hash = "#billing";
+    await renderPage();
+    expect(mockReplace).toHaveBeenCalledWith("/account/billing");
+  });
+});