create-ailk 0.18.0 → 0.19.1

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

@@ -0,0 +1,146 @@
+/**
+ * The account layout hands the generated seam's sign-out wiring to the client
+ * frame (#8465): a client component cannot import `topology.generated.ts`, so
+ * the server layout reads `SIGN_OUT_ENDPOINT` / `SIGN_IN_PATH` and passes them
+ * as props — the signed-in Nav's own pattern. Also pins that the Help center
+ * href is rendered only for an https URL (the #8467 review's Low finding).
+ */
+import { render } from "@testing-library/react";
+import type { ReactElement } from "react";
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: async (arg: { namespace?: string }) => (key: string) =>
+    `${arg.namespace}.${key}`,
+}));
+
+let mockSeam: {
+  SIGN_IN_PATH: string | null;
+  SIGN_OUT_ENDPOINT: string | null;
+} = {
+  SIGN_IN_PATH: "/sign-in",
+  SIGN_OUT_ENDPOINT: null,
+};
+// eslint-disable-next-line no-restricted-syntax -- #507: the seam is generated per build (#7894 D8); its `signIn: "hub"` render is the boundary under test, and no env or HTTP surface selects it.
+jest.mock("../../../../../lib/topology.generated", () => ({
+  __esModule: true,
+  get SIGN_IN_PATH() {
+    return mockSeam.SIGN_IN_PATH;
+  },
+  get SIGN_OUT_ENDPOINT() {
+    return mockSeam.SIGN_OUT_ENDPOINT;
+  },
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- #507: test-seam mock; the layout under test composes these account modules and the suite asserts only the sign-out endpoint it forwards
+jest.mock("../account-data", () => ({
+  __esModule: true,
+  accountSession: async () => ({
+    ctx: { user: { name: "Ada", email: "ada@example.com" }, t: {} },
+  }),
+  loadForYou: async () => ({ items: [], now: "2026-10-12T00:00:00.000Z" }),
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- #507: test-seam mock; the layout under test composes these account modules and the suite asserts only the sign-out endpoint it forwards
+jest.mock("../for-you-labels", () => ({
+  __esModule: true,
+  forYouLabels: () => ({}),
+}));
+// eslint-disable-next-line no-restricted-syntax -- #507: test-seam mock; the layout under test composes these account modules and the suite asserts only the sign-out endpoint it forwards
+jest.mock("../../../../../lib/site-logo", () => ({
+  __esModule: true,
+  siteLogo: () => null,
+}));
+
+const mockFrame = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: test-seam mock; the layout under test composes these account modules and the suite asserts only the sign-out endpoint it forwards
+jest.mock("../account-frame", () => ({
+  __esModule: true,
+  AccountFrame: (props: Record<string, unknown>) => {
+    mockFrame(props);
+    return null;
+  },
+}));
+
+import AccountLayout from "../layout";
+
+const ENV = process.env;
+
+async function renderLayout(locale = "en"): Promise<Record<string, unknown>> {
+  const node = (await AccountLayout({
+    children: null,
+    params: Promise.resolve({ locale }),
+  })) as ReactElement;
+  render(node);
+  return mockFrame.mock.calls[0]![0] as Record<string, unknown>;
+}
+
+beforeEach(() => {
+  mockFrame.mockReset();
+  mockSeam = { SIGN_IN_PATH: "/sign-in", SIGN_OUT_ENDPOINT: null };
+  process.env = { ...ENV };
+  delete process.env.AILK_HELP_CENTER_URL;
+});
+
+afterEach(() => {
+  process.env = ENV;
+});
+
+describe("sign-out wiring (#8465)", () => {
+  it("passes the endpoint and the localized sign-in path on a hub sign-in spoke", async () => {
+    mockSeam = {
+      SIGN_IN_PATH: "/account",
+      SIGN_OUT_ENDPOINT: "/api/hub-session/sign-out",
+    };
+    const props = await renderLayout("fr");
+    expect(props.signOutEndpoint).toBe("/api/hub-session/sign-out");
+    expect(props.signInHref).toBe("/fr/account");
+  });
+
+  it("falls back to the home when the seam names no sign-in path", async () => {
+    mockSeam = {
+      SIGN_IN_PATH: null,
+      SIGN_OUT_ENDPOINT: "/api/hub-session/sign-out",
+    };
+    expect((await renderLayout()).signInHref).toBe("/");
+  });
+
+  it("passes neither on a hub or a single site (no endpoint)", async () => {
+    const props = await renderLayout();
+    expect(props).not.toHaveProperty("signOutEndpoint");
+    expect(props).not.toHaveProperty("signInHref");
+  });
+
+  it("carries the failed-sign-out label to the frame", async () => {
+    const props = await renderLayout();
+    expect((props.labels as Record<string, string>).signOutFailed).toBe(
+      "account.frame.signOutFailed",
+    );
+  });
+});
+
+describe("Help center href (#8467 review, Low)", () => {
+  const helpItems = (
+    props: Record<string, unknown>,
+  ): { id: string; href: string }[] =>
+    props.helpItems as { id: string; href: string }[];
+
+  it("renders an https URL", async () => {
+    process.env.AILK_HELP_CENTER_URL = "https://help.example.com";
+    expect(helpItems(await renderLayout()).map((i) => i.id)).toContain(
+      "help-center",
+    );
+  });
+
+  it.each([
+    "javascript:alert(1)",
+    "http://help.example.com",
+    "not a url",
+    "data:text/html,x",
+  ])("drops %s", async (value) => {
+    process.env.AILK_HELP_CENTER_URL = value;
+    expect(helpItems(await renderLayout()).map((i) => i.id)).not.toContain(
+      "help-center",
+    );
+  });
+});

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

@@ -1,12 +1,16 @@
 /**
  * Tests for the account layout — the base area's SignedInShell frame
- * (#7430, spec 7423 U4 · D13; the U4 half of AC-17).
+ * (#7430, spec 7423 U4 · D13; the U4 half of AC-17; #8231 D1).
  *
  * Covers:
- *   1. The rail: the site logo as the top tile (a link home), Inbox as its
- *      only row, a footer of the avatar and ? only.
+ *   1. The rail: the site logo as the top tile (a link home), then Inbox and
+ *      a Library group holding Artifacts — each selected on its own paths,
+ *      no row on a Settings page — and a footer of the avatar and ? only.
+ *      No Settings row (#8334: Settings lives in the avatar menu, as on the
+ *      Admin).
  *   2. The avatar opens the card menu (name, then Settings and Log out side
- *      by side); Log out signs out and routes home.
+ *      by side); Settings is the one route to /account/general; Log out
+ *      signs out and routes home.
  *   3. ? opens Contact support (→ /account/support) and, only when the site
  *      configures a help URL, Help center.
  *   4. Below md the tab bar reads avatar · Inbox · For you · Help, with no
@@ -15,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");
@@ -55,13 +66,26 @@ jest.mock("../../../../../auth", () => ({
   auth: { api: { getSession: (...args: unknown[]) => mockGetSession(...args) } },
 }));
 
-const mockCheckoutsMe = jest.fn();
 const mockSubscriptionMe = jest.fn();
+// #8231 D7 — the member reads call on every topology; here every one 404s.
+const mockMemberNotFound = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   waitlistSignups: { me: jest.fn() },
-  flowCheckouts: { me: (...args: unknown[]) => mockCheckoutsMe(...args) },
-  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();
@@ -76,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),
 }));
@@ -84,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 {
@@ -118,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);
 }
 
@@ -139,8 +166,8 @@ beforeEach(() => {
   mockSearch = "";
   delete process.env.AILK_HELP_CENTER_URL;
   mockGetSession.mockReset().mockResolvedValue(SESSION);
-  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: [] });
   mockSubscriptionMe.mockReset().mockResolvedValue(NO_SUBSCRIPTION);
+  mockMemberNotFound.mockReset().mockResolvedValue({ ok: false, status: 404, body: null });
   mockSignOut.mockReset().mockResolvedValue({ data: {}, error: null });
   mockPush.mockReset();
   mockRefresh.mockReset();
@@ -167,16 +194,68 @@ describe("the account rail (D13, AC-17)", () => {
     expect(within(rail).getByTestId("account-site-logo")).toHaveAttribute("href", "/fr/");
   });
 
-  it("Inbox is the rail's only row, selected on /account and on an item page", async () => {
-    await renderLayout();
-    const rail = screen.getByTestId("sidebar-desktop");
-    const links = within(rail)
+  /** The rail's rows, in DOM order — every link but the logo. */
+  function railRows(): HTMLElement[] {
+    return within(screen.getByTestId("sidebar-desktop"))
       .getAllByRole("link")
       .filter((link) => link.getAttribute("data-testid") !== "account-site-logo");
-    expect(links).toHaveLength(1);
-    expect(links[0]).toHaveTextContent("Inbox");
-    expect(links[0]).toHaveAttribute("href", "/account");
-    expect(links[0]).toHaveAttribute("aria-current", "page");
+  }
+
+  it("the rows are Inbox, then Artifacts under Library — no Settings row (#8231 D1, #8334)", async () => {
+    await renderLayout();
+    const rows = railRows();
+    expect(rows.map((row) => [row.textContent, row.getAttribute("href")])).toEqual([
+      ["Inbox", "/account"],
+      ["Artifacts", "/account/artifacts"],
+    ]);
+    expect(rows[0]).toHaveAttribute("aria-current", "page");
+    // Artifacts sits in the Library group.
+    const heading = screen.getByTestId("sidebar-group-heading-library");
+    expect(heading).toHaveTextContent("Library");
+    const library = heading.parentElement as HTMLElement;
+    expect(within(library).getByText("Artifacts")).toBeInTheDocument();
+    // #8334 — Settings is nowhere in the rail, at any viewport: not a row, not
+    // a tab. The avatar menu is its one route (the next describe).
+    expect(within(screen.getByTestId("sidebar-desktop")).queryByText("Settings")).not.toBeInTheDocument();
+    expect(within(screen.getByTestId("bottom-tab-bar")).queryByText("Settings")).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ["/account", "Inbox"],
+    ["/account/inbox/purchase/x", "Inbox"],
+    ["/account/artifacts", "Artifacts"],
+    ["/account/artifacts/p1", "Artifacts"],
+  ])("on %s only %s is selected (#8231 D1)", async (path, selected) => {
+    mockPathname = path;
+    await renderLayout();
+    const current = railRows().filter((row) => row.getAttribute("aria-current") === "page");
+    expect(current.map((row) => row.textContent)).toEqual([selected]);
+  });
+
+  it.each([
+    "/account/support",
+    // #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/support",
+  ])("no row is selected on %s (#8231 D1, #8334)", async (path) => {
+    mockPathname = path;
+    await renderLayout(path.startsWith("/fr/") ? "fr" : "en");
+    const rows = railRows();
+    expect(rows).toHaveLength(2);
+    expect(rows.some((row) => row.hasAttribute("aria-current"))).toBe(false);
+  });
+
+  it("a non-default locale prefixes every row (#8231 D1)", async () => {
+    mockPathname = "/fr/account/artifacts";
+    await renderLayout("fr");
+    const rows = railRows();
+    expect(rows.map((row) => row.getAttribute("href"))).toEqual([
+      "/fr/account",
+      "/fr/account/artifacts",
+    ]);
+    expect(rows[1]).toHaveAttribute("aria-current", "page");
   });
 
   it("an Inbox item page keeps Inbox selected", async () => {
@@ -215,11 +294,28 @@ describe("the avatar menu (D13)", () => {
     const actions = within(menu).getByTestId("account-menu-actions");
     expect(within(actions).getByText("Settings").closest("a")).toHaveAttribute(
       "href",
-      "/account/settings",
+      "/account/general",
     );
     expect(within(actions).getByTestId("account-menu-sign-out")).toHaveTextContent("Log out");
   });
 
+  it("Settings in the menu is the one route to General, locale-prefixed (#8334)", async () => {
+    mockPathname = "/fr/account";
+    await renderLayout("fr");
+    openByPointer(screen.getByTestId("sidebar-nav-user-trigger"));
+    const actions = within(screen.getByTestId("account-menu-content")).getByTestId(
+      "account-menu-actions",
+    );
+    expect(within(actions).getByText("Settings").closest("a")).toHaveAttribute(
+      "href",
+      "/fr/account/general",
+    );
+    // The rail offers no second Settings link.
+    expect(
+      within(screen.getByTestId("sidebar-desktop")).queryByRole("link", { name: "Settings" }),
+    ).not.toBeInTheDocument();
+  });
+
   it("Log out signs out, then routes home and refreshes", async () => {
     await renderLayout();
     openByPointer(screen.getByTestId("sidebar-nav-user-trigger"));
@@ -370,3 +466,110 @@ describe("no session", () => {
     expect(screen.queryByTestId("sidebar-desktop")).not.toBeInTheDocument();
   });
 });
+
+describe("the settings routes take the screen (#8430)", () => {
+  it.each([
+    ["/account/general", "en"],
+    ["/account/security", "en"],
+    ["/account/notifications", "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,
+    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();
+    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(marker.getAttribute("data-testid")).toBe("account-shell");
+    expect(Array.from(marker.classList)).toEqual(["contents"]);
+    expect(within(marker).getByTestId("dashboard-shell")).toBeInTheDocument();
+  });
+
+  it("with no session, no [data-ailk-shell] exists", async () => {
+    mockGetSession.mockResolvedValue(null);
+    await renderLayout();
+    expect(document.querySelector("[data-ailk-shell]")).not.toBeInTheDocument();
+  });
+});