@tribe-nest/forge 3.31.0 → 3.35.0

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

@@ -0,0 +1,194 @@
+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 type { MyBooking } from "../../../data/queries/useMyBookings";
+import { AccountDashboard } from "../AccountDashboard";
+
+/**
+ * The account page's way INTO a coaching video call.
+ *
+ * The room, the hooks, the credential endpoint and `BookingCallProvider` all
+ * shipped, and on a code website none of it was reachable: the row for a
+ * video session printed "Video call on this site" and offered nothing to
+ * press, while admin's help text told coaches the client joins "from their
+ * account on your site". This pins the control the row now draws.
+ *
+ * Rendered through `react-dom/server`: no DOM, no effects, so the bookings
+ * query is SEEDED into the react-query cache. That keeps the real
+ * `useMyBookings` in the path, and a rename of its query key fails here. The
+ * call itself is behind a click and a `React.lazy`, so nothing here ever
+ * touches the media SDK: the spec is about the CONTROL, and it proves the SDK
+ * is not needed to decide whether to draw it.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+
+const member = {
+  id: ACCOUNT_ID,
+  email: "client@example.com",
+  firstName: "Client",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  membership: null,
+};
+
+const booking = (overrides: Partial<MyBooking> = {}): MyBooking => {
+  const start = new Date(Date.now() + 5 * MINUTE);
+  const end = new Date(start.getTime() + 60 * MINUTE);
+  return {
+    id: "booking-1",
+    status: "confirmed",
+    email: "client@example.com",
+    firstName: "Client",
+    lastName: "Person",
+    totalAmount: 40,
+    totalAmountInChargedCurrency: null,
+    currency: "USD",
+    chargedCurrency: null,
+    refundState: null,
+    refundedAmountCents: null,
+    selfCancelledAt: null,
+    cancellationOutcome: null,
+    createdAt: "2026-01-01T00:00:00.000Z",
+    coachingBookingSlotId: "slot-1",
+    // The call's address, written when the booking was confirmed. A real
+    // confirmed video booking always carries one.
+    videoCallId: "call-1",
+    sessionStartTime: start.toISOString(),
+    sessionEndTime: end.toISOString(),
+    coachingProductId: "product-1",
+    coachingProductSlug: "video-session",
+    coachingProductTitle: "Video session",
+    coachingProductTimezone: null,
+    coachingProductDurationMinutes: 60,
+    cancellation: {
+      policy: null,
+      cutoffHours: null,
+      terms: null,
+      description: null,
+      canCancel: false,
+      reason: null,
+      deadline: null,
+    },
+    location: { type: "video" } as MyBooking["location"],
+    canReschedule: false,
+    rescheduleReason: null,
+    calendarUrl: null,
+    calendarWebcalUrl: null,
+    ...overrides,
+  };
+};
+
+function render(rows: MyBooking[]): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  queryClient.setQueryData(["my-bookings", ACCOUNT_ID, PROFILE_ID, 1, 20], {
+    data: rows,
+    total: rows.length,
+    page: 1,
+    limit: 20,
+  });
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountDashboard tab="bookings" onNavigateMembership={() => {}} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("AccountDashboard: the way into a coaching video call", () => {
+  it("REGRESSION: offers Join for a video session whose room is open", () => {
+    // Starts in 5 minutes: inside the 15-minutes-early window.
+    const html = render([booking()]);
+
+    expect(html).toContain("Video session");
+    expect(html).toContain("Join video call");
+    // A LINK to the call's own page, at the same address the coach opens from
+    // the dashboard. It used to mount the room inline, between two rows of a
+    // list, which is not what a call looks like anywhere else.
+    expect(html).toContain('href="/i/video-calls/call-1"');
+    // The line still says where the session is; the control is in addition.
+    expect(html).toContain("Video call on this site");
+  });
+
+  it("draws no control for a session with no call address, but still says it is a video call", () => {
+    /**
+     * Only reachable for a booking confirmed before calls became addressable,
+     * since a confirmation now writes the record. A dead button would be worse
+     * than none, and the row above still names the session as a video call.
+     */
+    const html = render([booking({ videoCallId: null })]);
+
+    expect(html).toContain("Video call on this site");
+    expect(html).not.toContain("Join video call");
+  });
+
+  it("still says when the room opens even without a call address", () => {
+    // The window copy is about the SESSION, so it must not depend on whether a
+    // room record exists. This is the branch my first attempt broke.
+    const html = render([booking({ videoCallId: null, sessionStartTime: new Date(Date.now() + 6 * HOUR).toISOString() })]);
+
+    expect(html).toMatch(/opens|Opens/);
+  });
+
+  it("says when the room opens, rather than offering a Join that would 409", () => {
+    const start = new Date(Date.now() + 3 * 60 * MINUTE);
+    const html = render([
+      booking({
+        sessionStartTime: start.toISOString(),
+        sessionEndTime: new Date(start.getTime() + 60 * MINUTE).toISOString(),
+      }),
+    ]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).toContain("the room opens");
+  });
+
+  it("says the room has closed once the window is over", () => {
+    const start = new Date(Date.now() - 5 * 60 * MINUTE);
+    const html = render([
+      booking({
+        sessionStartTime: start.toISOString(),
+        sessionEndTime: new Date(start.getTime() + 60 * MINUTE).toISOString(),
+      }),
+    ]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).toContain("room has closed");
+  });
+
+  it("draws nothing for a session that is not a video call", () => {
+    const html = render([
+      booking({ location: { type: "online", url: "https://meet.example.com/x" } as MyBooking["location"] }),
+    ]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).not.toContain("the room opens");
+    expect(html).toContain("https://meet.example.com/x");
+  });
+
+  it("draws nothing for a cancelled session, whose room the server withholds", () => {
+    const html = render([booking({ status: "canceled", selfCancelledAt: "2026-01-02T00:00:00.000Z", location: null })]);
+
+    expect(html).not.toContain("Join video call");
+    expect(html).not.toContain("the room opens");
+  });
+});