create-ailk 0.19.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

@@ -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,94 @@ describe("no session", () => {
   });
 });
 
+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();

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

@@ -7,7 +7,7 @@ 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 { render, screen, within } from "@testing-library/react";
 
 jest.mock("next-intl/server", () => {
   const msgs: unknown = require("../../../../../messages/en.json");
@@ -102,6 +102,20 @@ describe("the frame (D7, D8)", () => {
   });
 });
 
+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();
+    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 }),
+    );
+  });
+});
+
 describe("cookie settings (D7, moved from general.test.tsx)", () => {
   it("links to /privacy#cookie-settings", async () => {
     await renderPage();