@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/_tests/BroadcastPassValidation.spec.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { BroadcastPassValidation } from "../broadcast/BroadcastPassValidation";
+import { EndedBroadcast } from "../broadcast/EndedBroadcast";
+import type { ILiveBroadcast } from "../../../types/models";
+
+/**
+ * The paywall in front of a live broadcast, and the screen that replaces it once
+ * the stream is over.
+ *
+ * Rendered through `react-dom/server`, which needs no DOM. Effects never fire
+ * under `renderToStaticMarkup`, so the props are the only data source and
+ * nothing reaches the network. Both components are presentational by design
+ * (their data hooks live one level up in `BroadcastWatch`), which is exactly
+ * what makes this possible.
+ *
+ * These are the REAL components a Forge code site renders, and the client app's
+ * copies are twins driven by the same `broadcastState` rules, so what is
+ * asserted here about WHAT IS SAID holds on both rendering stacks.
+ */
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function broadcast(overrides: Partial<ILiveBroadcast> = {}): ILiveBroadcast {
+  return {
+    id: "b1",
+    title: "Sunday Session",
+    createdAt: "2026-08-01T00:00:00.000Z",
+    updatedAt: "2026-08-01T00:00:00.000Z",
+    profileId: "p1",
+    streamTemplateId: "st1",
+    egressId: "e1",
+    events: [],
+    event: { id: "ev1", title: "Sunday Session", description: "", isPaid: true },
+    liveUrl: "https://cdn.example.com/secret-playlist.m3u8",
+    thumbnailUrl: "https://cdn.example.com/thumb.jpg",
+    ...overrides,
+  } as ILiveBroadcast;
+}
+
+const render = (node: React.ReactNode) =>
+  renderToStaticMarkup(<ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>);
+
+describe("BroadcastPassValidation", () => {
+  const gate = (props: Partial<React.ComponentProps<typeof BroadcastPassValidation>> = {}) =>
+    render(<BroadcastPassValidation broadcast={broadcast()} onValidate={() => {}} {...props} />);
+
+  it("REGRESSION: leaks NO playback url while the viewer is still outside the paywall", () => {
+    // The whole point of the gate. A page that renders the ticket box and the
+    // stream url in the same document has not gated anything: the url is two
+    // keystrokes away in the page source.
+    const html = gate();
+    expect(html).not.toContain("secret-playlist.m3u8");
+    expect(html).not.toContain("<video");
+  });
+
+  it("asks for the ticket id, and says what one looks like", () => {
+    const html = gate();
+    expect(html).toContain("Enter your ticket ID to join the broadcast (TN-XXXXXXX)");
+    expect(html).toContain('data-testid="broadcast-ticket-code"');
+    expect(html).toContain("Join Broadcast");
+  });
+
+  it("still shows the title and thumbnail, which are already public on the list", () => {
+    const html = gate();
+    expect(html).toContain("Sunday Session");
+    expect(html).toContain("thumb.jpg");
+  });
+
+  it("REGRESSION: keeps Join disabled until something is typed", () => {
+    // An enabled button on an empty box sends a blank code, which the server
+    // refuses, and the viewer reads the refusal as "my ticket is not valid".
+    expect(gate()).toContain("disabled");
+  });
+
+  it("says the code is in flight rather than leaving the button looking dead", () => {
+    const html = gate({ isValidating: true });
+    expect(html).toContain("Validating");
+    expect(html).toContain("disabled");
+  });
+
+  it("shows a refusal to the viewer, and names no other event", () => {
+    const html = gate({ error: "That ticket is not valid for this broadcast." });
+    expect(html).toContain("That ticket is not valid for this broadcast.");
+    expect(html).toContain('role="alert"');
+    expect(html).toContain('aria-invalid="true"');
+  });
+
+  it("offers a way to BUY when the caller supplies one, so the gate is not a dead end", () => {
+    const html = gate({ buyTickets: <div data-testid="buy">Buy tickets</div> });
+    expect(html).toContain("OR");
+    expect(html).toContain('data-testid="buy"');
+  });
+
+  it("shows no OR divider when there is nothing to buy", () => {
+    expect(gate()).not.toContain(">OR<");
+  });
+});
+
+describe("EndedBroadcast", () => {
+  const html = () => render(<EndedBroadcast broadcast={broadcast({ endedAt: "2026-08-18T11:00:00.000Z" })} />);
+
+  it("says the broadcast ended, over the thumbnail the viewer recognises", () => {
+    expect(html()).toContain("Broadcast Ended");
+    expect(html()).toContain("Sunday Session");
+  });
+
+  it("REGRESSION: keeps the two INSTRUCTIONS visible, not behind the ? ", () => {
+    // A host on a bad line drops and comes back. A viewer who is told nothing
+    // assumes the show is over and leaves, so what to DO stays on the page.
+    const markup = html();
+    expect(markup).toContain("keep refreshing this page");
+    expect(markup).toContain("Close the broadcast page");
+  });
+
+  it("puts the EXPLANATION behind the ?, per the house design law", () => {
+    const markup = html();
+    // The disclosure exists, named after what it explains rather than "help".
+    expect(markup).toContain('aria-label="Why did the broadcast end?"');
+    expect(markup).toContain('aria-expanded="false"');
+    // ...and its body is not on the page until it is opened.
+    expect(markup).not.toContain("unstable internet connection");
+  });
+});

package/src/ui/styled/_tests/MembershipCheckout.spec.tsx

@@ -0,0 +1,364 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, fireEvent, cleanup } from "@testing-library/react";
+import axios, { type AxiosAdapter, type InternalAxiosRequestConfig } from "axios";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { Currency, type MembershipTier, type PublicAuthUser } from "../../../types/models";
+import { MembershipCheckout } from "../MembershipCheckout";
+
+/**
+ * Membership signup, end to end, over the REAL query/mutation layer.
+ *
+ * The two things asserted hardest are the two that cost money:
+ *
+ *  1. **What is SENT.** Every request is captured off the axios adapter, so
+ *     `amount` is checked as a number on the wire rather than as a number in a
+ *     component's state. A pay-what-you-want box that renders "25" and posts 0
+ *     passes any assertion made on the screen alone, and that is exactly the
+ *     defect this file exists for.
+ *  2. **Which currency that number is in.** The fan's chosen display currency
+ *     converts the totals they READ and must never touch the figure they TYPE:
+ *     the tier rows and the API are both in the tenant's settlement currency.
+ *
+ * jsdom, because the amount box is seeded by an effect and the whole flow is
+ * clicks. The adapter is swapped rather than the modules mocked, so
+ * `useCreateSubscription`, `useGetMembershipTiers`, `PublicAuthProvider` and the
+ * hook all stay in the path: a rename of an endpoint or a payload field fails
+ * here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const tier = (overrides: Partial<MembershipTier> = {}): MembershipTier => ({
+  id: "tier-1",
+  name: "Inner Circle",
+  description: "The good stuff",
+  payWhatYouWant: false,
+  benefits: [],
+  ...overrides,
+});
+
+const member: PublicAuthUser = {
+  id: "account-1",
+  email: "fan@example.com",
+  firstName: "Fan",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+};
+
+/** Every request the component made, in order. */
+let sent: { method: string; url: string; body: Record<string, unknown> | null }[] = [];
+let realAdapter: AxiosAdapter | undefined;
+
+/**
+ * The tenant settles in USD; this visitor reads prices in NGN at 1500 to the
+ * dollar. Any figure that has been through the rate is instantly recognisable.
+ */
+const currencies = {
+  supportedCurrencies: [Currency.USD, Currency.NGN],
+  userCurrency: Currency.NGN,
+  exchangeRates: { [Currency.USD]: { [Currency.NGN]: 1500 } },
+};
+
+function installAdapter(tiers: MembershipTier[]) {
+  sent = [];
+  const adapter: AxiosAdapter = async (config: InternalAxiosRequestConfig) => {
+    const url = config.url ?? "";
+    const body = config.data ? (JSON.parse(config.data as string) as Record<string, unknown>) : null;
+    sent.push({ method: (config.method ?? "get").toLowerCase(), url, body });
+
+    const reply = (data: unknown) =>
+      Promise.resolve({ data, status: 200, statusText: "OK", headers: {}, config } as never);
+
+    if (url.includes("/public/membership-tiers")) return reply(tiers);
+    if (url.includes("/public/websites/site-config")) return reply({ currency: "USD" });
+    if (url.includes("/public/currencies")) return reply(currencies);
+    if (url.includes("/public/payments/subscriptions/free")) return reply({ membershipId: "m-1" });
+    if (url.includes("/public/payments/subscriptions")) {
+      return reply({ membershipId: "m-1", subscriptionId: "s-1", clientSecret: "pi_secret", requiresPayment: true });
+    }
+    return reply({});
+  };
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = adapter;
+}
+
+function mount(opts: { tiers: MembershipTier[]; user?: PublicAuthUser; initialTierId?: string }) {
+  installAdapter(opts.tiers);
+  // `"initialTierId" in opts` rather than `??`, so a test can ask for NO
+  // preselected tier (the grid) without the default quietly putting one back.
+  const initialTierId = "initialTierId" in opts ? opts.initialTierId : "tier-1";
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={
+            {
+              user: opts.user ?? member,
+              isInitialized: true,
+              isAuthenticated: true,
+              currencies,
+              userSelectedCurrency: Currency.NGN,
+            } as never
+          }
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <MembershipCheckout initialTierId={initialTierId} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const amountBox = () => screen.getByRole("spinbutton") as HTMLInputElement;
+const subscribeButton = () =>
+  screen.getByRole("button", { name: /Subscribe|Confirm change|Processing/i }) as HTMLButtonElement;
+const subscriptionPosts = () =>
+  sent.filter((r) => r.method === "post" && r.url.includes("/public/payments/subscriptions"));
+
+beforeEach(() => {
+  sent = [];
+});
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+describe("pay-what-you-want: the figure that is sent", () => {
+  it("REGRESSION: sends the tier's floor when the fan touches nothing, never 0", async () => {
+    // The defect: `customAmount` initialised to 0 and nothing seeded it from the
+    // tier, so the first press of Subscribe posted `amount: 0`. The server takes
+    // the amount as a positive number and refuses that outright, so a
+    // pay-what-you-want tier could not be bought at all.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    expect(amountBox().value).toBe("37500");
+
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({
+      amount: 25,
+      billingCycle: "month",
+      membershipTierId: "tier-1",
+      profileId: PROFILE_ID,
+    });
+  });
+
+  it("sends a generous figure, converted from what was typed", async () => {
+    // The fan types naira because that is what the page is priced in; the API
+    // is charged in the settlement currency.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "60000" } });
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    // 60,000 naira at 1500 to the dollar.
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 40 });
+  });
+
+  it("REGRESSION: switching to yearly re-seeds the box to the YEARLY floor and sends it", async () => {
+    // The floor belongs to the cycle. Carrying the monthly minimum onto a yearly
+    // subscription sells a whole year for a month's money.
+    mount({
+      tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 5, payWhatYouWantYearlyMinimum: 50 })],
+    });
+
+    await waitFor(() => expect(amountBox().value).toBe("7500"));
+    const [monthly, yearly] = screen.getAllByRole("radio") as HTMLInputElement[];
+    expect(monthly.checked).toBe(true);
+    fireEvent.click(yearly);
+    // 50 USD, shown in the currency the fan is reading.
+    expect(amountBox().value).toBe("75000");
+
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 50, billingCycle: "year" });
+  });
+
+  it("refuses a figure under the floor beside the field, and sends nothing", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "3" } });
+    fireEvent.click(subscribeButton());
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+
+  it("refuses a cleared box, which is the zero the server will not take", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "" } });
+    fireEvent.click(subscribeButton());
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+});
+
+describe("currency: what converts and what does not", () => {
+  it("prints the pay-what-you-want floor in the VISITOR's currency", async () => {
+    // The whole screen is priced in naira, so the box is too. Pricing a tier in
+    // one currency and asking for the amount in another makes a fan do the
+    // arithmetic to buy something, and they will get it wrong.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const label = await screen.findByText(/How much would you like to pay/i);
+    // 25 USD at 1500 to the dollar.
+    expect(label.textContent).toContain("₦37,500");
+    expect(label.textContent).not.toContain("$25");
+  });
+
+  it("seeds the box with the floor, in the currency the fan is reading", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    expect(input.value).toBe("37500");
+  });
+
+  it("🔴 REGRESSION: sends a WHOLE settlement unit, never a raw quotient", async () => {
+    // Every membership price column is an `integer`. A raw quotient reached
+    // `ProfilePaymentPrice.findOne({ amount })` and Postgres answered
+    // `invalid input syntax for type integer: "426.76681461249575"` - a 500 on
+    // the subscribe button, from a number the fan never saw.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    // 40,001 naira at 1500 is 26.667 dollars, which does not divide evenly.
+    fireEvent.change(input, { target: { value: "40001" } });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const sent = (subscriptionPosts()[0].body as { amount: number }).amount;
+    expect(Number.isInteger(sent)).toBe(true);
+    expect(sent).toBe(27);
+  });
+
+  it("🔴 REGRESSION: converts what the fan TYPES back to the settlement currency", async () => {
+    // The half that stops the disaster. The API charges in USD, so a fan typing
+    // 37,500 meaning naira must be billed 25 dollars and not 37,500 of them.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "75000" } });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    // 75,000 naira at 1500 to the dollar is 50 dollars.
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 50 });
+  });
+
+  it("converts the total the fan only reads", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    // 25 USD at 1500 to the dollar.
+    expect(await screen.findByText("₦37,500")).toBeTruthy();
+  });
+
+  it("sends the settlement figure even while the screen reads naira", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 10 });
+  });
+});
+
+describe("billing cycles a tier actually sells", () => {
+  it("REGRESSION: buys a YEARLY-ONLY tier as a paid subscription, not as a free one", async () => {
+    // The defect: the cycle defaulted to the literal "month", the tier had no
+    // monthly price, so it was read as free and activated through
+    // `/subscriptions/free`. The fan got the tier and the artist got nothing.
+    mount({ tiers: [tier({ priceYearly: 100 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const post = subscriptionPosts()[0];
+    expect(post.url).not.toContain("/free");
+    expect(post.body).toMatchObject({ amount: 100, billingCycle: "year" });
+  });
+
+  it("offers no cycle choice when the tier sells only one", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    expect(screen.queryByRole("radio")).toBeNull();
+  });
+
+  it("activates a genuinely free tier through the free endpoint, with no amount", async () => {
+    mount({ tiers: [tier({ name: "Free Circle" })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const post = subscriptionPosts()[0];
+    expect(post.url).toContain("/subscriptions/free");
+    expect(post.body).not.toHaveProperty("amount");
+  });
+});
+
+describe("the tier grid, when no tier was chosen up front", () => {
+  it("does not offer the tier the member is already on", async () => {
+    const onTier = { ...member, membership: { membershipTierId: "tier-1" } } as unknown as PublicAuthUser;
+    mount({
+      tiers: [tier({ id: "tier-1", name: "Inner Circle", priceMonthly: 10 }), tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })],
+      user: onTier,
+      initialTierId: undefined,
+    });
+
+    expect(await screen.findByText("Current plan")).toBeTruthy();
+    // One button per selectable tier: the current one offers a sentence instead.
+    expect(screen.getAllByRole("button", { name: "Select this tier" })).toHaveLength(1);
+  });
+
+  it("REGRESSION: advertises a yearly-only pay-what-you-want tier on its yearly floor", async () => {
+    // Reading the monthly minimum unconditionally printed "from ₦0/mo", which
+    // reads as free and is the opposite of what the tier costs.
+    mount({
+      tiers: [tier({ payWhatYouWant: true, payWhatYouWantYearlyMinimum: 60 })],
+      initialTierId: undefined,
+    });
+
+    const label = await screen.findByText(/Pay what you want from/i);
+    // 60 USD at 1500 to the dollar, advertised per year.
+    expect(label.textContent).toContain("₦90,000");
+    expect(label.textContent).toContain("/yr");
+  });
+
+  it("calls a change a change for a member with a live subscription", async () => {
+    const paying = {
+      ...member,
+      membership: { membershipTierId: "tier-1", status: "active", paymentProviderSubscriptionId: "sub_123" },
+    } as unknown as PublicAuthUser;
+    mount({ tiers: [tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })], user: paying, initialTierId: "tier-2" });
+
+    expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
+  });
+});

package/src/ui/styled/_tests/ResumeCart.spec.tsx

@@ -0,0 +1,183 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { ResumeLine } from "../../../data/queries/useCheckouts";
+import type { UseCartResumeResult } from "../../headless/checkout/useCartResume";
+import { ProductDeliveryType } from "../../../types/models";
+
+/**
+ * The page a cart-recovery link lands on, as a Forge code website draws it.
+ *
+ * `useCartResume` is stubbed at the module boundary: what the hook DECIDES is
+ * asserted in `headless/checkout/_tests`, and what is asserted here is the half
+ * that can only go wrong in the markup. A bucket the hook fills and the page
+ * never draws is invisible to every hook test, and it is the exact shape of the
+ * defect this page had: an add-on left out of the basket with nothing on screen
+ * saying so.
+ *
+ * `apps/client` draws the same state in Tailwind and has its own twin of this
+ * spec. Both must move together, so both assert the same sentences.
+ *
+ * Rendered through `react-dom/server`, so no DOM and no effects.
+ */
+
+const state = vi.hoisted(() => ({ current: null as UseCartResumeResult | null }));
+
+vi.mock("../../headless/checkout/useCartResume", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../headless/checkout/useCartResume")>()),
+  useCartResume: () => state.current,
+}));
+
+const { ResumeCart } = await import("../ResumeCart");
+
+const line = (overrides: Partial<ResumeLine> = {}): ResumeLine => ({
+  type: "product",
+  quantity: 1,
+  title: "Tour Tee",
+  coverImage: null,
+  price: 25,
+  unitPriceCents: 2500,
+  quotedUnitPriceCents: 2500,
+  priceChanged: false,
+  available: true,
+  unavailableReason: null,
+  productId: "prod-1",
+  productVariantId: "var-1",
+  deliveryType: ProductDeliveryType.Physical,
+  isGift: false,
+  ...overrides,
+});
+
+const result = (overrides: Partial<UseCartResumeResult> = {}): UseCartResumeResult => ({
+  status: "restored",
+  resumed: null,
+  restoredLines: [],
+  unavailableLines: [],
+  continueLines: [],
+  droppedLines: [],
+  repricedLines: [],
+  itemCount: 0,
+  subtotalCents: 0,
+  currency: "USD",
+  couponCode: null,
+  error: null,
+  restore: () => {},
+  ...overrides,
+});
+
+function render(resume: UseCartResumeResult): string {
+  state.current = resume;
+  return renderToStaticMarkup(
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ currencies: null, userSelectedCurrency: "USD" } as never}>
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <ResumeCart token="tok-1" formatAmount={(n) => `$${n.toFixed(2)}`} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("ResumeCart", () => {
+  it("REGRESSION: names the add-on that was left out, and why", () => {
+    // Silence here is the worst outcome the whole page exists to prevent: the
+    // buyer came back for the poster, the basket is one line lighter, and
+    // nothing says so.
+    const html = render(
+      result({
+        droppedLines: [line({ title: "Tour poster" })],
+        unavailableLines: [line({ title: "General Admission", available: false, unavailableReason: "sold_out" })],
+      }),
+    );
+
+    expect(html).toContain("Tour poster");
+    expect(html).toContain("Left out, because the ticket it goes with could not be put back");
+    expect(html).toContain("Sold only with its ticket");
+  });
+
+  it("keeps the left-out add-on apart from what the shop refused", () => {
+    // Two different sentences because the buyer's next move differs: a sold-out
+    // tier may free up, and the add-on is only waiting on that tier.
+    const html = render(
+      result({
+        droppedLines: [line({ title: "Tour poster" })],
+        unavailableLines: [line({ title: "Vinyl", available: false, unavailableReason: "removed" })],
+      }),
+    );
+
+    expect(html).toContain("No longer sold");
+    expect(html).toContain("Sold only with its ticket");
+    expect(html.indexOf("Could not be put back")).toBeLessThan(html.indexOf("Left out, because"));
+  });
+
+  it("says nothing about add-ons when none were left out", () => {
+    const html = render(result({ restoredLines: [line()], itemCount: 1, subtotalCents: 2500 }));
+    expect(html).not.toContain("Left out, because");
+  });
+
+  it("draws the restored lines with today's price and the total", () => {
+    const html = render(
+      result({ restoredLines: [line({ quantity: 2 })], itemCount: 2, subtotalCents: 5000 }),
+    );
+    expect(html).toContain("Tour Tee");
+    expect(html).toContain("2 item(s) are back in your basket.");
+    expect(html).toContain("Subtotal");
+    expect(html).toContain("$50.00");
+  });
+
+  it("shows the old price struck through when the shop re-priced a line", () => {
+    const html = render(
+      result({
+        restoredLines: [line({ priceChanged: true, quotedUnitPriceCents: 2000 })],
+        repricedLines: [line({ priceChanged: true })],
+        itemCount: 1,
+        subtotalCents: 2500,
+      }),
+    );
+    expect(html).toContain("line-through");
+    expect(html).toContain("$20.00");
+    expect(html).toContain("has changed since you were last here");
+  });
+
+  it("offers checkout only when something is actually in the basket", () => {
+    const empty = render(
+      result({
+        status: "empty",
+        unavailableLines: [line({ available: false, unavailableReason: "removed" })],
+      }),
+    );
+    expect(empty).not.toContain("Go to checkout");
+    expect(empty).toContain("That basket has moved on");
+
+    const full = render(result({ restoredLines: [line()], itemCount: 1, subtotalCents: 2500 }));
+    expect(full).toContain("Go to checkout");
+  });
+
+  it("links a course onward instead of pretending it is in the basket", () => {
+    const html = render(
+      result({
+        continueLines: [line({ type: "course", title: "Songwriting", courseSlug: "songwriting" })],
+      }),
+    );
+    expect(html).toContain("/i/courses/songwriting");
+    expect(html).toContain("Pick up where you left off");
+  });
+
+  it("repeats the code the buyer had, since checkout will ask for it again", () => {
+    const html = render(result({ couponCode: "SUMMER10", restoredLines: [line()], itemCount: 1 }));
+    expect(html).toContain("SUMMER10");
+  });
+
+  it("says the link is dead without hinting at what it might have been", () => {
+    const html = render(result({ status: "error", error: "invalid_link" }));
+    expect(html).toContain("This link no longer works");
+    expect(html).not.toContain("Subtotal");
+  });
+});