@tribe-nest/forge 3.26.0 → 3.31.0

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

@@ -0,0 +1,281 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+import { CommunityComposer, type CommunityComposerProps } from "../CommunityComposer";
+import { ForgeClientProvider } from "../../../../provider/ForgeProvider";
+import { ForgeThemeProvider, defaultForgeTheme } from "../../../theme/ForgeThemeProvider";
+
+/**
+ * The composer's open/close behaviour, rendered for real.
+ *
+ * ## What is actually at stake here
+ *
+ * The space feed's post box is closed by default, so the ONLY way a member
+ * reaches the editor is the affordance these tests click. Two things can go
+ * wrong and neither is visible to the type system:
+ *
+ * 1. Opening without focusing. The member clicks, the box unfolds, and the
+ *    caret is nowhere. Writing costs two clicks instead of one and it reads as
+ *    a bug every single time.
+ * 2. Closing by unmounting. The DOM inside the editor IS the draft, so a
+ *    conditional render deletes a half-written post silently, with no undo. The
+ *    fix is invisible in a screenshot and a refactor can undo it by accident,
+ *    which is exactly why it is pinned here.
+ *
+ * There is a third, opposite failure: collapsing a composer the member DID ask
+ * for. A reply box summoned by clicking "Reply" must be open the instant it
+ * mounts, so the last test asserts the non-collapsible path is untouched.
+ *
+ * No `profileId` is provided, so the mention-directory query is disabled and
+ * nothing here reaches the network.
+ */
+
+afterEach(cleanup);
+
+function wrap(children: ReactNode) {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return (
+    <QueryClientProvider client={client}>
+      <ForgeClientProvider apiUrl="http://localhost/api">
+        <ForgeThemeProvider theme={defaultForgeTheme}>{children}</ForgeThemeProvider>
+      </ForgeClientProvider>
+    </QueryClientProvider>
+  );
+}
+
+function renderComposer(props: Partial<CommunityComposerProps> = {}) {
+  const onSubmit = props.onSubmit ?? vi.fn().mockResolvedValue(undefined);
+  const utils = render(wrap(<CommunityComposer onSubmit={onSubmit} {...props} />));
+  return { ...utils, onSubmit };
+}
+
+/** The editor, whether or not it is currently exposed. */
+const editorEl = (container: HTMLElement) =>
+  container.querySelector<HTMLElement>(".forge-community-composer-editable")!;
+
+/** Type into the contentEditable the way the member does: content, then input. */
+function type(container: HTMLElement, html: string) {
+  const editor = editorEl(container);
+  editor.innerHTML = html;
+  fireEvent.input(editor);
+}
+
+describe("CommunityComposer, collapsed by default", () => {
+  it("renders no editor until the affordance is used, and the affordance says what it opens", () => {
+    const { container } = renderComposer({
+      collapsible: true,
+      collapsedLabel: "Share something with the community",
+    });
+
+    // `getByRole` reads the accessibility tree, so a `display: none` editor is
+    // absent from it exactly as it is absent for a member.
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(screen.getByRole("button", { name: /share something with the community/i })).toBeTruthy();
+
+    // Hidden, not gone: the draft has somewhere to live from the first render.
+    expect(editorEl(container)).toBeTruthy();
+  });
+
+  it("opens on click and puts the caret in the editor, so writing is one click", () => {
+    const { container } = renderComposer({ collapsible: true, collapsedLabel: "Write a reply" });
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+
+    const editor = editorEl(container);
+    expect(screen.getByRole("textbox")).toBe(editor);
+    expect(document.activeElement).toBe(editor);
+  });
+
+  it("focuses the title first on a forum post, because the title is what is typed first", () => {
+    renderComposer({ collapsible: true, withTitle: true, collapsedLabel: "Start a discussion" });
+
+    fireEvent.click(screen.getByRole("button", { name: /start a discussion/i }));
+
+    expect(document.activeElement).toBe(screen.getByPlaceholderText("Title"));
+  });
+
+  it("hands open/closed to a controlled parent instead of keeping a second copy", () => {
+    const onOpenChange = vi.fn();
+    const { rerender } = render(
+      wrap(
+        <CommunityComposer
+          collapsible
+          open={false}
+          onOpenChange={onOpenChange}
+          collapsedLabel="Write a post"
+          onSubmit={vi.fn().mockResolvedValue(undefined)}
+        />,
+      ),
+    );
+
+    // Closed by the parent: clicking reports upward and changes nothing locally.
+    fireEvent.click(screen.getByRole("button", { name: /write a post/i }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(screen.queryByRole("textbox")).toBeNull();
+
+    rerender(
+      wrap(
+        <CommunityComposer
+          collapsible
+          open
+          onOpenChange={onOpenChange}
+          collapsedLabel="Write a post"
+          onSubmit={vi.fn().mockResolvedValue(undefined)}
+        />,
+      ),
+    );
+    expect(screen.getByRole("textbox")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
+  });
+});
+
+describe("CommunityComposer, closing keeps the draft", () => {
+  it("keeps the text, and says so, rather than throwing it away on Close", () => {
+    const { container } = renderComposer({ collapsible: true, collapsedLabel: "Write a reply" });
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    type(container, "half a thought about the new record");
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+
+    // Closed to the member.
+    expect(screen.queryByRole("textbox")).toBeNull();
+    // The words are still there, and the affordance admits it.
+    expect(editorEl(container).textContent).toBe("half a thought about the new record");
+    expect(screen.getByRole("button", { name: /continue your draft/i })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^write a reply$/i })).toBeNull();
+  });
+
+  it("reopens on the draft with the caret in it", () => {
+    const { container } = renderComposer({ collapsible: true, collapsedLabel: "Write a reply" });
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    type(container, "unfinished");
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    fireEvent.click(screen.getByRole("button", { name: /continue your draft/i }));
+
+    const editor = editorEl(container);
+    expect(screen.getByRole("textbox")).toBe(editor);
+    expect(editor.textContent).toBe("unfinished");
+    expect(document.activeElement).toBe(editor);
+  });
+
+  it("keeps a forum title across a close too", () => {
+    renderComposer({ collapsible: true, withTitle: true, collapsedLabel: "Start a discussion" });
+
+    fireEvent.click(screen.getByRole("button", { name: /start a discussion/i }));
+    fireEvent.change(screen.getByPlaceholderText("Title"), { target: { value: "Tour dates" } });
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+
+    expect(screen.getByRole("button", { name: /continue your draft/i })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: /continue your draft/i }));
+    expect(screen.getByPlaceholderText("Title")).toHaveProperty("value", "Tour dates");
+  });
+
+  it("offers no Discard when there is nothing to discard", () => {
+    renderComposer({ collapsible: true, collapsedLabel: "Write a reply" });
+
+    expect(screen.queryByRole("button", { name: "Discard" })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+
+    // Opened and closed again without typing: still nothing to warn about.
+    expect(screen.queryByRole("button", { name: "Discard" })).toBeNull();
+    expect(screen.getByRole("button", { name: /^write a reply$/i })).toBeTruthy();
+  });
+
+  it("only discards when it is asked for twice, and Keep it changes nothing", () => {
+    const { container } = renderComposer({ collapsible: true, collapsedLabel: "Write a reply" });
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    type(container, "words worth keeping");
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+
+    // First ask: a warning that has to be read, and the draft untouched.
+    fireEvent.click(screen.getByRole("button", { name: "Discard" }));
+    expect(screen.getByText(/cannot be brought back/i)).toBeTruthy();
+    expect(editorEl(container).textContent).toBe("words worth keeping");
+
+    // Backing out leaves it exactly where it was.
+    fireEvent.click(screen.getByRole("button", { name: "Keep it" }));
+    expect(editorEl(container).textContent).toBe("words worth keeping");
+    expect(screen.getByRole("button", { name: /continue your draft/i })).toBeTruthy();
+
+    // Asked again and confirmed: now it goes.
+    fireEvent.click(screen.getByRole("button", { name: "Discard" }));
+    fireEvent.click(screen.getByRole("button", { name: "Discard" }));
+    expect(editorEl(container).textContent).toBe("");
+    expect(screen.getByRole("button", { name: /^write a reply$/i })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /continue your draft/i })).toBeNull();
+  });
+});
+
+describe("CommunityComposer, posting", () => {
+  it("submits the draft, clears it and folds away", async () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    const { container } = renderComposer({
+      collapsible: true,
+      collapsedLabel: "Write a reply",
+      submitLabel: "Reply",
+      onSubmit,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    type(container, "posted for real");
+    fireEvent.click(screen.getByRole("button", { name: "Reply" }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    expect(onSubmit.mock.calls[0][0]).toMatchObject({ attachments: [], mentionedAccountIds: [] });
+
+    await waitFor(() => expect(screen.queryByRole("textbox")).toBeNull());
+    // Nothing was lost, because there is nothing left: the post went out.
+    expect(editorEl(container).textContent).toBe("");
+    expect(screen.getByRole("button", { name: /^write a reply$/i })).toBeTruthy();
+  });
+
+  it("stays open with the draft intact when publishing fails", async () => {
+    const onSubmit = vi.fn().mockRejectedValue({ response: { data: { message: "Space is locked." } } });
+    const { container } = renderComposer({
+      collapsible: true,
+      collapsedLabel: "Write a reply",
+      submitLabel: "Reply",
+      onSubmit,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    type(container, "this will not land");
+    fireEvent.click(screen.getByRole("button", { name: "Reply" }));
+
+    expect(await screen.findByText("Space is locked.")).toBeTruthy();
+    expect(screen.getByRole("textbox")).toBeTruthy();
+    expect(editorEl(container).textContent).toBe("this will not land");
+  });
+});
+
+describe("CommunityComposer, a box the member asked for", () => {
+  it("is open on mount and has no way to collapse itself", () => {
+    const onCancel = vi.fn();
+    renderComposer({ placeholder: "Reply to Ada…", submitLabel: "Reply", onCancel });
+
+    // No affordance, no Close: it is already the thing the member wanted.
+    expect(screen.getByRole("textbox")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /reply to ada/i })).toBeNull();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
+  });
+
+  it("stays open while it is typed into", () => {
+    const { container } = renderComposer({ placeholder: "Reply to Ada…", submitLabel: "Reply" });
+
+    type(container, "still here");
+    expect(screen.getByRole("textbox")).toBeTruthy();
+    expect(editorEl(container).textContent).toBe("still here");
+  });
+});

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

@@ -0,0 +1,175 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { CommunityPostDetail } from "../CommunityPostDetail";
+import { ForgeClientProvider } from "../../../../provider/ForgeProvider";
+import { ForgeThemeProvider, defaultForgeTheme } from "../../../theme/ForgeThemeProvider";
+
+/**
+ * The thread view has TWO composers with opposite requirements, and this file
+ * exists because the obvious change breaks one of them.
+ *
+ * - The top-level reply box is unsolicited, so it starts closed.
+ * - The box under a reply was summoned by a click on "Reply", so collapsing it
+ *   would eat that click and the member would have to press it again.
+ *
+ * And the seam between them: opening a nested reply box hides the top-level one.
+ * It used to be UNMOUNTED there, which meant a member who was half way through
+ * a top-level reply, then answered someone else, came back to an empty box.
+ */
+
+vi.mock("../../../headless/community/useCommunityThread", () => ({
+  useCommunityThread: () => threadStub,
+}));
+
+const author = (name: string, accountId: string) => ({
+  accountId,
+  firstName: name,
+  lastName: "",
+  displayName: name,
+  avatarUrl: null,
+  level: 1,
+});
+
+const text = (value: string) => ({
+  root: { type: "root", children: [{ type: "paragraph", children: [{ type: "text", text: value }] }] },
+});
+
+const reply = (id: string, name: string, body: string) => ({
+  id,
+  postId: "post-1",
+  profileId: "profile-1",
+  authorAccountId: `acct-${id}`,
+  parentReplyId: null,
+  body: text(body),
+  bodyText: body,
+  createdAt: new Date("2026-08-01T10:00:00Z").toISOString(),
+  author: author(name, `acct-${id}`),
+  media: [],
+  reactions: [],
+});
+
+let threadStub: any;
+
+function mountThread({ isLocked = false } = {}) {
+  const replies = [reply("r1", "Ada", "first reply")];
+  threadStub = {
+    post: {
+      id: "post-1",
+      spaceId: "space-1",
+      profileId: "profile-1",
+      authorAccountId: "acct-owner",
+      title: "Tour dates",
+      body: text("Where should we play next?"),
+      bodyText: "Where should we play next?",
+      isPinned: false,
+      isLocked,
+      replyCount: replies.length,
+      reactionCount: 0,
+      lastActivityAt: null,
+      createdAt: new Date("2026-08-01T09:00:00Z").toISOString(),
+      author: author("Owner", "acct-owner"),
+      media: [],
+      reactions: [],
+    },
+    postLoading: false,
+    postError: null,
+    replies,
+    replyTree: replies.map((r) => ({ reply: r, children: [], depth: 0 })),
+    repliesLoading: false,
+    fetchNextPage: vi.fn(),
+    hasMore: false,
+    currentAccountId: "acct-me",
+    createReply: { mutateAsync: vi.fn().mockResolvedValue(undefined) },
+    react: vi.fn(),
+  };
+
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  return render(
+    <QueryClientProvider client={client}>
+      <ForgeClientProvider apiUrl="http://localhost/api">
+        <ForgeThemeProvider theme={defaultForgeTheme}>
+          <CommunityPostDetail postId="post-1" />
+        </ForgeThemeProvider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+/** Every editor on the page, exposed or not. */
+const editors = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll<HTMLElement>(".forge-community-composer-editable"));
+
+/**
+ * The "Reply" ACTION under Ada's reply. The top-level composer's submit button
+ * carries the same word and sits earlier in the document once it is open, so
+ * this takes the last one rather than the first.
+ */
+const replyToAda = () => {
+  const all = screen.getAllByRole("button", { name: "Reply" });
+  return all[all.length - 1];
+};
+
+afterEach(cleanup);
+
+describe("CommunityPostDetail composers", () => {
+  it("starts the top-level reply box closed, behind an affordance", () => {
+    mountThread();
+
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(screen.getByRole("button", { name: /write a reply/i })).toBeTruthy();
+  });
+
+  it("opens a reply box that STAYS open when Reply is clicked on a reply", () => {
+    mountThread();
+
+    fireEvent.click(replyToAda());
+
+    // One editor exposed, and it is the one that was just asked for: it carries
+    // the addressee's name in its placeholder.
+    const exposed = screen.getAllByRole("textbox");
+    expect(exposed).toHaveLength(1);
+    expect(exposed[0].getAttribute("data-placeholder")).toBe("Reply to Ada…");
+
+    // It offers Cancel (abandon this reply), never Close (fold away): a box the
+    // member summoned does not get to collapse itself out from under them.
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull();
+  });
+
+  it("keeps a half-written top-level reply while the member answers someone else", () => {
+    const { container } = mountThread();
+
+    // Start a top-level reply and get some words down.
+    fireEvent.click(screen.getByRole("button", { name: /write a reply/i }));
+    const topLevel = editors(container)[0];
+    topLevel.innerHTML = "my own thought";
+    fireEvent.input(topLevel);
+
+    // Then answer Ada instead.
+    fireEvent.click(replyToAda());
+    expect(screen.getAllByRole("textbox")).toHaveLength(1);
+
+    // The top-level box is hidden, NOT unmounted, so the words survive.
+    expect(editors(container)[0]).toBe(topLevel);
+    expect(topLevel.textContent).toBe("my own thought");
+
+    // Back out of the nested reply and it is there, still open, still written in.
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    const exposed = screen.getAllByRole("textbox");
+    expect(exposed).toHaveLength(1);
+    expect(exposed[0]).toBe(topLevel);
+    expect(topLevel.textContent).toBe("my own thought");
+  });
+
+  it("offers no composer at all on a locked post", () => {
+    mountThread({ isLocked: true });
+
+    expect(screen.getByText(/replies are closed/i)).toBeTruthy();
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(screen.queryByRole("button", { name: /write a reply/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Reply" })).toBeNull();
+  });
+});