create-ailk 0.18.0 → 0.19.0

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

@@ -0,0 +1,288 @@
+/**
+ * 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("AC-5 — Billing as the current-plan card (D8)", () => {
+  it("(a) shows the plan, the status, the card and Manage in Stripe 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 in Stripe");
+    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 in Stripe (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();
+  });
+});