create-ailk 0.19.0 → 0.20.0

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

@@ -19,9 +19,16 @@
  *      tab to the page (PhoneTabProvider).
  *   5. The For-you items are the aside; none → no aside.
  *   6. No site chrome (Nav, Footer, ThemeToggle) inside the frame.
+ *   7. The four Settings pages render alone, inside the shell marker only —
+ *      no rail, no Inbox, no AppShell frame (#8430): the page draws its own
+ *      standalone settings frame, as the Admin's does. Membership is an
+ *      exact, locale-aware match on settings-frame.tsx's `SETTINGS_ROUTES`
+ *      (#8441): a sub-route of a settings path stays inside the shell.
+ *   8. One main landmark (#8441): every settings route and the Inbox, each
+ *      rendered through this layout with its real page, draw exactly one.
  */
 import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 
 jest.mock("next-intl/server", () => {
   const msgs: unknown = require("../../../../../messages/en.json");
@@ -65,13 +72,20 @@ const mockMemberNotFound = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   waitlistSignups: { me: jest.fn() },
-  subscription: { me: (...args: unknown[]) => mockSubscriptionMe(...args) },
+  flowCheckouts: { me: jest.fn() },
+  subscription: { me: (...args: unknown[]) => mockSubscriptionMe(...args), portalSession: jest.fn() },
+  leads: { submit: jest.fn() },
   member: {
     pieces: (...args: unknown[]) => mockMemberNotFound(...args),
     messages: (...args: unknown[]) => mockMemberNotFound(...args),
     purchases: (...args: unknown[]) => mockMemberNotFound(...args),
     appointments: (...args: unknown[]) => mockMemberNotFound(...args),
+    // #8441 — the Inbox page's New-menu availability reads, for § one main landmark.
+    meetingTypes: (...args: unknown[]) => mockMemberNotFound(...args),
+    requestForm: (...args: unknown[]) => mockMemberNotFound(...args),
   },
+  hubSignIn: { me: jest.fn() },
+  visitorForwardHeaders: () => null,
 }));
 
 const mockSignOut = jest.fn();
@@ -86,7 +100,8 @@ let mockPathname = "/account";
 let mockSearch = "";
 jest.mock("next/navigation", () => ({
   __esModule: true,
-  useRouter: () => ({ push: mockPush, refresh: mockRefresh }),
+  useRouter: () => ({ push: mockPush, refresh: mockRefresh, replace: jest.fn() }),
+  redirect: jest.fn(),
   usePathname: () => mockPathname,
   useSearchParams: () => new URLSearchParams(mockSearch),
 }));
@@ -94,6 +109,8 @@ jest.mock("next/navigation", () => ({
 import { usePhoneTab } from "@working-theory/templates/account";
 
 import AccountLayout from "../layout";
+import InboxPage from "../page";
+import { SETTINGS_ROUTES, type SettingsTabKey } from "../settings-frame";
 
 /** A page that shows the phone tab the frame hands it. */
 function PhoneTabProbe(): ReactElement {
@@ -128,16 +145,16 @@ function openByPointer(trigger: HTMLElement): void {
   fireEvent.pointerDown(trigger, { button: 0, ctrlKey: false, pointerType: "mouse" });
 }
 
-async function renderLayout(locale = "en"): Promise<void> {
-  const element = await AccountLayout({
-    children: (
-      <>
-        <p data-testid="account-child">page</p>
-        <PhoneTabProbe />
-      </>
-    ),
-    params: Promise.resolve({ locale }),
-  });
+async function renderLayout(
+  locale = "en",
+  children: ReactNode = (
+    <>
+      <p data-testid="account-child">page</p>
+      <PhoneTabProbe />
+    </>
+  ),
+): Promise<void> {
+  const element = await AccountLayout({ children, params: Promise.resolve({ locale }) });
   render(element);
 }
 
@@ -217,12 +234,11 @@ describe("the account rail (D13, AC-17)", () => {
 
   it.each([
     "/account/support",
-    // #8334 — the Settings pages (and the old path that redirects to General)
-    // select no row: Settings has no rail row to select.
-    "/account/general",
-    "/account/billing",
+    // #8334 — the old Settings path (it redirects to General) selects no
+    // row: Settings has no rail row to select. The four Settings pages render
+    // no rail at all (#8430, § the settings routes below).
     "/account/settings",
-    "/fr/account/billing",
+    "/fr/account/support",
   ])("no row is selected on %s (#8231 D1, #8334)", async (path) => {
     mockPathname = path;
     await renderLayout(path.startsWith("/fr/") ? "fr" : "en");
@@ -451,6 +467,96 @@ describe("no session", () => {
   });
 });
 
+describe("the settings routes take the screen (#8430)", () => {
+  it.each([
+    ["/account/general", "en"],
+    ["/account/security", "en"],
+    ["/account/notifications", "en"],
+    ["/account/privacy", "en"],
+    ["/account/billing", "en"],
+    ["/fr/account/billing", "fr"],
+  ])("on %s the page renders alone — no rail, no Inbox, no AppShell frame", async (path, locale) => {
+    mockPathname = path;
+    await renderLayout(locale);
+    expect(screen.getByTestId("account-child")).toBeInTheDocument();
+    expect(screen.queryByTestId("dashboard-shell")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("sidebar-desktop")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("app-shell-aside")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "Inbox" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "Artifacts" })).not.toBeInTheDocument();
+  });
+
+  it("keeps the shell marker around the page, so the Admin's tokens still apply (#8337 D4)", async () => {
+    mockPathname = "/account/general";
+    await renderLayout();
+    const markers = document.querySelectorAll("[data-ailk-shell]");
+    expect(markers).toHaveLength(1);
+    const marker = markers[0] as HTMLElement;
+    expect(marker.getAttribute("data-ailk-shell")).toBe("account");
+    expect(Array.from(marker.classList)).toEqual(["contents"]);
+    expect(within(marker).getByTestId("account-child")).toBeInTheDocument();
+  });
+
+  it.each([
+    "/account",
+    "/account/artifacts",
+    "/account/support",
+    "/account/inbox/purchase/fc_1",
+    // #8441 — the match is exact: a sub-route of a settings path is not listed,
+    // so it stays inside the shell.
+    "/account/billing/history",
+    "/account/general/",
+    "/fr/account/security/sessions",
+  ])(
+    "%s still renders inside the frame",
+    async (path) => {
+      mockPathname = path;
+      await renderLayout(path.startsWith("/fr/") ? "fr" : "en");
+      expect(screen.getByTestId("dashboard-shell")).toBeInTheDocument();
+      expect(within(screen.getByTestId("sidebar-desktop")).getByRole("link", { name: "Inbox" })).toBeInTheDocument();
+    },
+  );
+});
+
+describe("one main landmark (#8441)", () => {
+  type Page = (props: { params: Promise<{ locale: string }> }) => Promise<ReactElement>;
+  // Keyed by the list's own type, so a tab added to `SETTINGS_ROUTES` without
+  // its page here fails to compile. Billing loads with `import()`:
+  // architecture.yaml bans a static import of a relative billing/ path
+  // (billing.test.tsx).
+  const PAGES: Record<SettingsTabKey, () => Promise<Page>> = {
+    general: async () => (await import("../general/page")).default,
+    security: async () => (await import("../security/page")).default,
+    notifications: async () => (await import("../notifications/page")).default,
+    privacy: async () => (await import("../privacy/page")).default,
+    billing: async () => (await import("../billing/page")).default,
+  };
+
+  async function renderRoute(path: string, locale: string, page: Page): Promise<void> {
+    mockPathname = path;
+    await renderLayout(locale, await page({ params: Promise.resolve({ locale }) }));
+  }
+
+  it.each(SETTINGS_ROUTES.flatMap(({ key, path }) => [
+    [path, "en", key] as const,
+    [`/fr${path}`, "fr", key] as const,
+  ]))("%s draws exactly one <main>", async (path, locale, key) => {
+    await renderRoute(path, locale, await PAGES[key]());
+    expect(screen.getAllByRole("main")).toHaveLength(1);
+    expect(document.querySelectorAll("main")).toHaveLength(1);
+  });
+
+  it.each([
+    ["/account", "en"],
+    ["/fr/account", "fr"],
+  ])("the Inbox, %s, draws exactly one <main>", async (path, locale) => {
+    await renderRoute(path, locale, InboxPage);
+    expect(screen.getByTestId("dashboard-shell")).toBeInTheDocument();
+    expect(screen.getAllByRole("main")).toHaveLength(1);
+    expect(document.querySelectorAll("main")).toHaveLength(1);
+  });
+});
+
 describe("the shell marker (#8337 D4, AC-6)", () => {
   it("with a session, exactly one [data-ailk-shell=\"account\"] wraps the shell", async () => {
     await renderLayout();

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

@@ -1,13 +1,15 @@
 /**
  * Tests for /[locale]/account/notifications — User settings › Notifications
- * (#8339 D8, NEW). Moved from general.test.tsx's "Privacy" cookie-settings
- * link (#8339 D12, C6) — notification preferences are a later unit's scope.
+ * (#8339 D8; #8438 D15, AC-8). Always renders (decision A): one
+ * `ConsentSwitchList` of the registry's `area: "communications"` purposes,
+ * or one empty line with none declared. The cookie-settings link moved to
+ * Privacy (#8438 D14) — this tab no longer renders it.
  */
 import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 
 jest.mock("next-intl/server", () => {
   const msgs: unknown = require("../../../../../messages/en.json");
@@ -29,13 +31,14 @@ jest.mock("next-intl/server", () => {
         );
       };
     },
+    getLocale: jest.fn().mockResolvedValue("en"),
   };
 });
 
 jest.mock("next/headers", () => ({
   __esModule: true,
   headers: jest.fn().mockResolvedValue(new Headers()),
-  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc", get: () => undefined }),
 }));
 
 const mockGetSession = jest.fn();
@@ -45,13 +48,19 @@ jest.mock("../../../../../auth", () => ({
   auth: { api: { getSession: (...args: unknown[]) => mockGetSession(...args) } },
 }));
 
+const mockConsents = jest.fn();
+const mockSetConsent = 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: jest.fn() },
-  member: { pieces: jest.fn().mockResolvedValue({ ok: true, body: [] }) },
+  member: {
+    pieces: jest.fn().mockResolvedValue({ ok: true, body: [] }),
+    consents: (...args: unknown[]) => mockConsents(...args),
+    setConsent: (...args: unknown[]) => mockSetConsent(...args),
+  },
   hubSignIn: { me: jest.fn() },
   visitorForwardHeaders: () => null,
 }));
@@ -75,6 +84,31 @@ const SESSION = {
   },
 };
 
+const ok = <T,>(body: T) => ({ ok: true, body });
+
+function communicationsPurpose(
+  overrides: Partial<{
+    id: string;
+    kind: "consent" | "preference";
+    effective: boolean;
+    state: { granted: boolean; at: string; source: string; policyVersion: number } | null;
+  }> = {},
+) {
+  return {
+    id: overrides.id ?? "marketing_email",
+    kind: overrides.kind ?? "consent",
+    area: "communications" as const,
+    required: false,
+    signUp: false,
+    description: "Product news and offers.",
+    statement: "Receive product news and offers by email.",
+    policyHref: "/privacy",
+    policyVersion: 1,
+    state: overrides.state === undefined ? null : overrides.state,
+    effective: overrides.effective ?? false,
+  };
+}
+
 let contentRoot: string;
 
 beforeEach(() => {
@@ -82,6 +116,8 @@ beforeEach(() => {
   process.env.AILK_CONTENT_ROOT = contentRoot;
   writeFileSync(join(contentRoot, "_site.mdx"), '---\nsiteName: "Test"\n---\n');
   mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockConsents.mockReset().mockResolvedValue(ok({ purposes: [] }));
+  mockSetConsent.mockReset();
 });
 
 afterEach(() => {
@@ -98,29 +134,91 @@ describe("the frame (D7, D8)", () => {
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Notifications");
     expect(screen.getByTestId("account-settings-back")).toHaveAttribute("href", "/account");
     expect(screen.getByTestId("account-settings-rail-notifications")).toHaveAttribute("aria-current", "page");
-    expect(screen.getByTestId("account-settings-rail-billing")).not.toHaveAttribute("aria-current");
+    expect(screen.getByTestId("account-settings-rail-privacy")).not.toHaveAttribute("aria-current");
   });
 });
 
-describe("cookie settings (D7, moved from general.test.tsx)", () => {
-  it("links to /privacy#cookie-settings", async () => {
+describe("the standalone shape (#8430)", () => {
+  it("takes the screen as the Admin's settings do: the rail column and the pane are the page's own landmarks", async () => {
     await renderPage();
-    expect(screen.getByTestId("account-cookie-settings")).toHaveAttribute(
-      "href",
-      "/privacy#cookie-settings",
+    const settings = screen.getByTestId("account-settings");
+    expect(settings).toHaveClass("min-h-screen");
+    const column = within(settings).getByRole("complementary");
+    expect(column.firstElementChild).toBe(screen.getByTestId("account-settings-back"));
+    expect(column).toContainElement(screen.getByTestId("account-settings-rail"));
+    expect(within(settings).getByRole("main")).toContainElement(
+      screen.getByRole("heading", { level: 1 }),
     );
   });
+});
 
-  it("a non-default locale prefixes the link", async () => {
-    await renderPage("fr");
-    expect(screen.getByTestId("account-cookie-settings")).toHaveAttribute(
-      "href",
-      "/fr/privacy#cookie-settings",
+describe("AC-8 — always present, one empty line with no communications purposes declared", () => {
+  it("renders exactly one account-notifications-empty line and no cookie link", async () => {
+    await renderPage();
+    expect(screen.getByTestId("account-notifications-empty")).toHaveTextContent(
+      "There's nothing to set here yet.",
     );
+    expect(screen.queryByTestId("account-cookie-settings")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-notifications")).not.toBeInTheDocument();
   });
 
-  it("renders no deletion button", async () => {
+  it("the tab link is present in the frame regardless", async () => {
+    await renderPage();
+    expect(screen.getByTestId("account-settings-rail-notifications")).toBeInTheDocument();
+  });
+});
+
+describe("AC-8 — a declared communications preference defaults on with no row", () => {
+  it("renders one switch, on", async () => {
+    mockConsents.mockResolvedValue(
+      ok({ purposes: [communicationsPurpose({ kind: "preference", effective: true, state: null })] }),
+    );
+    await renderPage();
+    expect(screen.queryByTestId("account-notifications-empty")).not.toBeInTheDocument();
+    expect(screen.getByTestId("account-notifications-marketing_email-switch")).toBeChecked();
+  });
+});
+
+describe("AC-8 — a declared communications consent defaults off with no row", () => {
+  it("renders one switch, off", async () => {
+    mockConsents.mockResolvedValue(
+      ok({ purposes: [communicationsPurpose({ kind: "consent", effective: false, state: null })] }),
+    );
+    await renderPage();
+    expect(screen.getByTestId("account-notifications-marketing_email-switch")).not.toBeChecked();
+  });
+
+  it("toggling calls setConsentAction through member.setConsent", async () => {
+    mockConsents.mockResolvedValue(
+      ok({ purposes: [communicationsPurpose({ kind: "consent", effective: false, state: null })] }),
+    );
+    mockSetConsent.mockResolvedValue(
+      ok({
+        purpose: communicationsPurpose({
+          kind: "consent",
+          effective: true,
+          state: { granted: true, at: "2026-10-12T12:00:00.000Z", source: "account_settings", policyVersion: 1 },
+        }),
+      }),
+    );
+    await renderPage();
+    fireEvent.click(screen.getByTestId("account-notifications-marketing_email-switch"));
+    await waitFor(() => expect(mockSetConsent).toHaveBeenCalledTimes(1));
+    expect(mockSetConsent).toHaveBeenCalledWith(
+      { purposeId: "marketing_email", granted: true, locale: "en" },
+      expect.objectContaining({ headers: expect.objectContaining({ cookie: "session=abc" }) }),
+    );
+    expect(await screen.findByTestId("account-notifications-marketing_email-date")).toHaveTextContent(
+      "Given Oct 12, 2026",
+    );
+  });
+});
+
+describe("a failed consents read", () => {
+  it("shows the unavailable line, not a broken switch list", async () => {
+    mockConsents.mockResolvedValue({ ok: false, status: 503, body: null });
     await renderPage();
-    expect(screen.queryByTestId("account-deletion-request")).not.toBeInTheDocument();
+    expect(screen.getByTestId("account-notifications-unavailable")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-notifications-empty")).not.toBeInTheDocument();
   });
 });