@tribe-nest/forge 3.26.0 → 3.29.0

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");
+  });
+});