create-ailk 0.11.1 → 0.11.3

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

@@ -0,0 +1,297 @@
+/**
+ * Tests for the account layout — the base area's SignedInShell frame
+ * (#7430, spec 7423 U4 · D13; the U4 half of AC-17).
+ *
+ * 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.
+ *   2. The avatar opens the card menu (name, then Settings and Log out side
+ *      by side); 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 · Help.
+ *   5. The For-you items are the aside; none → no aside.
+ *   6. No site chrome (Nav, Footer, ThemeToggle) inside the frame.
+ */
+import { 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,
+        );
+      };
+    },
+  };
+});
+
+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 mockCheckoutsMe = jest.fn();
+const mockSubscriptionMe = 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) },
+}));
+
+const mockSignOut = jest.fn();
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({ signOut: (...args: unknown[]) => mockSignOut(...args) }),
+}));
+
+const mockPush = jest.fn();
+const mockRefresh = jest.fn();
+let mockPathname = "/account";
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: mockPush, refresh: mockRefresh }),
+  usePathname: () => mockPathname,
+}));
+
+import AccountLayout from "../layout";
+
+const SESSION = {
+  user: {
+    id: "user_1",
+    name: "Ada Lovelace",
+    email: "ada@example.com",
+    emailVerified: true,
+    createdAt: new Date("2026-09-01T00:00:00.000Z"),
+  },
+};
+
+const NO_SUBSCRIPTION = {
+  ok: true,
+  body: { actionRequired: false, status: null, accessRevokesAt: null, portalAvailable: false },
+};
+
+// Pointer, not keyboard: Radix menus open on pointerdown. jsdom has no
+// PointerEvent; a MouseEvent stands in (the packages/ui jest-setup idiom).
+beforeAll(() => {
+  if (typeof globalThis.PointerEvent === "undefined") {
+    // eslint-disable-next-line no-restricted-syntax -- a MouseEvent stands in for jsdom's missing PointerEvent
+    globalThis.PointerEvent = MouseEvent as unknown as typeof PointerEvent;
+  }
+});
+
+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>,
+    params: Promise.resolve({ locale }),
+  });
+  render(element);
+}
+
+const ORIGINAL_HELP_URL = process.env.AILK_HELP_CENTER_URL;
+
+beforeEach(() => {
+  window.localStorage.clear();
+  mockPathname = "/account";
+  delete process.env.AILK_HELP_CENTER_URL;
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: [] });
+  mockSubscriptionMe.mockReset().mockResolvedValue(NO_SUBSCRIPTION);
+  mockSignOut.mockReset().mockResolvedValue({ data: {}, error: null });
+  mockPush.mockReset();
+  mockRefresh.mockReset();
+});
+
+afterAll(() => {
+  if (ORIGINAL_HELP_URL === undefined) delete process.env.AILK_HELP_CENTER_URL;
+  else process.env.AILK_HELP_CENTER_URL = ORIGINAL_HELP_URL;
+});
+
+describe("the account rail (D13, AC-17)", () => {
+  it("the top tile is the site logo — a link to the site home", async () => {
+    await renderLayout();
+    const rail = screen.getByTestId("sidebar-desktop");
+    const home = within(rail).getByTestId("account-site-logo");
+    expect(home).toHaveAttribute("href", "/");
+    expect(home).toHaveAccessibleName("Home");
+    expect(within(home).getByRole("img")).toBeInTheDocument();
+  });
+
+  it("a non-default locale's logo links to that locale's home", async () => {
+    await renderLayout("fr");
+    const rail = screen.getByTestId("sidebar-desktop");
+    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)
+      .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("an Inbox item page keeps Inbox selected", async () => {
+    mockPathname = "/account/inbox/purchase/fc_1";
+    await renderLayout();
+    const rail = screen.getByTestId("sidebar-desktop");
+    expect(within(rail).getByText("Inbox").closest("a")).toHaveAttribute("aria-current", "page");
+  });
+
+  it("the footer is the avatar and ? only — no name beside the avatar", async () => {
+    await renderLayout();
+    const footer = screen.getByTestId("signed-in-shell-rail-footer");
+    expect(within(footer).getAllByRole("button")).toHaveLength(2);
+    expect(screen.getByTestId("sidebar-nav-user-trigger")).not.toHaveTextContent("Ada Lovelace");
+    expect(within(footer).getByTestId("signed-in-shell-help-trigger")).toHaveAccessibleName("Help");
+  });
+
+  it("the page renders inside the frame, with no site chrome", async () => {
+    await renderLayout();
+    expect(screen.getByTestId("account-child")).toBeInTheDocument();
+    expect(document.querySelector('nav[aria-label="Primary"]')).not.toBeInTheDocument();
+    expect(document.querySelector(".ailk-footer")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("theme-toggle")).not.toBeInTheDocument();
+  });
+});
+
+describe("the avatar menu (D13)", () => {
+  it("opens the card menu: the name, then Settings and Log out side by side", async () => {
+    await renderLayout();
+    openByPointer(screen.getByTestId("sidebar-nav-user-trigger"));
+    const menu = screen.getByTestId("account-menu-content");
+    expect(menu).toHaveAttribute("data-layout", "card");
+    expect(within(menu).getByTestId("account-menu-user")).toHaveTextContent("Ada Lovelace");
+    // The base area knows no plan, so the plan line is absent.
+    expect(within(menu).queryByTestId("account-menu-plan")).not.toBeInTheDocument();
+    const actions = within(menu).getByTestId("account-menu-actions");
+    expect(within(actions).getByText("Settings").closest("a")).toHaveAttribute(
+      "href",
+      "/account/settings",
+    );
+    expect(within(actions).getByTestId("account-menu-sign-out")).toHaveTextContent("Log out");
+  });
+
+  it("Log out signs out, then routes home and refreshes", async () => {
+    await renderLayout();
+    openByPointer(screen.getByTestId("sidebar-nav-user-trigger"));
+    fireEvent.click(screen.getByTestId("account-menu-sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
+    expect(mockSignOut).toHaveBeenCalledTimes(1);
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it("a member with no name is shown by their email", async () => {
+    mockGetSession.mockResolvedValue({ user: { ...SESSION.user, name: "" } });
+    await renderLayout();
+    openByPointer(screen.getByTestId("sidebar-nav-user-trigger"));
+    expect(screen.getByTestId("account-menu-user")).toHaveTextContent("ada@example.com");
+  });
+});
+
+describe("the help menu (D13)", () => {
+  it("? opens Contact support alone when the site configures no help URL", async () => {
+    await renderLayout();
+    openByPointer(screen.getByTestId("signed-in-shell-help-trigger"));
+    const menu = screen.getByTestId("signed-in-shell-help-menu");
+    expect(within(menu).getAllByRole("link")).toHaveLength(1);
+    expect(within(menu).getByText("Contact support").closest("a")).toHaveAttribute(
+      "href",
+      "/account/support",
+    );
+  });
+
+  it("with a help URL configured, Help center follows Contact support", async () => {
+    process.env.AILK_HELP_CENTER_URL = "https://help.example.com";
+    await renderLayout();
+    openByPointer(screen.getByTestId("signed-in-shell-help-trigger"));
+    const menu = screen.getByTestId("signed-in-shell-help-menu");
+    const links = within(menu).getAllByRole("link");
+    expect(links.map((link) => link.textContent)).toEqual(["Contact support", "Help center"]);
+    expect(links[1]).toHaveAttribute("href", "https://help.example.com");
+  });
+});
+
+describe("the phone frame (D13)", () => {
+  it("the tab bar reads avatar · Inbox · Help, and Help opens the same menu", async () => {
+    await renderLayout();
+    const bar = screen.getByTestId("bottom-tab-bar");
+    const cells = Array.from(bar.children);
+    expect(cells).toHaveLength(3);
+    expect(cells[0]).toBe(screen.getByTestId("bottom-tab-bar-leading"));
+    expect(cells[1]).toHaveTextContent("Inbox");
+    expect(cells[1]).toHaveAttribute("aria-current", "page");
+    expect(cells[2]).toBe(screen.getByTestId("bottom-tab-bar-trailing"));
+    openByPointer(screen.getByTestId("frame-bottom-bar-help"));
+    expect(
+      within(screen.getByTestId("signed-in-shell-help-menu")).getByText("Contact support"),
+    ).toBeInTheDocument();
+  });
+
+  it("the phone top bar carries the site logo, linking home", async () => {
+    await renderLayout();
+    const logos = screen.getAllByTestId("account-site-logo");
+    // One in the rail, one in the phone top bar.
+    expect(logos).toHaveLength(2);
+    for (const logo of logos) expect(logo).toHaveAttribute("href", "/");
+  });
+});
+
+describe("the For-you aside (D3, D8a)", () => {
+  it("no items → no aside", async () => {
+    await renderLayout();
+    expect(screen.queryByTestId("app-shell-aside")).not.toBeInTheDocument();
+  });
+
+  it("items → the For-you panel is the aside", async () => {
+    mockGetSession.mockResolvedValue({ user: { ...SESSION.user, emailVerified: false } });
+    await renderLayout();
+    const panel = screen.getByTestId("app-shell-aside");
+    expect(within(panel).getByText("Email not verified")).toBeInTheDocument();
+  });
+
+  it("a member with no name sees 'Add your name' in the aside", async () => {
+    mockGetSession.mockResolvedValue({ user: { ...SESSION.user, name: null } });
+    await renderLayout();
+    const panel = screen.getByTestId("app-shell-aside");
+    expect(within(panel).getByText("Add your name")).toBeInTheDocument();
+  });
+});
+
+describe("no session", () => {
+  it("renders the page alone — the (authed) layout owns the gate", async () => {
+    mockGetSession.mockResolvedValue(null);
+    await renderLayout();
+    expect(screen.getByTestId("account-child")).toBeInTheDocument();
+    expect(screen.queryByTestId("sidebar-desktop")).not.toBeInTheDocument();
+  });
+});