@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/community/_tests/CommunityPoll.spec.tsx

@@ -0,0 +1,386 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { CommunityComposer } from "../CommunityComposer";
+import { CommunityPollCard } from "../CommunityPollCard";
+import { CommunitySpaces } from "../CommunitySpaces";
+import { CommunityNotificationsInbox } from "../CommunityNotifications";
+import { CommunityWiki } from "../../communities/CommunityWiki";
+import type { CommunityPollView } from "../../../../data/queries/useCommunity";
+import {
+  COMMUNITY,
+  account,
+  calls,
+  get,
+  installAdapter,
+  post,
+  restoreAdapter,
+  wrapper,
+} from "../../../headless/_tests/communityHarness";
+
+/**
+ * Polls and level locks as a member meets them: the composer's Poll section
+ * and its visible errors, the poll card in each of its states (open, hidden
+ * results, results shown, closed), a space above the member's level listed
+ * but not a way in, a wiki page a level opens, and the level-up notice.
+ */
+
+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>,
+  );
+}
+
+// ── Composer ─────────────────────────────────────────────────────────────────
+
+describe("CommunityComposer with a poll", () => {
+  const openPoll = () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    installAdapter([]);
+    mount(<CommunityComposer allowPoll onSubmit={onSubmit} />);
+    fireEvent.click(screen.getByRole("button", { name: "Poll" }));
+    return onSubmit;
+  };
+
+  it("offers no Poll toggle unless asked to (reply boxes)", () => {
+    installAdapter([]);
+    mount(<CommunityComposer onSubmit={vi.fn()} />);
+    expect(screen.queryByRole("button", { name: "Poll" })).toBeNull();
+  });
+
+  it("the toggle reveals the question, two options, the switch, the close time and the results select", () => {
+    openPoll();
+    expect(screen.getByRole("button", { name: "Poll" }).getAttribute("aria-pressed")).toBe("true");
+    expect(screen.getByRole("textbox", { name: "Poll question" })).toBeTruthy();
+    expect(screen.getByRole("textbox", { name: "Option 1" })).toBeTruthy();
+    expect(screen.getByRole("textbox", { name: "Option 2" })).toBeTruthy();
+    expect(screen.getByRole("switch", { name: "Allow more than one answer" })).toBeTruthy();
+    expect(screen.getByLabelText("Closes (optional)")).toBeTruthy();
+    expect((screen.getByRole("combobox", { name: "Show results" }) as HTMLSelectElement).value).toBe("after_vote");
+    // Two options is the floor: neither can be removed yet.
+    expect((screen.getByRole("button", { name: "Remove option 1" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("adds options up to 10 and removes them down to 2", () => {
+    openPoll();
+    const add = screen.getByRole("button", { name: "Add option" }) as HTMLButtonElement;
+    for (let i = 0; i < 9; i++) fireEvent.click(add);
+    expect(screen.getAllByRole("textbox", { name: /^Option \d+$/ })).toHaveLength(10);
+    expect(add.disabled).toBe(true);
+    fireEvent.click(screen.getByRole("button", { name: "Remove option 10" }));
+    expect(screen.getAllByRole("textbox", { name: /^Option \d+$/ })).toHaveLength(9);
+    expect(add.disabled).toBe(false);
+  });
+
+  it("shows every error visibly and sends nothing while the poll is incomplete", async () => {
+    const onSubmit = openPoll();
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 1" }), { target: { value: "Yes" } });
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 2" }), { target: { value: " yes " } });
+    fireEvent.click(screen.getByRole("button", { name: "Post" }));
+
+    const alerts = screen.getAllByRole("alert").map((a) => a.textContent);
+    expect(alerts).toContain("Add a question. It becomes the post title.");
+    expect(alerts).toContain("This option repeats another one.");
+    expect(screen.getByRole("textbox", { name: "Option 2" }).getAttribute("aria-invalid")).toBe("true");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("a close time in the past is refused", () => {
+    const onSubmit = openPoll();
+    fireEvent.change(screen.getByRole("textbox", { name: "Poll question" }), { target: { value: "Which day?" } });
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 1" }), { target: { value: "Mon" } });
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 2" }), { target: { value: "Tue" } });
+    fireEvent.change(screen.getByLabelText("Closes (optional)"), { target: { value: "2020-01-01T10:00" } });
+    fireEvent.click(screen.getByRole("button", { name: "Post" }));
+    expect(screen.getByRole("alert").textContent).toBe("The closing time must be in the future.");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("sends the question as the title and the poll, with no body text needed", async () => {
+    const onSubmit = openPoll();
+    fireEvent.change(screen.getByRole("textbox", { name: "Poll question" }), { target: { value: " Which day? " } });
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 1" }), { target: { value: " Mon " } });
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 2" }), { target: { value: "Tue" } });
+    fireEvent.click(screen.getByRole("button", { name: "Add option" }));
+    fireEvent.change(screen.getByRole("textbox", { name: "Option 3" }), { target: { value: "Wed" } });
+    fireEvent.click(screen.getByRole("switch", { name: "Allow more than one answer" }));
+    fireEvent.change(screen.getByLabelText("Closes (optional)"), { target: { value: "2099-01-01T10:00" } });
+    fireEvent.change(screen.getByRole("combobox", { name: "Show results" }), { target: { value: "after_close" } });
+    fireEvent.click(screen.getByRole("button", { name: "Post" }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const sentInput = onSubmit.mock.calls[0][0];
+    expect(sentInput.title).toBe("Which day?");
+    expect(sentInput.poll).toEqual({
+      options: ["Mon", "Tue", "Wed"],
+      multipleChoice: true,
+      closesAt: new Date("2099-01-01T10:00").toISOString(),
+      resultsVisibility: "after_close",
+    });
+    expect(sentInput.attachments).toEqual([]);
+    // Posted: the poll folds away and starts fresh next time.
+    await waitFor(() => expect(screen.queryByTestId("community-composer-poll")).toBeNull());
+  });
+});
+
+// ── Poll card ────────────────────────────────────────────────────────────────
+
+const A = "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa";
+const B = "bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb";
+
+const poll = (overrides: Partial<CommunityPollView> = {}): CommunityPollView => ({
+  id: "poll-1",
+  multipleChoice: false,
+  closesAt: null,
+  closed: false,
+  resultsVisibility: "after_vote",
+  resultsVisible: false,
+  totalVoters: null,
+  myVotes: [],
+  options: [
+    { id: A, label: "Monday", position: 0, votes: null },
+    { id: B, label: "Tuesday", position: 1, votes: null },
+  ],
+  ...overrides,
+});
+
+const shown = (overrides: Partial<CommunityPollView> = {}) =>
+  poll({
+    resultsVisible: true,
+    totalVoters: 4,
+    options: [
+      { id: A, label: "Monday", position: 0, votes: 1 },
+      { id: B, label: "Tuesday", position: 1, votes: 3 },
+    ],
+    ...overrides,
+  });
+
+const cardPost = (p: CommunityPollView) => ({ id: "post-1", spaceId: "space-1", title: "Which day works?", poll: p });
+
+describe("CommunityPollCard", () => {
+  it("an open single-choice poll: a named group of radios and a Vote button, results after voting", async () => {
+    installAdapter([post("/public/community/posts/post-1/poll/vote", () => shown({ myVotes: [B] }))]);
+    mount(<CommunityPollCard post={cardPost(poll())} />);
+
+    const group = screen.getByRole("group", { name: /Which day works\?/ });
+    const radios = within(group).getAllByRole("radio");
+    expect(radios).toHaveLength(2);
+    expect(screen.getByLabelText("Monday")).toBeTruthy();
+    expect(screen.getByTestId("community-poll-hidden").textContent).toBe("Results after you vote");
+    expect(screen.queryByTestId("community-poll-bar")).toBeNull();
+
+    const vote = screen.getByRole("button", { name: "Vote" }) as HTMLButtonElement;
+    expect(vote.disabled).toBe(true);
+    fireEvent.click(screen.getByLabelText("Tuesday"));
+    expect(vote.disabled).toBe(false);
+    fireEvent.click(vote);
+
+    await waitFor(() =>
+      expect(calls("post", "/public/community/posts/post-1/poll/vote").map((c) => c.body)).toEqual([
+        { profileId: "profile-1", communityId: COMMUNITY.id, optionIds: [B] },
+      ]),
+    );
+  });
+
+  it("a multiple-choice poll uses checkboxes", () => {
+    installAdapter([]);
+    mount(<CommunityPollCard post={cardPost(poll({ multipleChoice: true }))} />);
+    expect(screen.getAllByRole("checkbox")).toHaveLength(2);
+    expect(screen.getByTestId("community-poll-status").textContent).toContain("Pick one or more");
+  });
+
+  it("results held until the close say so, even after voting", () => {
+    installAdapter([]);
+    mount(
+      <CommunityPollCard
+        post={cardPost(poll({ resultsVisibility: "after_close", myVotes: [A], closesAt: "2099-01-01T10:00:00.000Z" }))}
+      />,
+    );
+    expect(screen.getByTestId("community-poll-hidden").textContent).toBe("Results when the poll closes");
+    expect(screen.queryByText(/%$/)).toBeNull();
+    expect(screen.getByTestId("community-poll-status").textContent).toContain("Closes");
+    expect(screen.getByRole("button", { name: "Change vote" })).toBeTruthy();
+  });
+
+  it("results shown: bars with percentages, the voter count, and the member's vote marked", () => {
+    installAdapter([]);
+    mount(<CommunityPollCard post={cardPost(shown({ myVotes: [B] }))} />);
+    expect(screen.getAllByTestId("community-poll-bar")).toHaveLength(2);
+    expect(screen.getByText("25%")).toBeTruthy();
+    expect(screen.getByText("75%")).toBeTruthy();
+    expect(screen.getByTestId("community-poll-status").textContent).toContain("4 voters");
+    expect(screen.getByText("(your vote)", { exact: false })).toBeTruthy();
+    expect(screen.queryByRole("radio")).toBeNull();
+  });
+
+  it("change vote reopens the options, and withdraw sends an empty answer", async () => {
+    installAdapter([post("/public/community/posts/post-1/poll/vote", () => poll())]);
+    mount(<CommunityPollCard post={cardPost(shown({ myVotes: [B] }))} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Change vote" }));
+    // Results stay beside each option while choosing again ("Tuesday 75%").
+    expect((screen.getByLabelText(/^Tuesday/) as HTMLInputElement).checked).toBe(true);
+    // The same answer again is not a change.
+    expect((screen.getByRole("button", { name: "Update vote" }) as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    fireEvent.click(screen.getByRole("button", { name: "Withdraw vote" }));
+    await waitFor(() =>
+      expect(calls("post", "/public/community/posts/post-1/poll/vote")[0]?.body).toMatchObject({ optionIds: [] }),
+    );
+  });
+
+  it("a closed poll shows its final state and takes no votes", () => {
+    installAdapter([]);
+    mount(<CommunityPollCard post={cardPost(shown({ closed: true, closesAt: "2026-01-01T00:00:00.000Z", myVotes: [A] }))} />);
+    expect(screen.getByTestId("community-poll-status").textContent).toContain("Poll closed");
+    expect(screen.queryByRole("radio")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Vote" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Change vote" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Withdraw vote" })).toBeNull();
+    expect(screen.getByText("25%")).toBeTruthy();
+  });
+
+  it("a refused vote is shown to the member", async () => {
+    installAdapter([
+      post("/public/community/posts/post-1/poll/vote", () => {
+        throw { status: 409, message: "closed" };
+      }),
+    ]);
+    mount(<CommunityPollCard post={cardPost(poll())} />);
+    fireEvent.click(screen.getByLabelText("Monday"));
+    fireEvent.click(screen.getByRole("button", { name: "Vote" }));
+    expect((await screen.findByRole("alert")).textContent).toBe("This poll has closed.");
+  });
+
+  it("a post waiting for approval shows the poll read-only", () => {
+    installAdapter([]);
+    mount(<CommunityPollCard post={cardPost(poll())} disabled />);
+    expect(screen.queryByRole("radio")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Vote" })).toBeNull();
+  });
+});
+
+// ── Level locks ──────────────────────────────────────────────────────────────
+
+const space = (overrides: Record<string, unknown> = {}) => ({
+  id: "space-open",
+  profileId: "profile-1",
+  name: "General",
+  slug: "general",
+  description: null,
+  type: "feed",
+  courseId: null,
+  order: 0,
+  archivedAt: null,
+  createdAt: "2026-09-01T00:00:00.000Z",
+  tiers: [],
+  postCount: 3,
+  memberCount: 2,
+  isJoined: false,
+  minLevel: 1,
+  levelLocked: false,
+  ...overrides,
+});
+
+describe("CommunitySpaces with a level-locked space", () => {
+  it("lists it locked with its level, not as a way in", async () => {
+    installAdapter([
+      get("/public/community/spaces", () => [
+        space(),
+        space({ id: "space-locked", name: "Inner circle", slug: "inner", minLevel: 3, levelLocked: true }),
+      ]),
+    ]);
+    const onOpenSpace = vi.fn();
+    mount(<CommunitySpaces onOpenSpace={onOpenSpace} />);
+
+    const rows = await screen.findAllByTestId("community-space-row");
+    expect(rows).toHaveLength(2);
+    const [open, locked] = rows;
+    expect(open.getAttribute("role")).toBe("button");
+    expect(locked.getAttribute("role")).toBeNull();
+    expect(locked.getAttribute("tabindex")).toBeNull();
+    expect(within(locked).getByTestId("community-space-level-lock").textContent).toBe("Unlocks at level 3");
+    expect(within(locked).queryByRole("button", { name: "Join" })).toBeNull();
+
+    fireEvent.click(locked);
+    fireEvent.keyDown(locked, { key: "Enter" });
+    expect(onOpenSpace).not.toHaveBeenCalled();
+    fireEvent.click(open);
+    expect(onOpenSpace).toHaveBeenCalledWith(expect.objectContaining({ id: "space-open" }));
+  });
+});
+
+describe("CommunityWiki and a page a level opens", () => {
+  const pages = [
+    { id: "p1", title: "Start here", slug: "start", isPublic: false, locked: false, unlockTiers: [], unlockLevel: null, updatedAt: "2026-09-01" },
+    { id: "p2", title: "Level 4 notes", slug: "level-4", isPublic: false, locked: true, unlockTiers: [], unlockLevel: 4, updatedAt: "2026-09-01" },
+    {
+      id: "p3",
+      title: "Gold vault",
+      slug: "gold",
+      isPublic: false,
+      locked: true,
+      unlockTiers: [{ id: "tier-gold", name: "Gold" }],
+      unlockLevel: 5,
+      updatedAt: "2026-09-01",
+    },
+  ];
+
+  it("says the level in the list and on the page, with no upgrade to buy", async () => {
+    installAdapter([get(`/public/communities/${COMMUNITY.slug}/wiki`, () => pages)]);
+    mount(<CommunityWiki pageSlug="level-4" getPageHref={(slug) => `/wiki/${slug}`} />);
+    expect((await screen.findByTestId("community-wiki-unlock")).textContent).toBe("Unlocks at level 4.");
+    expect(screen.queryByTestId("community-wiki-upgrade")).toBeNull();
+    expect(screen.getAllByTestId("community-wiki-item-level").map((el) => el.textContent)).toEqual([
+      "Unlocks at level 4.",
+      "Unlocks at level 5. This page is part of Gold.",
+    ]);
+  });
+
+  it("names the tiers beside the level, and offers the upgrade", async () => {
+    installAdapter([get(`/public/communities/${COMMUNITY.slug}/wiki`, () => pages)]);
+    mount(<CommunityWiki pageSlug="gold" getPageHref={(slug) => `/wiki/${slug}`} />);
+    expect((await screen.findByTestId("community-wiki-unlock")).textContent).toBe(
+      "Unlocks at level 5. This page is part of Gold.",
+    );
+    expect(screen.getByTestId("community-wiki-upgrade")).toBeTruthy();
+  });
+});
+
+describe("CommunityNotificationsInbox and a level-up", () => {
+  it("says the level the member reached", async () => {
+    installAdapter([
+      get("/public/community/notifications", () => ({
+        data: [
+          {
+            id: "n1",
+            profileId: "profile-1",
+            accountId: "account-1",
+            type: "level_up",
+            entityType: "community",
+            entityId: COMMUNITY.id,
+            readAt: null,
+            createdAt: new Date().toISOString(),
+            data: { level: 5 },
+          },
+        ],
+        unreadCount: 1,
+      })),
+    ]);
+    mount(<CommunityNotificationsInbox onOpenPost={vi.fn()} />);
+    expect((await screen.findByTestId("community-notification-title")).textContent).toBe("You reached level 5");
+  });
+});

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

@@ -1,4 +1,4 @@
-// Community styled blocks. NOTE: lane-local aggregator — the integrator
+// Community styled blocks. NOTE: lane-local aggregator. The integrator
 // re-exports it from `ui/index.ts` (`export * from "./styled/community"`).
 export { CommunitySpaces, type CommunitySpacesProps } from "./CommunitySpaces";
 export { CommunityFeed, type CommunityFeedProps } from "./CommunityFeed";
@@ -10,7 +10,11 @@ export {
   COMMUNITY_REACTION_EMOJIS,
   type CommunityReactionBarProps,
 } from "./CommunityReactionBar";
-export { CommunityRichText, type CommunityRichTextProps } from "./CommunityRichText";
+export {
+  CommunityRichText,
+  type CommunityRichTextProps,
+  type CommunityRichTextPrivateImage,
+} from "./CommunityRichText";
 export { CommunityMediaGallery } from "./CommunityMediaGallery";
 export { CommunityMemberProfile, type CommunityMemberProfileProps } from "./CommunityMemberProfile";
 export {
@@ -21,3 +25,34 @@ export {
 } from "./CommunityNotifications";
 export { CommunityLeaderboard, type CommunityLeaderboardProps } from "./CommunityLeaderboard";
 export { MemberAvatar, LevelBadge, type MemberAvatarProps } from "./MemberAvatar";
+export { CommunityModeration, type CommunityModerationProps } from "./CommunityModeration";
+export { CommunityMembers, type CommunityMembersProps } from "./CommunityMembers";
+export { CommunityMemberGlobe, type CommunityMemberGlobeProps } from "./CommunityMemberGlobe";
+export {
+  CommunityModeratorMenu,
+  type CommunityModeratorMenuProps,
+  type CommunityModeratorMenuTarget,
+} from "./CommunityModeratorMenu";
+export {
+  CommunityPendingBadge,
+  CommunityRemovedNotice,
+  type CommunityPendingBadgeProps,
+  type CommunityRemovedNoticeProps,
+  type CommunityRemovedNoticeTarget,
+} from "./CommunityModerationState";
+export { CommunityPollCard, type CommunityPollCardProps } from "./CommunityPollCard";
+export { CommunityLinkPreview, type CommunityLinkPreviewProps } from "./CommunityLinkPreview";
+export {
+  CommunityAgentBadge,
+  CommunityAgentAvatar,
+  CommunityAgentName,
+  CommunityAgentThinking,
+  CommunityAgentFeedback,
+  CommunityCatchMeUp,
+  CommunityLinkifiedText,
+  type CommunityAgentIdentity,
+  type CommunityAgentAvatarProps,
+  type CommunityAgentNameProps,
+  type CommunityAgentFeedbackProps,
+  type CommunityCatchMeUpProps,
+} from "./CommunityAgent";