@tribe-nest/forge 3.4.0 → 3.9.0

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

@@ -0,0 +1,223 @@
+import { describe, it, expect } 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 { WalletPassButtons } from "../WalletPassButtons";
+import type { WalletPassStatus } from "../../../data/queries/useWalletPass";
+
+/**
+ * Events 2.3 — the one behaviour this component exists for: **when wallet
+ * passes are unavailable, the buyer sees NOTHING.**
+ *
+ * That is not a nicety. No signing credentials are configured in production, so
+ * the unavailable path is the ONLY one that runs today; if it leaked a greyed
+ * button, a "coming soon" or an error, every ticket-holder on the platform
+ * would be told about a feature they will never get.
+ *
+ * Rendered through `react-dom/server`, which needs no DOM — so these run in the
+ * package's existing node vitest environment with no jsdom project. Effects
+ * never fire under `renderToStaticMarkup`, so the seeded query cache is the
+ * only data source and nothing reaches the network.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+const PASS_ID = "TN-1001";
+
+/** Matches `walletPassKey` in `useWalletPass`. */
+const key = (passId: string) => ["wallet-pass", passId, ACCOUNT_ID, PROFILE_ID];
+
+const status = (overrides: Partial<WalletPassStatus> = {}): WalletPassStatus => ({
+  passId: PASS_ID,
+  available: true,
+  reason: null,
+  apple: { available: true, downloadUrl: `/public/events/passes/${PASS_ID}/wallet/apple?profileId=${PROFILE_ID}` },
+  google: { available: true, saveUrl: "https://pay.google.com/gp/v/save/a.b.c" },
+  ...overrides,
+});
+
+function render(
+  seed: Record<string, WalletPassStatus> | null,
+  props: { passId?: string; passIds?: string[] } = { passId: PASS_ID },
+  auth: { user?: { id: string } } = { user: { id: ACCOUNT_ID } },
+) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  for (const [passId, value] of Object.entries(seed ?? {})) {
+    queryClient.setQueryData(key(passId), value);
+  }
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider value={auth as never}>
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <WalletPassButtons {...props} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+/**
+ * Nothing at all — not an empty wrapper, not a hidden node, not a class name.
+ *
+ * `ForgeThemeProvider` emits its own `<style>` block of CSS variables, which is
+ * the harness rather than anything this component drew, so it is stripped
+ * first. What remains must be the empty string: an exact equality, not a
+ * "does not contain Wallet", because the point is that the component
+ * contributes NO node a curious buyer could find in the DOM.
+ */
+const rendersNothing = (html: string) => {
+  expect(html.replace(/<style>.*?<\/style>/gs, "")).toBe("");
+  expect(html).not.toContain("wallet");
+  expect(html).not.toContain("Wallet");
+};
+
+describe("WalletPassButtons — invisible when unavailable", () => {
+  it("renders NOTHING in the state production is in today (no signing credentials)", () => {
+    // The literal response the API gives right now, for every pass.
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          available: false,
+          reason: "not_configured",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("renders NOTHING for a pass on signed rotating QR", () => {
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          available: false,
+          reason: "rotating_qr",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("renders NOTHING for a cancelled or refunded order", () => {
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          available: false,
+          reason: "order_not_active",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("renders NOTHING before the API has answered — no spinner, no skeleton", () => {
+    // A placeholder where a button will never appear is the same tell as the
+    // button itself, so there is deliberately no loading state anywhere.
+    rendersNothing(render(null));
+  });
+
+  it("renders NOTHING for an anonymous visitor", () => {
+    // The query is disabled without an account id, so it never even asks.
+    rendersNothing(render({ [PASS_ID]: status() }, { passId: PASS_ID }, {}));
+  });
+
+  it("renders NOTHING when given no pass ids at all", () => {
+    // What `myTicketPassIds` yields for an order whose payload carries no
+    // passes — an older API build, or an order with nothing admitted yet.
+    rendersNothing(render({ [PASS_ID]: status() }, { passIds: [] }));
+  });
+
+  it("renders NOTHING for an id that is not a pass id, rather than requesting a certain 404", () => {
+    rendersNothing(render({ [PASS_ID]: status() }, { passId: "0f9c8b7a-1111-2222-3333-444455556666" }));
+  });
+
+  it("renders NOTHING when the API says available but both providers came back empty", () => {
+    rendersNothing(
+      render({
+        [PASS_ID]: status({
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      }),
+    );
+  });
+
+  it("hides an unavailable pass while still drawing an available sibling", () => {
+    // The per-pass gate, not an all-or-nothing one: a rotating-QR ticket in the
+    // same order must vanish without taking its neighbour with it.
+    const html = render(
+      {
+        "TN-1": status({ passId: "TN-1" }),
+        "TN-2": status({
+          passId: "TN-2",
+          available: false,
+          reason: "rotating_qr",
+          apple: { available: false, downloadUrl: null },
+          google: { available: false, saveUrl: null },
+        }),
+      },
+      { passIds: ["TN-1", "TN-2"] },
+    );
+
+    expect(html).toContain("TN-1");
+    expect(html).not.toContain("TN-2");
+  });
+});
+
+describe("WalletPassButtons — what appears once a provider is configured", () => {
+  it("draws both badges when both providers answer", () => {
+    const html = render({ [PASS_ID]: status() });
+
+    expect(html).toContain('data-testid="wallet-pass-buttons"');
+    expect(html).toContain("Add to Apple Wallet");
+    expect(html).toContain("Save to Google Wallet");
+    // The Google save link is the vendor's own URL, used verbatim.
+    expect(html).toContain("https://pay.google.com/gp/v/save/a.b.c");
+    expect(html).toContain('rel="noopener noreferrer"');
+  });
+
+  it("degrades to Apple alone when Google is not configured", () => {
+    // The two providers are approved independently, so this is a state that
+    // will really happen — not a theoretical one.
+    const html = render({ [PASS_ID]: status({ google: { available: false, saveUrl: null } }) });
+
+    expect(html).toContain("Add to Apple Wallet");
+    expect(html).not.toContain("Save to Google Wallet");
+  });
+
+  it("degrades to Google alone when Apple is not configured", () => {
+    const html = render({ [PASS_ID]: status({ apple: { available: false, downloadUrl: null } }) });
+
+    expect(html).toContain("Save to Google Wallet");
+    expect(html).not.toContain("Add to Apple Wallet");
+  });
+
+  it("fetches the .pkpass through the client rather than linking at the API", () => {
+    // A bearer-authenticated binary: an `<a href>` straight at the endpoint
+    // would carry no Authorization header and 401.
+    const html = render({ [PASS_ID]: status({ google: { available: false, saveUrl: null } }) });
+
+    expect(html).toContain("<button");
+    expect(html).not.toContain("wallet/apple");
+  });
+
+  it("draws every colour from the theme", () => {
+    const html = render({ [PASS_ID]: status() });
+
+    // The badge inverts the theme rather than hardcoding the vendors' black.
+    expect(html).toContain("background:#111111");
+    expect(html).toContain("color:#ffffff");
+    // The only fixed colours are inside the Google mark itself, which is a
+    // brandmark and not a styling choice.
+    expect(html).toContain("#4285F4");
+  });
+});