create-ailk 0.18.0 → 0.19.1

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

@@ -0,0 +1,175 @@
+/**
+ * Log out in AccountFrame (#8465).
+ *
+ * A spoke that signs in through its hub holds its session in the sealed
+ * hub-session cookie, which only `POST /api/hub-session/sign-out` clears
+ * (and which also revokes the hub credential); Better Auth's `signOut()` hits
+ * a route that spoke does not serve. The server layout hands the seam's
+ * `SIGN_OUT_ENDPOINT` down as `signOutEndpoint`:
+ *
+ *   - with an endpoint, Log out POSTs it (same-origin), never calls Better
+ *     Auth, and lands on the sign-in page once the answer is 2xx;
+ *   - a refused or failed sign-out (403 on an Origin mismatch, 5xx, a
+ *     rejected fetch) stays on the page, shows the translated error, and
+ *     navigates nowhere — the cookie is still valid (#8467 review addendum);
+ *   - without an endpoint (a hub or a single site) it calls Better Auth and
+ *     routes home, as before.
+ */
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+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();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: mockPush, refresh: mockRefresh }),
+  usePathname: () => "/account",
+  useSearchParams: () => new URLSearchParams(""),
+}));
+
+jest.mock("@working-theory/templates/shells", () => ({
+  __esModule: true,
+  SignedInShell: ({
+    onSignOut,
+    children,
+  }: {
+    onSignOut: () => void;
+    children: ReactNode;
+  }) => (
+    <div>
+      <button type="button" data-testid="sign-out" onClick={onSignOut} />
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock("@working-theory/templates/account", () => ({
+  __esModule: true,
+  ForYouPanel: () => null,
+  PhoneTabProvider: ({ children }: { children: ReactNode }) => children,
+  useForYouDismissed: () => [new Set<string>(), jest.fn()],
+}));
+
+import { AccountFrame, type AccountFrameProps } from "../account-frame";
+
+const ENDPOINT = "/api/hub-session/sign-out";
+const FAILED = "We couldn't log you out. You're still signed in; try again.";
+const mockFetch = jest.fn();
+
+function renderFrame(extra: Partial<AccountFrameProps> = {}): void {
+  render(
+    <AccountFrame
+      locale="en"
+      user={{ name: "Ada", email: "ada@example.com" }}
+      logo={null}
+      helpItems={[]}
+      // eslint-disable-next-line no-restricted-syntax -- partial fixture: the suite exercises only the sign-out form, so the full forYou/labels shapes are not built
+      forYou={{ items: [] } as unknown as AccountFrameProps["forYou"]}
+      labels={
+        // eslint-disable-next-line no-restricted-syntax -- partial fixture (see forYou above)
+        {
+          home: "Home",
+          signOutFailed: FAILED,
+        } as unknown as AccountFrameProps["labels"]
+      }
+      {...extra}
+    >
+      <p>page</p>
+    </AccountFrame>,
+  );
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  globalThis.fetch = mockFetch.mockResolvedValue({ ok: true, status: 204 });
+});
+
+describe("AccountFrame Log out — a spoke that signs in through its hub", () => {
+  it("POSTs the hub sign-out endpoint, never Better Auth, then lands on the sign-in page and refreshes", async () => {
+    renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/account"));
+    expect(mockFetch).toHaveBeenCalledWith(ENDPOINT, {
+      method: "POST",
+      credentials: "same-origin",
+    });
+    expect(mockSignOut).not.toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+    expect(
+      screen.queryByTestId("account-sign-out-error"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("falls back to the site home when no sign-in href is given", async () => {
+    renderFrame({ signOutEndpoint: ENDPOINT });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
+  });
+
+  it.each([
+    ["a 403 (Origin mismatch)", { ok: false, status: 403 }],
+    ["a 500", { ok: false, status: 500 }],
+    ["a 404", { ok: false, status: 404 }],
+  ])(
+    "%s stays on the page with the error and routes nowhere",
+    async (_label, response) => {
+      mockFetch.mockResolvedValue(response);
+      renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+      fireEvent.click(screen.getByTestId("sign-out"));
+      expect(
+        await screen.findByTestId("account-sign-out-error"),
+      ).toHaveTextContent(FAILED);
+      expect(mockPush).not.toHaveBeenCalled();
+      expect(mockRefresh).not.toHaveBeenCalled();
+      expect(mockSignOut).not.toHaveBeenCalled();
+    },
+  );
+
+  it("a rejected request stays on the page with the error and routes nowhere", async () => {
+    mockFetch.mockRejectedValue(new TypeError("network down"));
+    renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    expect(
+      await screen.findByTestId("account-sign-out-error"),
+    ).toHaveTextContent(FAILED);
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(mockRefresh).not.toHaveBeenCalled();
+  });
+
+  it("a retry that succeeds clears the error and lands on the sign-in page", async () => {
+    mockFetch.mockResolvedValueOnce({ ok: false, status: 500 });
+    renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await screen.findByTestId("account-sign-out-error");
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/account"));
+    expect(
+      screen.queryByTestId("account-sign-out-error"),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe("AccountFrame Log out — a hub or a single site", () => {
+  it.each([
+    ["absent", {}],
+    ["null", { signOutEndpoint: null }],
+  ])(
+    "with the endpoint %s calls Better Auth, then routes home and refreshes",
+    async (_label, extra) => {
+      renderFrame(extra);
+      fireEvent.click(screen.getByTestId("sign-out"));
+      await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
+      expect(mockSignOut).toHaveBeenCalledTimes(1);
+      expect(mockFetch).not.toHaveBeenCalled();
+      expect(mockRefresh).toHaveBeenCalledTimes(1);
+    },
+  );
+});

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

@@ -0,0 +1,302 @@
+/**
+ * Tests for /[locale]/account/billing — User settings › Billing (#8232, spec
+ * docs/specs/8232-member-settings-account-general-and-spec.md D1, D9; AC-2).
+ * The single-site render: `subscription.me` is the mocked boundary.
+ *
+ * Covers:
+ *   (a) a subscription shows the plan, the status, the card and Manage in
+ *       Stripe; (b) no Manage without a portal; (c) `status: null` and each
+ *       of 401, 403 and 404 say plainly there is no subscription, with no
+ *       button; (d) a 500 or a throw shows the error row, never "no
+ *       subscription"; (e) a contributed billing section renders after every
+ *       one of these; (f) the read asks for `include: "billing"`.
+ *   #8217 AC-1 (spec docs/specs/8217-spoke-billing-spoke-checkout-reads-spec.md
+ *   D10, D11): `openBillingPortal()` mints the portal through
+ *   `billingPortalUrl()` — the hub's route, once, with the cookie init — and
+ *   redirects to it; a non-2xx or a throw redirects nowhere. The single site
+ *   never shows the unreadable line.
+ */
+import { render, screen, 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 mockSubscriptionMe = jest.fn();
+const mockPortalSession = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistSignups: { me: jest.fn() },
+  flowCheckouts: { me: jest.fn() },
+  subscription: {
+    me: (...args: unknown[]) => mockSubscriptionMe(...args),
+    portalSession: (...args: unknown[]) => mockPortalSession(...args),
+  },
+  leads: { submit: jest.fn() },
+  member: {},
+  hubSignIn: { me: jest.fn() },
+  visitorForwardHeaders: () => null,
+}));
+
+const mockRedirect = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() }),
+  usePathname: () => "/account/billing",
+  redirect: (...args: unknown[]) => mockRedirect(...args),
+}));
+
+import type { AccountBillingSection } from "@working-theory/templates/account";
+
+import { accountBillingSections } from "../../../../../lib/account-config";
+import { openBillingPortal } from "../actions";
+
+// The Billing route's own page, loaded with `import()`: architecture.yaml bans
+// a static import of a relative billing/ path to keep OSS code out of the
+// apps-paid/billing service's source, and this route directory shares the name.
+const loadPage = async () => (await import("../billing/page")).default;
+
+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 ACTIVE = {
+  actionRequired: false,
+  status: "active",
+  accessRevokesAt: null,
+  portalAvailable: true,
+  planName: "Pro",
+  paymentMethod: { brand: "visa", last4: "4242", expMonth: 4, expYear: 2027 },
+};
+
+const answer = (body: Record<string, unknown>) => ({ ok: true, body: { ...ACTIVE, ...body } });
+
+beforeEach(() => {
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockSubscriptionMe.mockReset().mockResolvedValue(answer({}));
+  mockPortalSession.mockReset();
+  mockRedirect.mockReset();
+});
+
+async function renderPage(locale = "en"): Promise<void> {
+  const Page = await loadPage();
+  render(await Page({ params: Promise.resolve({ locale }) }));
+}
+
+describe("the frame (D7)", () => {
+  it("renders in the settings frame with Billing current", async () => {
+    await renderPage();
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Billing");
+    expect(screen.getByTestId("account-settings-back")).toHaveAttribute("href", "/account");
+    expect(screen.getByTestId("account-settings-rail-billing")).toHaveAttribute("aria-current", "page");
+    expect(screen.getByTestId("account-settings-rail-general")).not.toHaveAttribute("aria-current");
+  });
+});
+
+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("AC-5 — Billing as the current-plan card (D8)", () => {
+  it("(a) shows the plan, the status, the card and Manage billing under the Current plan heading", async () => {
+    await renderPage();
+    expect(screen.getByText("Current plan")).toBeInTheDocument();
+    const card = screen.getByTestId("account-billing-card");
+    expect(within(card).getByTestId("account-billing-plan")).toHaveTextContent("Pro");
+    expect(within(card).getByTestId("account-billing-status")).toHaveTextContent("Active");
+    expect(within(card).getByTestId("account-billing-payment")).toHaveTextContent(
+      "visa ending in 4242, expires 04/2027",
+    );
+    expect(screen.getByTestId("account-billing-manage")).toHaveTextContent("Manage billing");
+    expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-unreadable")).not.toBeInTheDocument();
+  });
+
+  it("(a) no plan name reads as 'Your subscription', and no card as 'No card on file'", async () => {
+    mockSubscriptionMe.mockResolvedValue(
+      answer({ status: "past_due", planName: null, paymentMethod: null }),
+    );
+    await renderPage();
+    expect(screen.getByTestId("account-billing-plan")).toHaveTextContent("Your subscription");
+    expect(screen.getByTestId("account-billing-status")).toHaveTextContent("Payment due");
+    expect(screen.getByTestId("account-billing-payment")).toHaveTextContent("No card on file");
+  });
+
+  it("(a) an older API without the billing fields still renders the status", async () => {
+    mockSubscriptionMe.mockResolvedValue({
+      ok: true,
+      body: { actionRequired: false, status: "trialing", accessRevokesAt: null, portalAvailable: false },
+    });
+    await renderPage();
+    expect(screen.getByTestId("account-billing-status")).toHaveTextContent("Trial");
+    expect(screen.getByTestId("account-billing-payment")).toHaveTextContent("No card on file");
+  });
+
+  it("(a) appends when access ends, when set", async () => {
+    mockSubscriptionMe.mockResolvedValue(
+      answer({ status: "canceled", accessRevokesAt: "2026-10-20T00:00:00.000Z" }),
+    );
+    await renderPage();
+    const status = screen.getByTestId("account-billing-status");
+    expect(status).toHaveTextContent("Canceled");
+    expect(status).toHaveTextContent("Access ends");
+  });
+
+  it("(b) no portal, no Manage button", async () => {
+    mockSubscriptionMe.mockResolvedValue(answer({ portalAvailable: false }));
+    await renderPage();
+    expect(screen.getByTestId("account-billing-card")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-manage")).not.toBeInTheDocument();
+  });
+
+  it("(c) status: null renders the same card shape with the plain line and no button — even with a portal", async () => {
+    mockSubscriptionMe.mockResolvedValue(answer({ status: null, portalAvailable: true }));
+    await renderPage();
+    expect(screen.getByTestId("account-billing-none")).toHaveTextContent("You don't have a subscription.");
+    expect(screen.queryByTestId("account-billing-manage")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-plan")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-status")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-payment")).not.toBeInTheDocument();
+  });
+
+  it.each([401, 403, 404])("(c) a %i says there is no subscription, with no button", async (status) => {
+    mockSubscriptionMe.mockResolvedValue({ ok: false, status, body: {} });
+    await renderPage();
+    expect(screen.getByTestId("account-billing-none")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-manage")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("inbox-error")).not.toBeInTheDocument();
+  });
+
+  it("(g) through D6, the member card renders the shared CurrentPlanCard — exactly one card", async () => {
+    await renderPage();
+    expect(screen.getAllByTestId("account-billing-card")).toHaveLength(1);
+  });
+
+  it("(d) a 500 shows the error row with Retry, not 'no subscription'", async () => {
+    mockSubscriptionMe.mockResolvedValue({ ok: false, status: 500, body: {} });
+    await renderPage();
+    expect(screen.getByTestId("inbox-error")).toHaveTextContent("We couldn't load your billing details.");
+    expect(screen.getByTestId("inbox-retry")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
+  });
+
+  it("(d) a throw shows the error row, not 'no subscription'", async () => {
+    mockSubscriptionMe.mockRejectedValue(new TypeError("fetch failed"));
+    await renderPage();
+    expect(screen.getByTestId("inbox-error")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
+  });
+
+  it("(f) the read asks for the billing fields with the caller's cookie", async () => {
+    await renderPage();
+    expect(mockSubscriptionMe).toHaveBeenCalledWith(
+      { headers: { cookie: "session=abc" } },
+      { include: "billing" },
+    );
+  });
+});
+
+describe("AC-2 (e) — contributed billing sections render after the base content", () => {
+  const section: AccountBillingSection = {
+    id: "licence",
+    title: "settings.billing.title",
+    render: () => <p data-testid="licence-body">Licence</p>,
+  };
+
+  beforeAll(() => {
+    accountBillingSections.push(section);
+  });
+
+  afterAll(() => {
+    accountBillingSections.splice(accountBillingSections.indexOf(section), 1);
+  });
+
+  const states: [string, () => void, string][] = [
+    ["a subscription", () => undefined, "account-billing-card"],
+    ["no subscription", () => mockSubscriptionMe.mockResolvedValue(answer({ status: null })), "account-billing-card"],
+    ["a 404", () => mockSubscriptionMe.mockResolvedValue({ ok: false, status: 404, body: {} }), "account-billing-card"],
+    ["a failed read", () => mockSubscriptionMe.mockResolvedValue({ ok: false, status: 500, body: {} }), "inbox-error"],
+  ];
+
+  it.each(states)("after %s", async (_label, arrange, baseTestId) => {
+    arrange();
+    await renderPage();
+    const base = screen.getByTestId(baseTestId);
+    const contributed = screen.getByTestId("account-settings-licence");
+    expect(within(contributed).getByTestId("licence-body")).toBeInTheDocument();
+    expect(base.compareDocumentPosition(contributed) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
+describe("#8217 AC-1 — the single site's Manage billing (D10, D11)", () => {
+  const PORTAL_URL = "https://billing.stripe.com/p/session/test_single_site";
+
+  it("mints the portal once through the hub's route with the cookie init, then redirects there", async () => {
+    mockPortalSession.mockResolvedValue({ ok: true, body: { url: PORTAL_URL } });
+    await openBillingPortal();
+    expect(mockPortalSession).toHaveBeenCalledTimes(1);
+    expect(mockPortalSession).toHaveBeenCalledWith({ headers: { cookie: "session=abc" } });
+    expect(mockRedirect).toHaveBeenCalledTimes(1);
+    expect(mockRedirect).toHaveBeenCalledWith(PORTAL_URL);
+  });
+
+  it.each([
+    ["a non-2xx", () => mockPortalSession.mockResolvedValue({ ok: false, status: 404, body: {} }), "[openBillingPortal] status=404"],
+    ["a throw", () => mockPortalSession.mockRejectedValue(new TypeError("fetch failed")), "[openBillingPortal] errName=TypeError"],
+  ])("%s redirects nowhere and logs only a status or a name", async (_label, arrange, line) => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    arrange();
+    await openBillingPortal();
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(errorSpy.mock.calls.map((args) => args.join(" "))).toEqual([line]);
+    errorSpy.mockRestore();
+  });
+});