@tribe-nest/forge 3.60.0 → 3.61.0

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

@@ -0,0 +1,399 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { CommunityUpgradeOpenerProvider } from "../../../../contexts/CommunityContext";
+import { CommunityHome } from "../CommunityHome";
+import { CommunityMembershipMenu } from "../CommunityMembershipMenu";
+import { CommunityJoinSheet } from "../CommunityJoinSheet";
+import {
+  COMMUNITY,
+  account,
+  calls,
+  detailRoute,
+  get,
+  installAdapter,
+  meRoute,
+  post,
+  restoreAdapter,
+  tier,
+  viewer,
+  wrapper,
+  type Route,
+} from "../../../headless/_tests/communityHarness";
+import type { CommunityViewerState } from "../../../../data/queries/useCommunities";
+
+/**
+ * The member area on a phone: a slim header whose tier pill opens the
+ * membership sheet, a bottom bar with "More", every sheet a bottom sheet below
+ * `lg`, the membership sheet's summary card and action rows, and the join
+ * sheet's email-first identity step.
+ *
+ * jsdom applies no CSS, so the responsive split is asserted through the
+ * classes that carry it (both headers render; which one shows is the class).
+ */
+
+afterEach(restoreAdapter);
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: React.ReactNode, opts: Parameters<typeof wrapper>[0] = {}) {
+  const Wrapper = wrapper(opts);
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const free = tier({ id: "tier-free", name: "Free" });
+const gold = tier({ id: "tier-gold", name: "Gold", priceMonthly: 20 });
+const basic = tier({ id: "tier-basic", name: "Basic", priceMonthly: 5 });
+
+const member = (tierId: string, tierName: string, patch: Partial<NonNullable<CommunityViewerState["membership"]>> = {}, upgrade = false) =>
+  viewer({
+    state: "member",
+    membership: {
+      id: "m-1",
+      tierId,
+      tierName,
+      status: "active",
+      cancelAtPeriodEnd: false,
+      currentPeriodEnd: null,
+      pendingDowngradeTierId: null,
+      ...patch,
+    },
+    upgradeTiers: upgrade ? [{ id: "tier-gold", name: "Gold", priceMonthly: 20, priceYearly: null }] : [],
+  });
+
+/** `/public/memberships/mine` for the member's one row, as the server envelopes it. */
+const mineRoute = (membership: Record<string, unknown>): Route =>
+  get("/public/memberships/mine", () => [
+    { community: { id: COMMUNITY.id, name: COMMUNITY.name, slug: COMMUNITY.slug }, membership: { id: "m-1", ...membership } },
+  ]);
+
+/** A community with spaces, chat and moderation, so the bar and "More" both have something. */
+const busyCommunity: Route[] = [
+  get("/public/community/spaces", () => [{ id: "s-1", name: "General", slug: "general" }]),
+  get("/public/chat/channels", () => [{ id: "c-1", name: "general" }]),
+  get("/public/community/me", () => ({ canModerate: true })),
+];
+
+describe("CommunityHome on a phone", () => {
+  it("one slim row: name, tier pill that opens the membership sheet, and Upgrade only when a higher tier exists", async () => {
+    installAdapter([meRoute(() => member("tier-free", "Free", {}, true)), mineRoute({ amount: null }), detailRoute(() => ({ tiers: [free, gold] }))]);
+    mount(
+      <CommunityHome tab="posts">
+        <p>feed</p>
+      </CommunityHome>,
+      { user: account() },
+    );
+    const compact = await screen.findByTestId("community-home-header-compact");
+    expect(compact.className).toContain("fg:lg:hidden");
+    // The desktop header is untouched, and shows from lg up only.
+    expect(screen.getByTestId("community-home-header").className).toContain("fg:lg:flex");
+    expect(within(compact).getByRole("heading", { name: "Fan Club" })).toBeTruthy();
+    expect(await within(compact).findByTestId("community-home-upgrade-chip")).toBeTruthy();
+
+    fireEvent.click(within(compact).getByTestId("community-home-tier-button"));
+    const sheet = await screen.findByTestId("community-membership-menu");
+    expect(within(sheet).getByTestId("community-membership-summary").textContent).toContain("Free");
+  });
+
+  it("no Upgrade chip when there is nowhere higher to go", async () => {
+    installAdapter([meRoute(() => member("tier-gold", "Gold")), mineRoute({ amount: 20, currency: "USD", billingCycle: "month" }), detailRoute(() => ({ tiers: [free, gold] }))]);
+    mount(
+      <CommunityHome tab="posts">
+        <p>feed</p>
+      </CommunityHome>,
+      { user: account() },
+    );
+    await screen.findByTestId("community-home-tier-button");
+    expect(screen.queryByTestId("community-home-upgrade-chip")).toBeNull();
+  });
+
+  it("the bottom bar: Feed, Spaces, Chat, Alerts and More; More lists the rest, grouped, and Your membership", async () => {
+    const went: string[] = [];
+    installAdapter([...busyCommunity, meRoute(() => member("tier-free", "Free")), mineRoute({ amount: null }), detailRoute(() => ({ tiers: [free] }))]);
+    mount(
+      <CommunityHome tab="posts" navigate={(href) => went.push(href)}>
+        <p>feed</p>
+      </CommunityHome>,
+      { user: account() },
+    );
+    const bar = await screen.findByTestId("community-bar");
+    expect(bar.className).toContain("fg:lg:hidden");
+    await waitFor(() =>
+      expect(within(bar).getAllByRole("link").map((a) => a.textContent)).toEqual(["Feed", "Spaces", "Chat", "Alerts"]),
+    );
+    expect(within(bar).getByTestId("community-bar-posts").getAttribute("aria-current")).toBe("page");
+    expect(within(bar).getByTestId("community-bar-more").getAttribute("aria-pressed")).toBe("false");
+    // The page ends above the bar.
+    expect(screen.getByRole("main").className).toContain("fg:pb-[calc(72px+env(safe-area-inset-bottom))]");
+
+    fireEvent.click(within(bar).getByTestId("community-bar-chat"));
+    expect(went).toEqual(["/i/communities/fan-club/home/chat"]);
+
+    fireEvent.click(within(bar).getByTestId("community-bar-more"));
+    const more = await screen.findByTestId("community-more-sheet");
+    expect(within(more).getByText("Community")).toBeTruthy();
+    expect(within(more).getByText("You")).toBeTruthy();
+    const rows = within(more)
+      .getAllByRole("button")
+      .map((b) => b.getAttribute("data-testid"))
+      .filter((id) => id?.startsWith("community-more-") && id !== "community-more-sheet");
+    expect(rows).toEqual([
+      "community-more-calendar",
+      "community-more-classroom",
+      "community-more-members",
+      "community-more-leaderboard",
+      "community-more-membership",
+      "community-more-moderation",
+    ]);
+
+    fireEvent.click(within(more).getByTestId("community-more-membership"));
+    expect(await screen.findByTestId("community-membership-menu")).toBeTruthy();
+  });
+
+  it("a page that lives under More highlights More", async () => {
+    installAdapter([...busyCommunity, meRoute(() => member("tier-free", "Free")), mineRoute({ amount: null }), detailRoute(() => ({ tiers: [free] }))]);
+    mount(
+      <CommunityHome tab="members">
+        <p>members</p>
+      </CommunityHome>,
+      { user: account() },
+    );
+    const more = await screen.findByTestId("community-bar-more");
+    expect(more.getAttribute("aria-pressed")).toBe("true");
+    expect(screen.getByTestId("community-bar-posts").getAttribute("aria-current")).toBeNull();
+  });
+
+  it("publishes the bar's height for the chat bubble on a phone, and clears it on the way out", async () => {
+    const original = window.matchMedia;
+    window.matchMedia = ((query: string) => ({
+      matches: true,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })) as unknown as typeof window.matchMedia;
+    try {
+      installAdapter([...busyCommunity, meRoute(() => member("tier-free", "Free")), mineRoute({ amount: null }), detailRoute(() => ({ tiers: [free] }))]);
+      const view = mount(
+        <CommunityHome tab="posts">
+          <p>feed</p>
+        </CommunityHome>,
+        { user: account() },
+      );
+      await screen.findByTestId("community-bar");
+      await waitFor(() => expect(document.documentElement.style.getPropertyValue("--forge-bottom-bar-height")).toBe("56px"));
+      view.unmount();
+      expect(document.documentElement.style.getPropertyValue("--forge-bottom-bar-height")).toBe("");
+    } finally {
+      window.matchMedia = original;
+    }
+  });
+
+  it("lifts the chat bubble clear of the message box in chat only, and clears it on the way out", async () => {
+    const original = window.matchMedia;
+    window.matchMedia = ((query: string) => ({
+      matches: true,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    })) as unknown as typeof window.matchMedia;
+    const lift = () => document.documentElement.style.getPropertyValue("--forge-floating-lift");
+    try {
+      installAdapter([...busyCommunity, meRoute(() => member("tier-free", "Free")), mineRoute({ amount: null }), detailRoute(() => ({ tiers: [free] }))]);
+      const feed = mount(
+        <CommunityHome tab="posts">
+          <p>feed</p>
+        </CommunityHome>,
+        { user: account() },
+      );
+      await screen.findByTestId("community-bar");
+      expect(lift()).toBe("");
+      feed.unmount();
+
+      const chat = mount(
+        <CommunityHome tab="chat">
+          <p>chat</p>
+        </CommunityHome>,
+        { user: account() },
+      );
+      await screen.findByTestId("community-bar");
+      await waitFor(() => expect(lift()).toBe("88px"));
+      chat.unmount();
+      expect(lift()).toBe("");
+    } finally {
+      window.matchMedia = original;
+    }
+  });
+});
+
+describe("CommunitySheet below lg", () => {
+  it("is a bottom sheet with a grab handle above the chat bubble, and the centred dialog from lg up", async () => {
+    installAdapter([meRoute(() => member("tier-free", "Free")), mineRoute({ amount: null }), detailRoute(() => ({ tiers: [free] }))]);
+    mount(<CommunityMembershipMenu open onOpenChange={() => {}} />, { user: account() });
+    const sheet = await screen.findByTestId("community-membership-menu");
+    const cls = sheet.className;
+    for (const c of ["fg:fixed", "fg:inset-x-0", "fg:bottom-0", "fg:w-full", "fg:max-h-[90dvh]", "fg:overflow-y-auto", "fg:rounded-t-[var(--cs-radius)]"]) {
+      expect(cls).toContain(c);
+    }
+    for (const c of ["fg:lg:top-1/2", "fg:lg:left-1/2", "fg:lg:-translate-x-1/2", "fg:lg:-translate-y-1/2", "fg:lg:w-[min(560px,calc(100vw-32px))]"]) {
+      expect(cls).toContain(c);
+    }
+    expect(sheet.style.zIndex).toBe("10001");
+    expect(sheet.style.paddingBottom).toContain("safe-area-inset-bottom");
+    const handle = sheet.querySelector("[data-sheet-handle]") as HTMLElement;
+    expect(handle.className).toContain("fg:lg:hidden");
+  });
+});
+
+describe("the membership sheet", () => {
+  const fmt = (amount: number, currency?: string) => `${currency} ${amount}`;
+
+  it("free: says Free, offers no payment method, and the way out is Leave community, which still asks first", async () => {
+    installAdapter([
+      post("/public/communities/fan-club/membership/cancel", () => ({})),
+      meRoute(() => member("tier-free", "Free", {}, true)),
+      mineRoute({ amount: null, currency: null, billingCycle: null }),
+      detailRoute(() => ({ tiers: [free, gold] })),
+    ]);
+    mount(
+      <CommunityUpgradeOpenerProvider value={{ openUpgrade: () => {} }}>
+        <CommunityMembershipMenu open onOpenChange={() => {}} formatAmount={fmt} />
+      </CommunityUpgradeOpenerProvider>,
+      { user: account() },
+    );
+    const sheet = await screen.findByTestId("community-membership-menu");
+    await waitFor(() => expect(calls("get", "/public/memberships/mine")).toHaveLength(1));
+    expect(within(sheet).getByTestId("community-membership-price").textContent).toBe("Free");
+    expect(within(sheet).getByTestId("community-membership-upgrade")).toBeTruthy();
+    expect(within(sheet).queryByTestId("community-membership-row-update-card")).toBeNull();
+    const leave = within(sheet).getByTestId("community-membership-row-cancel");
+    expect(leave.textContent).toBe("Leave community");
+
+    fireEvent.click(leave);
+    const confirm = within(sheet).getByTestId("community-membership-cancel-confirm");
+    expect(confirm.textContent).toContain("Leave this community?");
+    expect(confirm.textContent).toContain("You lose access now.");
+    expect(calls("post", "/public/communities/fan-club/membership/cancel")).toHaveLength(0);
+    fireEvent.click(within(confirm).getByTestId("community-membership-cancel-confirm-button"));
+    await waitFor(() => expect(calls("post", "/public/communities/fan-club/membership/cancel")).toHaveLength(1));
+  });
+
+  it("paid: the price per period, the renewal date, update card, switch down, and Cancel membership with its confirmation", async () => {
+    installAdapter([
+      meRoute(() => member("tier-gold", "Gold", { currentPeriodEnd: "2026-10-27T00:00:00.000Z" })),
+      mineRoute({ amount: 20, currency: "USD", billingCycle: "month" }),
+      detailRoute(() => ({ tiers: [free, basic, gold] })),
+    ]);
+    mount(
+      <CommunityUpgradeOpenerProvider value={{ openUpgrade: () => {} }}>
+        <CommunityMembershipMenu open onOpenChange={() => {}} formatAmount={fmt} />
+      </CommunityUpgradeOpenerProvider>,
+      { user: account() },
+    );
+    const sheet = await screen.findByTestId("community-membership-menu");
+    await waitFor(() => expect(within(sheet).getByTestId("community-membership-price").textContent).toBe("USD 20 per month"));
+    expect(within(sheet).getByTestId("community-membership-period").textContent).toMatch(/^Renews on .*2026/);
+    // No higher tier: no Upgrade.
+    expect(within(sheet).queryByTestId("community-membership-upgrade")).toBeNull();
+    expect(within(sheet).getByTestId("community-membership-row-update-card").textContent).toBe("Update payment method");
+    await waitFor(() =>
+      expect(within(sheet).getByTestId("community-membership-row-downgrade-tier-basic").textContent).toBe("Switch to Basic at renewal"),
+    );
+    expect(within(sheet).getByTestId("community-membership-row-downgrade-tier-free")).toBeTruthy();
+
+    const cancel = within(sheet).getByTestId("community-membership-row-cancel");
+    expect(cancel.textContent).toBe("Cancel membership");
+    fireEvent.click(cancel);
+    const confirm = within(sheet).getByTestId("community-membership-cancel-confirm");
+    expect(confirm.getAttribute("role")).toBe("alertdialog");
+    expect(confirm.textContent).toContain("Cancel your membership?");
+    expect(confirm.textContent).toMatch(/You keep access until .*2026/);
+    // The row is replaced by the confirmation while it is open.
+    expect(within(sheet).queryByTestId("community-membership-row-cancel")).toBeNull();
+  });
+
+  it("a yearly subscription reads per year; an ending one says Ending and Ends on, with no way to cancel twice", async () => {
+    installAdapter([
+      meRoute(() => member("tier-gold", "Gold", { currentPeriodEnd: "2027-01-01T00:00:00.000Z", cancelAtPeriodEnd: true })),
+      mineRoute({ amount: 200, currency: "EUR", billingCycle: "year", cancelAtPeriodEnd: true }),
+      detailRoute(() => ({ tiers: [free, gold] })),
+    ]);
+    mount(<CommunityMembershipMenu open onOpenChange={() => {}} formatAmount={fmt} />, { user: account() });
+    const sheet = await screen.findByTestId("community-membership-menu");
+    await waitFor(() => expect(within(sheet).getByTestId("community-membership-price").textContent).toBe("EUR 200 per year"));
+    expect(within(sheet).getByTestId("community-membership-summary").textContent).toContain("Ending");
+    expect(within(sheet).getByTestId("community-membership-period").textContent).toMatch(/^Ends on /);
+    expect(within(sheet).queryByTestId("community-membership-row-cancel")).toBeNull();
+  });
+
+  it("before the price arrives, a paid tier still hides nothing it needs and a free one never shows a card row", async () => {
+    installAdapter([
+      meRoute(() => member("tier-free", "Free")),
+      // `/mine` never answers with a row for this membership.
+      get("/public/memberships/mine", () => []),
+      detailRoute(() => ({ tiers: [free] })),
+    ]);
+    mount(<CommunityMembershipMenu open onOpenChange={() => {}} />, { user: account() });
+    const sheet = await screen.findByTestId("community-membership-menu");
+    await waitFor(() => expect(within(sheet).getByTestId("community-membership-price").textContent).toBe("Free"));
+    expect(within(sheet).queryByTestId("community-membership-row-update-card")).toBeNull();
+  });
+});
+
+describe("the join sheet, email first", () => {
+  it("asks for an email only, with no Create account / Sign in pair, and a password link", async () => {
+    installAdapter([
+      post("/public/sessions/email/start", (req) => ({ status: "code_sent", email: req.body?.email })),
+      detailRoute(() => ({ tiers: [free], viewer: viewer({ state: "anonymous" }) })),
+    ]);
+    mount(<CommunityJoinSheet open onOpenChange={() => {}} />);
+    const sheet = await screen.findByTestId("community-join-sheet");
+    expect(within(sheet).getByRole("heading", { name: "Join Fan Club" })).toBeTruthy();
+    const form = await within(sheet).findByTestId("community-join-email");
+    expect(within(sheet).queryByRole("tab")).toBeNull();
+    expect(form.querySelector('input[type="password"]')).toBeNull();
+    expect(within(form).getByTestId("community-join-use-password").textContent).toBe("Use your password instead");
+
+    fireEvent.change(within(form).getByLabelText("Email"), { target: { value: "fan@example.com" } });
+    fireEvent.submit(form);
+    await waitFor(() => expect(within(sheet).getByText("We emailed a 6-digit code to fan@example.com.")).toBeTruthy());
+    expect(within(sheet).getByTestId("community-join-change-email").textContent).toBe("Use a different email");
+    expect(within(sheet).getByTestId("community-join-resend").textContent).toBe("Resend code");
+  });
+
+  it("the new-person step asks for a name and the terms, and only then", async () => {
+    installAdapter([
+      post("/public/sessions/email/start", (req) => ({ status: "code_sent", email: req.body?.email })),
+      post("/public/sessions/email/verify", () => ({ status: "needs_profile", ticket: "ab".repeat(32) })),
+      detailRoute(() => ({ tiers: [free], viewer: viewer({ state: "anonymous" }) })),
+    ]);
+    mount(<CommunityJoinSheet open onOpenChange={() => {}} />);
+    const sheet = await screen.findByTestId("community-join-sheet");
+    const form = await within(sheet).findByTestId("community-join-email");
+    fireEvent.change(within(form).getByLabelText("Email"), { target: { value: "new@example.com" } });
+    fireEvent.submit(form);
+    const code = await within(sheet).findByLabelText("6-digit code");
+    fireEvent.change(code, { target: { value: "123456" } });
+    fireEvent.submit(code.closest("form")!);
+    const profile = await within(sheet).findByTestId("community-join-profile");
+    expect(within(profile).getByLabelText("First name")).toBeTruthy();
+    expect(within(profile).getByLabelText("Last name")).toBeTruthy();
+    expect(within(profile).getByLabelText("I accept the Terms and Privacy Policy")).toBeTruthy();
+    expect(within(profile).getByTestId("community-join-start-again")).toBeTruthy();
+  });
+
+  it("Use your password instead shows the email and password sign-in, and a way back", async () => {
+    installAdapter([detailRoute(() => ({ tiers: [free], viewer: viewer({ state: "anonymous" }) }))]);
+    mount(<CommunityJoinSheet open onOpenChange={() => {}} />);
+    const sheet = await screen.findByTestId("community-join-sheet");
+    fireEvent.click(await within(sheet).findByTestId("community-join-use-password"));
+    expect(within(sheet).getByLabelText("Password")).toBeTruthy();
+    expect(within(sheet).queryByLabelText("First name")).toBeNull();
+    fireEvent.click(within(sheet).getByTestId("community-join-use-code"));
+    expect(await within(sheet).findByTestId("community-join-email")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,223 @@
+// @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 { CommunityWiki } from "../CommunityWiki";
+import { CommunityPublicWiki } from "../CommunityPublicWiki";
+import { CommunityRichText } from "../../community/CommunityRichText";
+import {
+  account,
+  calls,
+  get,
+  installAdapter,
+  restoreAdapter,
+  wrapper,
+} from "../../../headless/_tests/communityHarness";
+
+/**
+ * The wiki's markup side: the list beside the open page, a locked page's tiers
+ * and upgrade (through the community's upgrade sheet), the table of contents
+ * linking to anchored headings, and the About page's public pages opening in
+ * place.
+ */
+
+afterEach(() => {
+  cleanup();
+  restoreAdapter();
+});
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: ReactNode, opts: Parameters<typeof wrapper>[0] = { user: account() }) {
+  const Wrapper = wrapper(opts);
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const text = (value: string) => ({ type: "text", version: 1, text: value });
+const doc = (...children: unknown[]) => ({ root: { type: "root", version: 1, children } });
+
+const PAGES = [
+  { id: "p1", slug: "start-here", title: "Start here", isPublic: false, locked: false, unlockTiers: [], updatedAt: "" },
+  {
+    id: "p2",
+    slug: "vip-lounge",
+    title: "VIP lounge",
+    isPublic: false,
+    locked: true,
+    unlockTiers: [
+      { id: "tier-gold", name: "Gold" },
+      { id: "tier-plat", name: "Platinum" },
+    ],
+    updatedAt: "",
+  },
+  {
+    id: "p3",
+    slug: "community-guidelines",
+    title: "Community guidelines",
+    isPublic: true,
+    locked: false,
+    unlockTiers: [],
+    updatedAt: "",
+  },
+];
+
+const startHere = get("/public/communities/fan-club/wiki/start-here", () => ({
+  id: "p1",
+  title: "Start here",
+  slug: "start-here",
+  isPublic: false,
+  updatedAt: "",
+  content: doc(
+    { type: "heading", version: 1, tag: "h2", children: [text("Welcome")] },
+    { type: "paragraph", version: 1, children: [text("Glad you are here.")] },
+    { type: "heading", version: 1, tag: "h2", children: [text("Next steps")] },
+    {
+      type: "list",
+      version: 1,
+      listType: "bullet",
+      children: [{ type: "listitem", version: 1, children: [text("Say hello")] }],
+    },
+    { type: "horizontalrule", version: 1 },
+    { type: "kb-image", version: 1, src: "https://cdn.example.com/a.png", altText: "A map" },
+    { type: "kb-image", version: 1, src: "kb-private:abc", altText: "secret" },
+  ),
+}));
+
+describe("CommunityWiki (the tab)", () => {
+  it("opens the first readable page with a table of contents linking to its headings", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => PAGES), startHere]);
+    const { container } = mount(<CommunityWiki getPageHref={(page) => `/wiki/${page}`} />);
+    const page = await screen.findByTestId("community-wiki-page");
+    expect(within(page).getByRole("heading", { level: 1 }).textContent).toBe("Start here");
+
+    const toc = screen.getByTestId("community-wiki-toc");
+    expect(
+      within(toc)
+        .getAllByRole("link")
+        .map((a) => a.getAttribute("href")),
+    ).toEqual(["#welcome", "#next-steps"]);
+    expect(container.querySelector("#welcome")?.textContent).toBe("Welcome");
+    expect(container.querySelector("#next-steps")?.textContent).toBe("Next steps");
+    expect(within(page).getByText("Say hello")).toBeTruthy();
+    expect(page.querySelector("hr")).toBeTruthy();
+    // A public image renders; a private Knowledge Base reference has no address on a site.
+    expect(
+      within(page)
+        .getAllByRole("img")
+        .map((img) => img.getAttribute("alt")),
+    ).toEqual(["A map"]);
+  });
+
+  it("lists a locked page with its tiers, and upgrades through the community's sheet", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => PAGES)]);
+    const opened: (string | null | undefined)[] = [];
+    mount(
+      <CommunityUpgradeOpenerProvider value={{ openUpgrade: (tierId) => opened.push(tierId) }}>
+        <CommunityWiki pageSlug="vip-lounge" getPageHref={(page) => `/wiki/${page}`} />
+      </CommunityUpgradeOpenerProvider>,
+    );
+    const locked = await screen.findByTestId("community-wiki-locked");
+    expect(locked.textContent).toContain("This page is part of Gold, Platinum.");
+    fireEvent.click(within(locked).getByTestId("community-wiki-upgrade"));
+    expect(opened).toEqual(["tier-gold"]);
+    // A locked page is never fetched: the server would only say not found.
+    expect(calls("get", "/public/communities/fan-club/wiki/vip-lounge")).toHaveLength(0);
+  });
+
+  it("navigates through the host's router from the list", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => PAGES), startHere]);
+    const went: string[] = [];
+    mount(<CommunityWiki navigate={(href) => went.push(href)} getPageHref={(page) => `/wiki/${page}`} />);
+    const items = await screen.findAllByTestId("community-wiki-item");
+    fireEvent.click(within(items[2]).getByRole("link"));
+    expect(went).toEqual(["/wiki/community-guidelines"]);
+  });
+
+  it("says so when a page is not available", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/wiki", () => PAGES),
+      get("/public/communities/fan-club/wiki/gone", () => {
+        throw { status: 404, message: "Not found" };
+      }),
+    ]);
+    mount(<CommunityWiki pageSlug="gone" getPageHref={(page) => `/wiki/${page}`} />);
+    expect(await screen.findByText("This page isn't available to you.")).toBeTruthy();
+  });
+});
+
+describe("private wiki images", () => {
+  const privatePage = get("/public/communities/fan-club/wiki/start-here", () => ({
+    id: "p1",
+    title: "Start here",
+    slug: "start-here",
+    isPublic: false,
+    updatedAt: "",
+    content: doc(
+      { type: "kb-image", version: 1, src: "kbmedia:m-1", altText: "Floor plan" },
+      { type: "kb-image", version: 1, src: "kbmedia:m-2", altText: "Gone" },
+    ),
+  }));
+
+  it("shows a placeholder, then the signed image; a refused one is quietly unavailable", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/wiki", () => PAGES),
+      privatePage,
+      get("/public/communities/fan-club/wiki/start-here/media/m-1", () => ({
+        url: "https://signed.example.com/m-1",
+        expiresInSeconds: 600,
+      })),
+      get("/public/communities/fan-club/wiki/start-here/media/m-2", () => {
+        throw { status: 404, message: "Not found" };
+      }),
+    ]);
+    mount(<CommunityWiki getPageHref={(page) => `/wiki/${page}`} />);
+    expect((await screen.findAllByTestId("community-wiki-image-placeholder")).length).toBeGreaterThan(0);
+    const img = await screen.findByTestId("community-wiki-private-image");
+    expect(img.getAttribute("src")).toBe("https://signed.example.com/m-1");
+    expect(img.getAttribute("alt")).toBe("Floor plan");
+    expect((await screen.findByTestId("community-wiki-image-unavailable")).textContent).toBe("Image unavailable");
+  });
+
+  it("is never resolved outside the wiki: a post renders nothing for it", async () => {
+    installAdapter([]);
+    mount(<CommunityRichText body={doc({ type: "kb-image", version: 1, src: "kbmedia:m-1", altText: "x" })} />);
+    expect(screen.queryByRole("img")).toBeNull();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(calls("get", /\/media\//)).toHaveLength(0);
+  });
+});
+
+describe("CommunityPublicWiki (on the About page)", () => {
+  it("lists only the public pages, and opens one in place", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/wiki", () => PAGES),
+      get("/public/communities/fan-club/wiki/community-guidelines", () => ({
+        id: "p3",
+        title: "Community guidelines",
+        slug: "community-guidelines",
+        isPublic: true,
+        updatedAt: "",
+        content: doc({ type: "paragraph", version: 1, children: [text("Be kind.")] }),
+      })),
+    ]);
+    mount(<CommunityPublicWiki />, {});
+    const items = await screen.findAllByTestId("community-public-wiki-item");
+    expect(items.map((item) => item.textContent)).toEqual(["Community guidelines"]);
+    expect(calls("get", "/public/communities/fan-club/wiki/community-guidelines")).toHaveLength(0);
+    fireEvent.click(within(items[0]).getByRole("button", { name: "Community guidelines" }));
+    await waitFor(() => expect(screen.getByText("Be kind.")).toBeTruthy());
+  });
+
+  it("renders nothing when there are no public pages", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => [PAGES[0]])]);
+    mount(<CommunityPublicWiki />, {});
+    await waitFor(() => expect(calls("get", "/public/communities/fan-club/wiki")).toHaveLength(1));
+    expect(screen.queryByTestId("community-public-wiki")).toBeNull();
+  });
+});

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

@@ -8,3 +8,12 @@ export { CommunityHome, type CommunityHomeProps, type CommunityHomeTab } from ".
 export { CommunityUpgradeSheet, type CommunityUpgradeSheetProps } from "./CommunityUpgradeSheet";
 export { CommunityMembershipMenu, type CommunityMembershipMenuProps } from "./CommunityMembershipMenu";
 export { MyMembershipsList, type MyMembershipsListProps } from "./MyMembershipsList";
+export {
+  CommunityWiki,
+  CommunityWikiPageView,
+  type CommunityWikiProps,
+  type CommunityWikiPageViewProps,
+} from "./CommunityWiki";
+export { CommunityPublicWiki, type CommunityPublicWikiProps } from "./CommunityPublicWiki";
+export { CommunityClassroom, type CommunityClassroomProps } from "./CommunityClassroom";
+export { CommunityCalendar, type CommunityCalendarProps } from "./CommunityCalendar";