@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/communities/_tests/CommunityClassroomCalendar.spec.tsx

@@ -0,0 +1,453 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { CommunityUpgradeOpenerProvider } from "../../../../contexts/CommunityContext";
+import { CommunityClassroom } from "../CommunityClassroom";
+import { CommunityCalendar } from "../CommunityCalendar";
+import type { CommunityClassroomCourse } from "../../../../data/queries/useCommunityClassroom";
+import type { CommunityCalendarCall, CommunityCalendarEvent } from "../../../../data/queries/useCommunityCalendar";
+import {
+  PROFILE_ID,
+  account,
+  calls,
+  get,
+  installAdapter,
+  restoreAdapter,
+  wrapper,
+  type Route,
+} from "../../../headless/_tests/communityHarness";
+
+/**
+ * The classroom and calendar tabs' markup: course cards with progress, what
+ * opens a locked one and the upgrade; the agenda's days, going and not going,
+ * the refused-answer message, Join only while a room is open, the calendar
+ * file link, and an event linking to its page (or showing it was cancelled).
+ */
+
+afterEach(() => {
+  cleanup();
+  restoreAdapter();
+});
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: ReactNode) {
+  const Wrapper = wrapper({ user: account() });
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const CLASSROOM = "/public/communities/fan-club/classroom";
+
+const course = (overrides: Partial<CommunityClassroomCourse> = {}): CommunityClassroomCourse => ({
+  courseId: "course-1",
+  title: "Songwriting 101",
+  description: "From idea to demo.",
+  slug: "songwriting-101",
+  coverUrl: "https://cdn.test/cover.jpg",
+  open: true,
+  progress: { completed: 3, total: 10, completedAt: null, currentLessonId: "lesson-4" },
+  unlockLevel: null,
+  unlockTiers: [],
+  accessId: "acc-1",
+  ...overrides,
+});
+
+describe("CommunityClassroom", () => {
+  it("shows an open course with its progress, linking to the course player", async () => {
+    installAdapter([get(CLASSROOM, () => [course()])]);
+    const went: string[] = [];
+    mount(<CommunityClassroom navigate={(href) => went.push(href)} />);
+    const card = await screen.findByTestId("community-classroom-course");
+    expect(card.getAttribute("data-state")).toBe("in_progress");
+    expect(card.textContent).toContain("Songwriting 101");
+    expect(within(card).getByTestId("community-classroom-progress").textContent).toBe("3 of 10 lessons");
+    expect(within(card).getByRole("progressbar").getAttribute("aria-valuenow")).toBe("30");
+    expect(card.getAttribute("href")).toBe("/i/course-access/acc-1");
+    fireEvent.click(card);
+    expect(went).toEqual(["/i/course-access/acc-1"]);
+  });
+
+  it("never sends the owner of a held course to its sales page", async () => {
+    installAdapter([get(CLASSROOM, () => [course({ accessId: null })])]);
+    const went: string[] = [];
+    mount(<CommunityClassroom navigate={(href) => went.push(href)} />);
+    const card = await screen.findByTestId("community-classroom-course");
+    expect(card.tagName).toBe("DIV");
+    expect(card.getAttribute("data-state")).toBe("in_progress");
+    expect(document.querySelector('a[href="/i/courses/songwriting-101"]')).toBeNull();
+    fireEvent.click(card);
+    expect(went).toEqual([]);
+  });
+
+  it("says Completed once the course is done", async () => {
+    installAdapter([
+      get(CLASSROOM, () => [
+        course({ progress: { completed: 10, total: 10, completedAt: "2026-09-01T00:00:00.000Z", currentLessonId: null } }),
+      ]),
+    ]);
+    mount(<CommunityClassroom />);
+    expect((await screen.findByTestId("community-classroom-progress")).textContent).toBe("Completed");
+  });
+
+  it("shows a level-locked course with its level and no upgrade", async () => {
+    installAdapter([get(CLASSROOM, () => [course({ open: false, progress: null, unlockLevel: 4 })])]);
+    mount(<CommunityClassroom />);
+    const card = await screen.findByTestId("community-classroom-course");
+    expect(card.getAttribute("data-state")).toBe("locked");
+    expect(card.tagName).toBe("DIV");
+    expect(within(card).getByTestId("community-classroom-unlock").textContent).toBe("Unlocks at level 4");
+    expect(within(card).queryByTestId("community-classroom-upgrade")).toBeNull();
+  });
+
+  it("shows a tier-locked course with its tiers, upgrading through the community's sheet", async () => {
+    installAdapter([
+      get(CLASSROOM, () => [
+        course({
+          open: false,
+          progress: null,
+          unlockTiers: [
+            { id: "tier-gold", name: "Gold" },
+            { id: "tier-vip", name: "VIP" },
+          ],
+        }),
+      ]),
+    ]);
+    const opened: Array<string | null | undefined> = [];
+    mount(
+      <CommunityUpgradeOpenerProvider value={{ openUpgrade: (tierId) => opened.push(tierId) }}>
+        <CommunityClassroom />
+      </CommunityUpgradeOpenerProvider>,
+    );
+    const card = await screen.findByTestId("community-classroom-course");
+    expect(within(card).getByTestId("community-classroom-unlock").textContent).toBe("Included in Gold, VIP");
+    fireEvent.click(within(card).getByTestId("community-classroom-upgrade"));
+    expect(opened).toEqual(["tier-gold"]);
+  });
+
+  it("falls back to the About page with the tier chosen when no sheet is on hand", async () => {
+    installAdapter([
+      get(CLASSROOM, () => [course({ open: false, progress: null, unlockTiers: [{ id: "tier-gold", name: "Gold" }] })]),
+    ]);
+    mount(<CommunityClassroom />);
+    const upgrade = await screen.findByTestId("community-classroom-upgrade");
+    expect(upgrade.getAttribute("href")).toBe("/i/communities/fan-club?tier=tier-gold");
+  });
+
+  it("says so when there are no courses", async () => {
+    installAdapter([get(CLASSROOM, () => [])]);
+    mount(<CommunityClassroom />);
+    expect((await screen.findByTestId("community-classroom-empty")).textContent).toContain("There are no courses here yet.");
+  });
+
+  it("tells a non-member the classroom is for members", async () => {
+    installAdapter([
+      get(CLASSROOM, () => {
+        throw { status: 403, message: "Forbidden" };
+      }),
+    ]);
+    mount(<CommunityClassroom />);
+    expect((await screen.findByTestId("community-classroom-forbidden")).textContent).toBe(
+      "The classroom is for members of this community.",
+    );
+  });
+
+  it("says the classroom could not load on a server error", async () => {
+    installAdapter([
+      get(CLASSROOM, () => {
+        throw { status: 500, message: "Boom" };
+      }),
+    ]);
+    mount(<CommunityClassroom />);
+    expect((await screen.findByRole("alert", undefined, { timeout: 4000 })).textContent).toBe(
+      "We couldn't load the classroom. Please try again.",
+    );
+  });
+});
+
+// ── Calendar ─────────────────────────────────────────────────────────────────
+
+const CALENDAR = "/public/communities/fan-club/calendar";
+const at = (day: number, hour: number) => new Date(2026, 8, day, hour, 0, 0).toISOString();
+const NOW = new Date(2026, 8, 15, 12, 0, 0);
+
+const call = (overrides: Partial<CommunityCalendarCall> = {}): CommunityCalendarCall => ({
+  kind: "call",
+  id: "11111111-aaaa-4aaa-8aaa-111111111111",
+  title: "Weekly Q&A",
+  description: "Bring questions.",
+  startsAt: at(16, 18),
+  endsAt: at(16, 19),
+  timezone: "Europe/Berlin",
+  participation: "open",
+  role: "attendee",
+  audiences: [{ id: "a1", audienceType: "community", audienceId: "community-1", label: "Fan club" }],
+  opensAt: at(16, 17),
+  closesAt: at(16, 19),
+  isOpen: false,
+  callPublicId: "pub-1",
+  rsvp: { going: 2, notGoing: 1, mine: null },
+  icsUrl: "https://api.test/public/calendar/calls/c1.ics",
+  recording: null,
+  ...overrides,
+});
+
+const event = (overrides: Partial<CommunityCalendarEvent> = {}): CommunityCalendarEvent => ({
+  kind: "event",
+  id: "event-1",
+  title: "Album launch",
+  description: null,
+  slug: "album-launch",
+  startsAt: at(18, 20),
+  endsAt: null,
+  timezone: "Europe/Berlin",
+  type: "physical",
+  address: { name: "The Club", city: "Berlin" },
+  cancelled: false,
+  icsUrl: "https://api.test/public/calendar/events/e1.ics",
+  ...overrides,
+});
+
+const RSVP = `/public/communities/fan-club/calendar/calls/${call().id}/rsvp`;
+const put =
+  (path: string, answer: (req: { body: Record<string, unknown> | null }) => unknown): Route =>
+  (req) =>
+    req.method === "put" && req.url === path ? answer(req) : undefined;
+
+describe("CommunityCalendar", () => {
+  it("groups the month by day, with what already happened after what is ahead", async () => {
+    installAdapter([
+      get(CALENDAR, () => [
+        call({ id: "c-past", title: "Last week's call", startsAt: at(8, 18), endsAt: at(8, 19) }),
+        call(),
+        event(),
+      ]),
+    ]);
+    mount(<CommunityCalendar now={NOW} />);
+    await screen.findByTestId("community-calendar");
+    const days = await screen.findAllByTestId("community-calendar-day");
+    expect(days.map((day) => day.getAttribute("data-day"))).toEqual(["2026-09-16", "2026-09-18", "2026-09-08"]);
+    expect(screen.getByText("Already happened")).toBeTruthy();
+    expect(screen.getByTestId("community-calendar-month").textContent).toContain("September 2026");
+  });
+
+  it("sends going and shows the new counts", async () => {
+    installAdapter([get(CALENDAR, () => [call()]), put(RSVP, () => ({ going: 3, notGoing: 1, mine: "going" }))]);
+    mount(<CommunityCalendar now={NOW} />);
+    const going = await screen.findByTestId("community-calendar-rsvp-going");
+    expect(going.textContent).toBe("Going (2)");
+    expect(going.getAttribute("aria-pressed")).toBe("false");
+    fireEvent.click(going);
+    await waitFor(() => expect(screen.getByTestId("community-calendar-rsvp-going").textContent).toBe("Going (3)"));
+    expect(screen.getByTestId("community-calendar-rsvp-going").getAttribute("aria-pressed")).toBe("true");
+    expect(calls("put", RSVP)[0]!.body).toEqual({ profileId: PROFILE_ID, response: "going" });
+  });
+
+  it("says a closed call takes no more answers on a 409", async () => {
+    installAdapter([
+      get(CALENDAR, () => [call()]),
+      put(RSVP, () => {
+        throw { status: 409, message: "Closed" };
+      }),
+    ]);
+    mount(<CommunityCalendar now={NOW} />);
+    fireEvent.click(await screen.findByTestId("community-calendar-rsvp-not_going"));
+    expect((await screen.findByTestId("community-calendar-rsvp-error")).textContent).toBe(
+      "This call has ended or was cancelled, so we're no longer taking answers for it.",
+    );
+  });
+
+  it("offers Join only while the room is open", async () => {
+    installAdapter([
+      get(CALENDAR, () => [
+        call({ id: "open", title: "Open now", isOpen: true, callPublicId: "pub-open", startsAt: at(15, 11), endsAt: at(15, 13) }),
+        call({ id: "later", title: "Later" }),
+      ]),
+    ]);
+    const went: string[] = [];
+    mount(<CommunityCalendar now={NOW} navigate={(href) => went.push(href)} />);
+    const rows = await screen.findAllByTestId("community-calendar-call");
+    expect(rows).toHaveLength(2);
+    const join = within(rows[0]!).getByTestId("community-calendar-join");
+    expect(within(rows[1]!).queryByTestId("community-calendar-join")).toBeNull();
+    expect(join.getAttribute("href")).toBe("/i/video-calls/pub-open");
+    fireEvent.click(join);
+    expect(went).toEqual(["/i/video-calls/pub-open"]);
+  });
+
+  it("opens a call's details from its title or Details, with when it opens, and Join once it is open", async () => {
+    installAdapter([
+      get(CALENDAR, () => [
+        call({ id: "later", title: "Later" }),
+        call({ id: "open", title: "Open now", isOpen: true, callPublicId: "pub-open", startsAt: at(15, 11), endsAt: at(15, 13) }),
+      ]),
+    ]);
+    const went: string[] = [];
+    mount(<CommunityCalendar now={NOW} navigate={(href) => went.push(href)} />);
+    const rows = await screen.findAllByTestId("community-calendar-call");
+    const later = rows.find((row) => row.textContent?.includes("Later"))!;
+    const open = rows.find((row) => row.textContent?.includes("Open now"))!;
+
+    fireEvent.click(within(later).getByTestId("community-calendar-call-open"));
+    const dialog = await screen.findByRole("dialog", { name: "Later" });
+    expect(dialog.textContent).toContain("Bring questions.");
+    expect(dialog.textContent).toContain("Fan club");
+    expect(within(dialog).queryByText("Join call")).toBeNull();
+    expect(dialog.textContent).toMatch(/Opens/i);
+    fireEvent.click(within(dialog).getByLabelText("Close"));
+    expect(screen.queryByRole("dialog")).toBeNull();
+
+    fireEvent.click(within(open).getByTestId("community-calendar-call-details"));
+    const openDialog = await screen.findByRole("dialog", { name: "Open now" });
+    fireEvent.click(within(openDialog).getByText("Join call"));
+    expect(went).toEqual(["/i/video-calls/pub-open"]);
+  });
+
+  it("gives every event a visible View event link, cancelled or past included", async () => {
+    installAdapter([
+      get(CALENDAR, () => [
+        event(),
+        event({ id: "event-2", slug: "called-off", title: "Called off", cancelled: true }),
+        event({ id: "event-3", slug: "last-week", title: "Last week", startsAt: at(8, 20), endsAt: at(8, 23) }),
+      ]),
+    ]);
+    const went: string[] = [];
+    mount(<CommunityCalendar now={NOW} navigate={(href) => went.push(href)} />);
+    const views = await screen.findAllByTestId("community-calendar-event-view");
+    expect(views.map((view) => view.getAttribute("href"))).toEqual([
+      "/i/events/album-launch",
+      "/i/events/called-off",
+      "/i/events/last-week",
+    ]);
+    expect(views[0]!.textContent).toContain("View event");
+    fireEvent.click(views[1]!);
+    expect(went).toEqual(["/i/events/called-off"]);
+  });
+
+  it("links each upcoming item to its calendar file", async () => {
+    installAdapter([get(CALENDAR, () => [call(), event()])]);
+    mount(<CommunityCalendar now={NOW} />);
+    const links = await screen.findAllByTestId("community-calendar-ics");
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "https://api.test/public/calendar/calls/c1.ics",
+      "https://api.test/public/calendar/events/e1.ics",
+    ]);
+  });
+
+  it("links an event to its page, and marks a cancelled one", async () => {
+    installAdapter([
+      get(CALENDAR, () => [event(), event({ id: "event-2", slug: "called-off", title: "Called off", cancelled: true })]),
+    ]);
+    const went: string[] = [];
+    mount(<CommunityCalendar now={NOW} navigate={(href) => went.push(href)} />);
+    const rows = await screen.findAllByTestId("community-calendar-event");
+    const link = within(rows[0]!).getByTestId("community-calendar-event-link");
+    expect(link.getAttribute("href")).toBe("/i/events/album-launch");
+    fireEvent.click(link);
+    expect(went).toEqual(["/i/events/album-launch"]);
+    expect(within(rows[0]!).queryByTestId("community-calendar-cancelled")).toBeNull();
+    expect(within(rows[1]!).getByTestId("community-calendar-cancelled").textContent).toBe("Cancelled");
+    expect(within(rows[1]!).queryByTestId("community-calendar-ics")).toBeNull();
+  });
+
+  it("offers a past call's recording to rewatch, with its summary, and no answers any more", async () => {
+    installAdapter([
+      get(CALENDAR, () => [
+        call({
+          id: "c-past",
+          title: "Last week's call",
+          startsAt: at(8, 18),
+          endsAt: at(8, 19),
+          rsvp: { going: 4, notGoing: 0, mine: "going" },
+          recording: {
+            id: "r1",
+            status: "ready",
+            durationSeconds: 1800,
+            watchUrl: "https://cdn.test/rec.mp4?sig=abc",
+            transcript: {
+              status: "ready",
+              summary: { title: "Launch", summary: "They agreed to ship.", decisions: [], actionItems: [] },
+            },
+          },
+        }),
+      ]),
+      get("/public/scheduled-calls/mine/recordings/r1/transcript", () => ({
+        recordingId: "r1",
+        callId: "c-past",
+        title: "Last week's call",
+        startsAt: at(8, 18),
+        timezone: "UTC",
+        durationSeconds: 1800,
+        watchUrl: "https://cdn.test/rec.mp4?sig=fresh",
+        transcript: {
+          status: "ready",
+          language: "en",
+          segments: [{ name: "Ada", startMs: 0, endMs: 2_000, text: "Shall we ship Friday?" }],
+          summary: { title: "Launch", summary: "They agreed to ship.", decisions: [], actionItems: [] },
+        },
+      })),
+    ]);
+    mount(<CommunityCalendar now={NOW} />);
+    const row = await screen.findByTestId("community-calendar-call");
+    expect(screen.getByText("Already happened")).toBeTruthy();
+    const watch = within(row).getByTestId("call-recording-watch");
+    expect(watch.getAttribute("href")).toBe("https://cdn.test/rec.mp4?sig=abc");
+    expect(watch.textContent).toContain("Watch recording · 30 min");
+    expect(within(row).getByTestId("member-call-transcript").textContent).toContain("They agreed to ship.");
+    expect(within(row).queryByTestId("community-calendar-rsvp-going")).toBeNull();
+    expect(within(row).queryByTestId("community-calendar-ics")).toBeNull();
+    expect(within(row).queryByTestId("community-calendar-join")).toBeNull();
+
+    fireEvent.click(within(row).getByText("Read transcript"));
+    expect(await screen.findByTestId("member-transcript-video")).toBeTruthy();
+    expect(calls("get", "/public/scheduled-calls/mine/recordings/r1/transcript")).toHaveLength(1);
+  });
+
+  it("says a past call's recording is still processing", async () => {
+    installAdapter([
+      get(CALENDAR, () => [
+        call({
+          startsAt: at(15, 9),
+          endsAt: at(15, 10),
+          recording: { id: "r2", status: "processing", durationSeconds: null, watchUrl: null, transcript: null },
+        }),
+      ]),
+    ]);
+    mount(<CommunityCalendar now={NOW} />);
+    const row = await screen.findByTestId("community-calendar-call");
+    expect(within(row).getByTestId("call-recording-processing").textContent).toBe("Recording is processing");
+    expect(within(row).queryByTestId("call-recording-watch")).toBeNull();
+  });
+
+  it("offers nothing to rewatch for a past call with no recording", async () => {
+    installAdapter([get(CALENDAR, () => [call({ startsAt: at(8, 18), endsAt: at(8, 19) })])]);
+    mount(<CommunityCalendar now={NOW} />);
+    const row = await screen.findByTestId("community-calendar-call");
+    expect(within(row).queryByTestId("call-recording-watch")).toBeNull();
+    expect(within(row).queryByTestId("call-recording-processing")).toBeNull();
+    expect(within(row).queryByTestId("community-calendar-rsvp-going")).toBeNull();
+  });
+
+  it("says so when the month is empty", async () => {
+    installAdapter([get(CALENDAR, () => [])]);
+    mount(<CommunityCalendar now={NOW} />);
+    expect(await screen.findByTestId("community-calendar-empty")).toBeTruthy();
+  });
+
+  it("tells a non-member the calendar is for members", async () => {
+    installAdapter([
+      get(CALENDAR, () => {
+        throw { status: 403, message: "Forbidden" };
+      }),
+    ]);
+    mount(<CommunityCalendar now={NOW} />);
+    expect((await screen.findByTestId("community-calendar-forbidden")).textContent).toBe(
+      "The calendar is for members of this community.",
+    );
+  });
+});