@tribe-nest/forge 3.42.1 → 3.50.0

package/src/ui/styled/members/_tests/MemberCallsCalendar.spec.tsx

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import type { MyMembershipCall } from "../../../../data/queries/useMembershipCalls";
+
+/** The calendar reads its grid from this headless hook; mock it so the test is
+ * about the CALENDAR (grid, modal, actions), not the query stack. */
+const calls: MyMembershipCall[] = [];
+vi.mock("../../../headless/memberHome/useMemberCalls", () => ({
+  useMemberCalls: () => ({
+    isLoading: false,
+    error: null,
+    monthLabel: "March 2026",
+    isCurrentMonth: true,
+    goToPreviousMonth: () => {},
+    goToNextMonth: () => {},
+    goToToday: () => {},
+    calls,
+    days: [
+      {
+        key: "2026-03-10",
+        date: new Date("2026-03-10T12:00:00Z"),
+        isToday: true,
+        inMonth: true,
+        calls,
+      },
+    ],
+  }),
+}));
+
+import { MemberCallsCalendar } from "../MemberCallsCalendar";
+
+const call = (over: Partial<MyMembershipCall> = {}): MyMembershipCall => ({
+  id: "call-1",
+  title: "Weekly Q&A",
+  description: "Bring your questions.",
+  startsAt: "2026-03-10T17:00:00.000Z",
+  endsAt: "2026-03-10T18:00:00.000Z",
+  timezone: "America/New_York",
+  participation: "open",
+  role: "attendee",
+  audiences: [{ id: "a1", audienceType: "all_members", audienceId: null, label: "All members" }],
+  opensAt: "2026-03-10T16:45:00.000Z",
+  closesAt: "2026-03-10T20:00:00.000Z",
+  isOpen: false,
+  callPublicId: "pub-1",
+  recording: null,
+  ...over,
+});
+
+const mount = (navigate = vi.fn()) =>
+  render(
+    <ForgeThemeProvider theme={{ colors: { text: "#111", background: "#fff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+      <MemberCallsCalendar navigate={navigate} now={new Date("2026-03-10T12:00:00Z")} />
+    </ForgeThemeProvider>,
+  );
+
+afterEach(() => {
+  calls.length = 0;
+  cleanup();
+});
+
+describe("MemberCallsCalendar", () => {
+  it("shows NO chronological list under the grid: the calendar is the surface", () => {
+    calls.push(call());
+    const { queryByText, getAllByText } = mount();
+    // The old list row carried the description as body text and a "Join"/status
+    // cluster inline. With the list gone, none of that renders until an event
+    // is clicked. The title shows (grid on desktop, agenda on mobile - both
+    // are in the DOM under test), the description does not.
+    expect(queryByText("Bring your questions.")).toBeNull();
+    expect(getAllByText("Weekly Q&A").length).toBeGreaterThan(0);
+  });
+
+  it("renders BOTH faces so a phone is not stuck with the grid: a titled grid cell and an agenda row", () => {
+    calls.push(call());
+    const { getByTitle, getAllByText } = mount();
+    // The grid cell carries a title attribute; the agenda row does not, so the
+    // title text appears twice (one per face) but only one is titled.
+    expect(getByTitle("Weekly Q&A")).toBeTruthy();
+    expect(getAllByText("Weekly Q&A").length).toBe(2);
+  });
+
+  it("opens a details modal when an event is clicked, Google-Calendar style", () => {
+    calls.push(call({ isOpen: true }));
+    const navigate = vi.fn();
+    const { getByTitle, getByText, getByRole } = mount(navigate);
+
+    fireEvent.click(getByTitle("Weekly Q&A"));
+
+    const dialog = getByRole("dialog");
+    expect(dialog).toBeTruthy();
+    // The details the list used to show now live in the modal.
+    expect(dialog.textContent).toContain("Bring your questions.");
+    expect(dialog.textContent).toContain("All members");
+    // Recording, transcript and chat are the modal's remit; the two future
+    // ones are present as clearly-labelled placeholders.
+    expect(dialog.textContent).toContain("Transcript");
+    expect(dialog.textContent).toContain("Chat history");
+    expect(dialog.textContent).toContain("Coming soon");
+
+    // The call is open, so Join is offered and routes to the call page.
+    fireEvent.click(getByText("Join call"));
+    expect(navigate).toHaveBeenCalledWith("/i/video-calls/pub-1");
+  });
+
+  it("offers Watch in the modal when the recording is ready, and no Join once closed", () => {
+    calls.push(
+      call({
+        isOpen: false,
+        closesAt: "2026-03-09T20:00:00.000Z",
+        recording: { id: "r1", status: "ready", durationSeconds: 1800, watchUrl: "https://cdn.test/rec.mp4" },
+      }),
+    );
+    const { getByTitle, getByText, getByRole, queryByText } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+    const dialog = getByRole("dialog");
+
+    expect(queryByText("Join call")).toBeNull();
+    const watch = getByText(/Watch recording/);
+    expect(watch.getAttribute("href")).toBe("https://cdn.test/rec.mp4");
+    expect(dialog.textContent).toContain("30 min");
+  });
+
+  it("closes on the backdrop", () => {
+    calls.push(call());
+    const { getByTitle, getByRole, queryByRole } = mount();
+    fireEvent.click(getByTitle("Weekly Q&A"));
+    const dialog = getByRole("dialog");
+    fireEvent.click(dialog);
+    expect(queryByRole("dialog")).toBeNull();
+  });
+});

package/src/ui/styled/members/index.ts

@@ -5,3 +5,4 @@ export { MemberPostsFeed, type MemberPostsFeedProps } from "./MemberPostsFeed";
 export { MemberPostCard, type MemberPostCardProps } from "./MemberPostCard";
 export { PostCollectionsGrid, type PostCollectionsGridProps } from "./PostCollectionsGrid";
 export { PostCollectionDetail, type PostCollectionDetailProps } from "./PostCollectionDetail";
+export { MemberCallsCalendar, type MemberCallsCalendarProps } from "./MemberCallsCalendar";