@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/headless/_tests/communityMembers.spec.tsx

@@ -0,0 +1,316 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { buildDirectoryParams } from "../../../data/queries/useCommunityMembers";
+import { mentionDirectoryParams, useCommunityMentionDirectory } from "../../../data/queries/useCommunity";
+import { COUNTRY_CENTROIDS, COUNTRY_CODES, countryName, countryOptions, isCountryCode } from "../community/countries";
+import {
+  memberGlobeMarkers,
+  memberGlobePoints,
+  memberLocationLabel,
+  memberMapCountries,
+  useCommunityMemberDirectory,
+} from "../community/useCommunityMembers";
+import { useMentionComposer } from "../community/useMentionComposer";
+import { useMemberHomeNav } from "../memberHome/useMemberHomeNav";
+import {
+  COMMUNITY,
+  PROFILE_ID,
+  account,
+  calls,
+  get,
+  installAdapter,
+  restoreAdapter,
+  viewer,
+  wrapper,
+} from "./communityHarness";
+
+/**
+ * The member directory and map on the site: the query string the directory
+ * sends, country names in the viewer's language, the globe's dots, where a
+ * member says they are, the @mention picker searching every member by what is
+ * typed, and the Members tab showing to members only.
+ */
+
+afterEach(restoreAdapter);
+
+const PAGE = (data: unknown[] = [], extra: Record<string, unknown> = {}) => ({
+  data,
+  total: data.length,
+  page: 1,
+  pageSize: 24,
+  hasNextPage: false,
+  ...extra,
+});
+
+describe("buildDirectoryParams", () => {
+  it("defaults to the most active members, page 1, 24 a page", () => {
+    expect(buildDirectoryParams()).toEqual({ sort: "active", page: 1, limit: 24 });
+  });
+
+  it("sends a trimmed search, a role, a level and a sort", () => {
+    expect(
+      buildDirectoryParams({ q: "  ada ", role: "moderator", minLevel: 3, sort: "points", page: 2, limit: 12 }),
+    ).toEqual({
+      q: "ada",
+      role: "moderator",
+      minLevel: 3,
+      sort: "points",
+      page: 2,
+      limit: 12,
+    });
+  });
+
+  it("drops what the server would refuse", () => {
+    expect(buildDirectoryParams({ q: "   ", role: "owner" as never, minLevel: 12, page: 0, limit: 500 })).toEqual({
+      sort: "active",
+      page: 1,
+      limit: 100,
+    });
+    expect(buildDirectoryParams({ minLevel: 0, limit: -3 })).toEqual({ sort: "active", page: 1, limit: 1 });
+    expect(buildDirectoryParams({ q: "x".repeat(200) }).q).toHaveLength(80);
+  });
+});
+
+describe("countries", () => {
+  it("names a country in the viewer's language", () => {
+    expect(countryName("DE", "en")).toBe("Germany");
+    expect(countryName("de", "de")).toBe("Deutschland");
+    expect(countryName(null)).toBeNull();
+  });
+
+  it("lists every code once, sorted by name in the locale", () => {
+    const options = countryOptions("en");
+    expect(options).toHaveLength(COUNTRY_CODES.length);
+    expect(new Set(COUNTRY_CODES).size).toBe(COUNTRY_CODES.length);
+    const names = options.map((o) => o.name);
+    expect([...names].sort(new Intl.Collator("en").compare)).toEqual(names);
+    expect(options.find((o) => o.code === "NG")?.name).toBe("Nigeria");
+  });
+
+  it("knows a code, whatever its case, and has a centre for every centred code it lists", () => {
+    expect(isCountryCode("gb")).toBe(true);
+    expect(isCountryCode("XX")).toBe(false);
+    for (const code of Object.keys(COUNTRY_CENTROIDS)) expect(COUNTRY_CODES).toContain(code);
+  });
+});
+
+describe("memberGlobePoints", () => {
+  it("places each country at its centre, merges repeats, drops unknown and empty, biggest first", () => {
+    const points = memberGlobePoints([
+      { countryCode: "de", members: 3 },
+      { countryCode: "NG", members: 10 },
+      { countryCode: "DE", members: 2 },
+      { countryCode: "XX", members: 5 },
+      { countryCode: "FR", members: 0 },
+    ]);
+    expect(points).toEqual([
+      { countryCode: "NG", latitude: COUNTRY_CENTROIDS.NG[0], longitude: COUNTRY_CENTROIDS.NG[1], members: 10 },
+      { countryCode: "DE", latitude: COUNTRY_CENTROIDS.DE[0], longitude: COUNTRY_CENTROIDS.DE[1], members: 5 },
+    ]);
+    expect(memberGlobePoints(undefined)).toEqual([]);
+  });
+
+  it("keeps a country with no known centre in the list, but not on the globe", () => {
+    const rows = [
+      { countryCode: "GU", members: 2 },
+      { countryCode: "NG", members: 1 },
+      { countryCode: "bad", members: 9 },
+    ];
+    expect(memberMapCountries(rows)).toEqual([
+      { countryCode: "GU", members: 2 },
+      { countryCode: "NG", members: 1 },
+    ]);
+    expect(memberGlobePoints(rows).map((p) => p.countryCode)).toEqual(["NG"]);
+  });
+
+  it("sizes dots by the square root of each country's share", () => {
+    const markers = memberGlobeMarkers([
+      { countryCode: "NG", latitude: 9.1, longitude: 8.7, members: 100 },
+      { countryCode: "DE", latitude: 51.2, longitude: 10.5, members: 25 },
+    ]);
+    expect(markers[0]).toEqual({ location: [9.1, 8.7], size: 0.12 });
+    expect(markers[1].size).toBeCloseTo(0.03 + 0.09 * 0.5);
+  });
+});
+
+describe("memberLocationLabel", () => {
+  it("joins city and country, or shows whichever is set", () => {
+    expect(memberLocationLabel({ city: "Berlin", countryCode: "DE" }, "en")).toBe("Berlin, Germany");
+    expect(memberLocationLabel({ city: " ", countryCode: "DE" }, "de")).toBe("Deutschland");
+    expect(memberLocationLabel({ city: "Lagos", countryCode: null })).toBe("Lagos");
+    expect(memberLocationLabel({ city: null, countryCode: null })).toBeNull();
+  });
+});
+
+describe("mention search", () => {
+  it("builds the member search from the typed text", () => {
+    expect(mentionDirectoryParams("ad")).toEqual({ q: "ad", limit: 10, sort: "active" });
+    expect(mentionDirectoryParams("")).toEqual({ limit: 10, sort: "active" });
+    expect(mentionDirectoryParams(undefined)).toEqual({ limit: 10, sort: "active" });
+  });
+
+  it("asks nothing until there is an @token, then searches the members endpoint with q", async () => {
+    installAdapter([
+      get("/public/community/members", (req) =>
+        PAGE([
+          {
+            accountId: "a-2",
+            displayName: `Found ${req.params?.q ?? "all"}`,
+            avatarUrl: null,
+            level: 2,
+            points: 40,
+            firstName: "Ada",
+            lastName: null,
+          },
+        ]),
+      ),
+    ]);
+    const { result, rerender } = renderHook(({ q }: { q?: string }) => useCommunityMentionDirectory(q), {
+      wrapper: wrapper({ user: account() }),
+      initialProps: {},
+    });
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    expect(calls("get", "/public/community/members")).toHaveLength(0);
+
+    rerender({ q: "ad" });
+    await waitFor(() => expect(result.current.data?.[0]?.displayName).toBe("Found ad"));
+    expect(calls("get", "/public/community/members").at(-1)?.params).toEqual({
+      profileId: PROFILE_ID,
+      communityId: COMMUNITY.id,
+      q: "ad",
+      limit: 10,
+      sort: "active",
+    });
+    // The composers read the leaderboard entry shape they always have.
+    expect(result.current.data?.[0]).toEqual({
+      accountId: "a-2",
+      displayName: "Found ad",
+      avatarUrl: null,
+      points: 40,
+      level: 2,
+      firstName: "Ada",
+      lastName: null,
+    });
+    expect(calls("get", "/public/community/leaderboard")).toHaveLength(0);
+  });
+
+  it("feeds the composer's suggestions from what the member types", async () => {
+    installAdapter([
+      get("/public/community/members", () =>
+        PAGE([
+          {
+            accountId: "a-9",
+            displayName: "Zara",
+            avatarUrl: null,
+            level: 1,
+            points: 0,
+            firstName: null,
+            lastName: null,
+          },
+        ]),
+      ),
+    ]);
+    const { result } = renderHook(() => useMentionComposer(), { wrapper: wrapper({ user: account() }) });
+    act(() => result.current.onTextChange("hi @za", 6));
+    await waitFor(() => expect(result.current.suggestions.map((s) => s.name)).toEqual(["Zara"]));
+    // Every request carried what was typed: none went out for the whole directory first.
+    expect(calls("get", "/public/community/members").map((r) => r.params?.q)).toEqual(["za"]);
+  });
+});
+
+describe("useCommunityMemberDirectory", () => {
+  it("sends the search once typing settles, and goes back to page 1 on a filter", async () => {
+    installAdapter([get("/public/community/members", () => PAGE([], { hasNextPage: true, total: 60 }))]);
+    const { result } = renderHook(() => useCommunityMemberDirectory(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.hasNextPage).toBe(true));
+    act(() => result.current.nextPage());
+    await waitFor(() => expect(calls("get", "/public/community/members").some((r) => r.params?.page === 2)).toBe(true));
+
+    act(() => result.current.setSearch("ada"));
+    await waitFor(() =>
+      expect(calls("get", "/public/community/members").some((r) => r.params?.q === "ada" && r.params?.page === 1)).toBe(
+        true,
+      ),
+    );
+
+    act(() => result.current.setRole("moderator"));
+    await waitFor(() =>
+      expect(
+        calls("get", "/public/community/members").some(
+          (r) => r.params?.role === "moderator" && r.params?.q === "ada" && r.params?.page === 1,
+        ),
+      ).toBe(true),
+    );
+    expect(result.current.filtered).toBe(true);
+  });
+
+  it("loads the map only once the map is shown, and shapes it into dots", async () => {
+    installAdapter([
+      get("/public/community/members", () => PAGE()),
+      get("/public/community/members/map", () => [
+        { countryCode: "NG", members: 4 },
+        { countryCode: "GB", members: 2 },
+      ]),
+    ]);
+    const { result } = renderHook(() => useCommunityMemberDirectory(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(calls("get", "/public/community/members/map")).toHaveLength(0);
+    act(() => result.current.setView("map"));
+    await waitFor(() => expect(result.current.mapPoints.map((p) => p.countryCode)).toEqual(["NG", "GB"]));
+    expect(result.current.mapMembers).toBe(6);
+  });
+
+  it("says when the viewer is not a member", async () => {
+    installAdapter([
+      get("/public/community/members", () => {
+        throw { status: 403, message: "Forbidden" };
+      }),
+    ]);
+    const { result } = renderHook(() => useCommunityMemberDirectory(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.forbidden).toBe(true));
+  });
+});
+
+describe("the Members tab in the member home nav", () => {
+  it("shows to a member", async () => {
+    installAdapter([
+      get(/^\/public\/communities\/fan-club\/me$/, () => viewer({ state: "member", canInteract: true })),
+    ]);
+    const { result } = renderHook(() => useMemberHomeNav({ currentPath: "/i/communities/fan-club/home/members" }), {
+      wrapper: wrapper({ user: account() }),
+    });
+    await waitFor(() => expect(result.current.visibleItems.map((i) => i.key)).toContain("members"));
+    expect(result.current.activeKey).toBe("members");
+  });
+
+  it("stays hidden signed out", async () => {
+    installAdapter([]);
+    const { result } = renderHook(() => useMemberHomeNav({}), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isReady).toBe(true));
+    expect(result.current.visibleItems.map((i) => i.key)).not.toContain("members");
+  });
+
+  it("shows Calendar and Classroom to a member by the same rule, with no call needed", async () => {
+    installAdapter([
+      get(/^\/public\/communities\/fan-club\/me$/, () => viewer({ state: "member", canInteract: true })),
+    ]);
+    const { result } = renderHook(() => useMemberHomeNav({ currentPath: "/i/communities/fan-club/home/classroom" }), {
+      wrapper: wrapper({ user: account() }),
+    });
+    await waitFor(() => expect(result.current.visibleItems.map((i) => i.key)).toContain("classroom"));
+    expect(result.current.visibleItems.map((i) => i.key)).toContain("calendar");
+    expect(result.current.activeKey).toBe("classroom");
+    expect(result.current.items.find((i) => i.key === "classroom")?.href).toBe("/i/communities/fan-club/home/classroom");
+  });
+
+  it("hides Calendar and Classroom from someone who is not a member", async () => {
+    installAdapter([get(/^\/public\/communities\/fan-club\/me$/, () => viewer({ state: "none" }))]);
+    const { result } = renderHook(() => useMemberHomeNav({}), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.isReady).toBe(true));
+    await waitFor(() => expect(calls("get", /^\/public\/communities\/fan-club\/me$/).length).toBeGreaterThan(0));
+    const keys = result.current.visibleItems.map((i) => i.key);
+    expect(keys).not.toContain("calendar");
+    expect(keys).not.toContain("classroom");
+  });
+});