@tribe-nest/forge 3.59.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/CommunityPages.spec.tsx

@@ -0,0 +1,102 @@
+// @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 { CommunityAbout } from "../CommunityAbout";
+import { CommunityHome } from "../CommunityHome";
+import { CommunitiesList } from "../CommunitiesList";
+import {
+  COMMUNITY,
+  account,
+  detailRoute,
+  get,
+  installAdapter,
+  meRoute,
+  restoreAdapter,
+  tier,
+  viewer,
+  wrapper,
+} from "../../../headless/_tests/communityHarness";
+
+/**
+ * The styled community pages are their headless hooks plus markup. These pin
+ * the markup's side of the contract: the About page's one button and the
+ * in-place sheet, the home header (tier badge, Upgrade, Membership), and the
+ * list linking to About pages.
+ */
+
+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", benefits: [{ id: "b1", title: "The feed" }] as never });
+
+describe("CommunityAbout", () => {
+  it("shows the community, its tiers, and Join free that opens the sheet in place", async () => {
+    installAdapter([detailRoute(() => ({ tiers: [free], viewer: viewer({ state: "anonymous" }) }))]);
+    mount(<CommunityAbout />);
+    expect(await screen.findByRole("heading", { name: "Fan Club" })).toBeTruthy();
+    expect((await screen.findAllByTestId("community-about-tier"))[0].textContent).toContain("The feed");
+    const join = await screen.findByTestId("community-about-primary");
+    await waitFor(() => expect(join.textContent).toBe("Join free"));
+    fireEvent.click(join);
+    expect(await screen.findByTestId("community-join-sheet")).toBeTruthy();
+    expect(window.location.pathname).not.toContain("/i/account");
+  });
+
+  it("opens the sheet straight away on an invite", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/invite", () => ({ kind: "email", state: "expired", invitedEmail: null, tier: null })),
+      detailRoute(() => ({ tiers: [free] })),
+    ]);
+    mount(<CommunityAbout invite="tok" />);
+    const sheet = await screen.findByTestId("community-join-sheet");
+    expect((await within(sheet).findByTestId("community-join-invite-problem")).textContent).toContain("expired");
+  });
+});
+
+describe("CommunityHome", () => {
+  it("renders the header with the tier badge, Upgrade and Membership, then the body", async () => {
+    installAdapter([
+      meRoute(() =>
+        viewer({
+          state: "member",
+          membership: { id: "m-1", tierId: "tier-free", tierName: "Free", status: "active", cancelAtPeriodEnd: false, currentPeriodEnd: null, pendingDowngradeTierId: null },
+          upgradeTiers: [{ id: "tier-gold", name: "Gold", priceMonthly: 20, priceYearly: null }],
+        }),
+      ),
+      detailRoute(() => ({ tiers: [free] })),
+    ]);
+    mount(
+      <CommunityHome tab="posts">
+        <p data-testid="body">feed</p>
+      </CommunityHome>,
+      { user: account() },
+    );
+    expect((await screen.findByTestId("community-home-tier-badge")).textContent).toBe("Free");
+    expect(await screen.findByTestId("community-home-upgrade")).toBeTruthy();
+    expect(screen.getByTestId("community-home-membership")).toBeTruthy();
+    expect(screen.getByTestId("body").textContent).toBe("feed");
+    fireEvent.click(screen.getByTestId("community-home-upgrade"));
+    expect(await screen.findByTestId("community-upgrade-sheet")).toBeTruthy();
+  });
+});
+
+describe("CommunitiesList", () => {
+  it("links each community to its About page", async () => {
+    installAdapter([get("/public/communities", () => [COMMUNITY])]);
+    const went: string[] = [];
+    mount(<CommunitiesList navigate={(href) => went.push(href)} />, { community: null });
+    fireEvent.click(await screen.findByTestId("community-card"));
+    expect(went).toEqual(["/i/communities/fan-club"]);
+  });
+});