@gogitcms/design-system 0.16.0-next.1 → 0.16.0-next.10

package/src/__tests__/ContentBrowser.historycollab.test.tsx

@@ -0,0 +1,433 @@
+// Restoring a field from a past version, in a live session.
+//
+// In collab the shared document is the source of truth: every collab control
+// prefers its binding to the value the host passes in. So a restore written only
+// to local form state was displayed for one frame and then overwritten by the
+// CRDT's unchanged value — the field visibly snapped back, and nothing about the
+// restore reached the room or the peers in it.
+
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import {
+  ContentBrowser,
+  type CmsEntry,
+  type CmsNavSection,
+  type CollabApi,
+  type CollabRegister,
+  type CollabText,
+  type FieldSlotArgs,
+} from "../components/ContentBrowser";
+import type { DocumentChange } from "../components/ChangeDetail";
+import type { HistoryApi } from "../history";
+import { refreshDrafts } from "../components/documentDrafts";
+
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+/**
+ * An in-memory stand-in for @gogitcms/realtime's DocCollab, seeded with what the
+ * room already holds. Bindings are memoized per path and the empty peer list is
+ * shared, because useSyncExternalStore re-renders until a snapshot is stable.
+ */
+function fakeCollab(seed: Record<string, unknown> = {}) {
+  const values = new Map<string, unknown>(Object.entries(seed));
+  const listeners = new Map<string, Set<() => void>>();
+  const noPeers: never[] = [];
+
+  const notify = (path: string) => listeners.get(path)?.forEach((l) => l());
+  const listen = (path: string, cb: () => void) => {
+    let set = listeners.get(path);
+    if (!set) listeners.set(path, (set = new Set()));
+    set.add(cb);
+    return () => void set!.delete(cb);
+  };
+
+  const textCache = new Map<string, CollabText>();
+  const text = (path: string): CollabText => {
+    let b = textCache.get(path);
+    if (!b) {
+      textCache.set(path, (b = {
+        get: () => String(values.get(path) ?? ""),
+        set: (next) => { values.set(path, next); notify(path); },
+        peers: () => noPeers,
+        subscribe: (cb) => listen(path, cb),
+      }));
+    }
+    return b;
+  };
+
+  const regCache = new Map<string, CollabRegister>();
+  const register = (path: string): CollabRegister => {
+    let b = regCache.get(path);
+    if (!b) {
+      regCache.set(path, (b = {
+        get: () => values.get(path),
+        set: (next) => { values.set(path, next); notify(path); },
+        subscribe: (cb) => listen(path, cb),
+      }));
+    }
+    return b;
+  };
+
+  const collab: CollabApi = {
+    text, register,
+    setFocus: () => {},
+    peersAt: () => noPeers,
+    peersUnder: () => noPeers,
+    participants: () => noPeers,
+    awarenessVersion: () => 0,
+    subscribeAwareness: () => () => {},
+    ydoc: {},
+    awareness: {},
+  };
+  return { collab, room: values };
+}
+
+// A restore commits, and committing records a draft. Without clearing them each
+// test seeds its form from the PREVIOUS test's restore — which reads as a field
+// that was already rolled back and so has nothing left to write.
+beforeEach(() => {
+  localStorage.clear();
+  refreshDrafts();
+});
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const version = {
+  sha: "3b7de1098877",
+  shortSha: "3b7de10",
+  message: "Draft the post",
+  authorName: "Ada",
+  authoredAt: "2026-02-01T12:00:00Z",
+  url: "",
+  filesChanged: 1,
+};
+
+function makeApi(detail: DocumentChange): HistoryApi {
+  return { list: jest.fn(async () => [version]), get: jest.fn(async () => detail) };
+}
+
+async function openHistory(entry: CmsEntry, detail: DocumentChange, renderField?: (a: FieldSlotArgs) => React.ReactNode) {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={jest.fn()}
+        entries={[entry]}
+        selectedEntryId={entry.id}
+        onSelectEntry={jest.fn()}
+        userInitials="ED"
+        onSaveEntry={jest.fn(async () => {})}
+        renderField={renderField}
+        history={makeApi(detail)}
+      />,
+    ),
+  );
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+  await screen.findByTestId("change-detail");
+}
+
+// The regression, end to end: the restored value has to be what the control
+// shows once the CRDT has had its say — not for one frame before it.
+test("a restored string lands in the room, and stays on screen", async () => {
+  const { collab, room } = fakeCollab({ status: "published" });
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "", collab,
+    fields: [{ name: "status", type: "string", label: "Status", value: "published" }],
+  };
+  await openHistory(entry, {
+    path: "posts/a.md", status: "M", label: "Alpha", added: 1, removed: 1,
+    fields: [{ name: "status", kind: "changed", before: "draft", after: "published" }],
+  });
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  // Written where a string lives — the Y.Text, which is what the control reads.
+  expect(room.get("status")).toBe("draft");
+  await waitFor(() => expect(screen.getByDisplayValue("draft")).toBeInTheDocument());
+});
+
+// Which shared type a value lives in follows its shape, mirroring what the
+// server seeds: a string is a text, everything else is a register. Writing to
+// the wrong one is not an error anyone sees — it is a value that lands where
+// nothing is looking.
+test("non-string values restore into the register, not the text", async () => {
+  const { collab, room } = fakeCollab({ weight: 20, tags: ["b"], live: true });
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "", collab,
+    fields: [
+      { name: "weight", type: "integer", value: 20 },
+      { name: "tags", type: "array", of: "string", value: ["b"] },
+      { name: "live", type: "boolean", value: true },
+    ],
+  };
+  await openHistory(entry, {
+    path: "posts/a.md", status: "M", label: "Alpha", added: 1, removed: 1,
+    fields: [
+      { name: "weight", kind: "changed", before: 10, after: 20 },
+      { name: "tags", kind: "changed", before: ["a"], after: ["b"] },
+      { name: "live", kind: "changed", before: false, after: true },
+    ],
+  });
+
+  fireEvent.click(screen.getByTestId("restore-field-weight"));
+  fireEvent.click(screen.getByTestId("restore-field-tags"));
+  fireEvent.click(screen.getByTestId("restore-field-live"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  expect(room.get("weight")).toBe(10);
+  expect(room.get("tags")).toEqual(["a"]);
+  expect(room.get("live")).toBe(false);
+});
+
+// A group's children are addressed by dotted path in the room, exactly as the
+// server writes them — a group restored as one object still has to reach the
+// individual leaves its controls read.
+test("a restored group writes its children at their dotted paths", async () => {
+  const { collab, room } = fakeCollab({ "seo.title": "New", "seo.weight": 2 });
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "", collab,
+    fields: [{
+      name: "seo", type: "object", component: "group",
+      fields: [
+        { name: "title", type: "string", value: "New" },
+        { name: "weight", type: "integer", value: 2 },
+      ],
+      value: { title: "New", weight: 2 },
+    }],
+  };
+  await openHistory(entry, {
+    path: "posts/a.md", status: "M", label: "Alpha", added: 1, removed: 1,
+    fields: [{
+      name: "seo", kind: "changed",
+      before: { title: "Old", weight: 1 },
+      after: { title: "New", weight: 2 },
+    }],
+  });
+
+  fireEvent.click(screen.getByTestId("restore-field-seo"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  expect(room.get("seo.title")).toBe("Old");
+  expect(room.get("seo.weight")).toBe(1);
+});
+
+// Only the new value's leaves say what to write; only the old value's leaves say
+// what to CLEAR. A group that loses a child would otherwise keep a shared value
+// nobody can see any more.
+test("leaves the restored version does not have are cleared in the room", async () => {
+  const { collab, room } = fakeCollab({ "seo.title": "New", "seo.blurb": "extra", subtitle: "here" });
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "", collab,
+    fields: [
+      { name: "seo", type: "object", component: "group", fields: [{ name: "title", type: "string", value: "New" }], value: { title: "New", blurb: "extra" } },
+      { name: "subtitle", type: "string", value: "here" },
+    ],
+  };
+  await openHistory(entry, {
+    path: "posts/a.md", status: "M", label: "Alpha", added: 1, removed: 1,
+    fields: [
+      // The old version's group had no `blurb` at all…
+      { name: "seo", kind: "changed", before: { title: "Old" }, after: { title: "New", blurb: "extra" } },
+      // …and had no `subtitle` field whatsoever.
+      { name: "subtitle", kind: "added", before: undefined, after: "here" },
+    ],
+  });
+
+  fireEvent.click(screen.getByTestId("restore-field-seo"));
+  fireEvent.click(screen.getByTestId("restore-field-subtitle"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  expect(room.get("seo.title")).toBe("Old");
+  // Emptied rather than left holding a value the restored version never had.
+  expect(room.get("seo.blurb")).toBe("");
+  expect(room.get("subtitle")).toBe("");
+});
+
+// The body is a ProseMirror fragment, not a text binding: in a session it
+// ignores the `value` it is handed and mirrors the shared fragment, so "the
+// value changed" is not something it can observe. It is told instead.
+test("restoring the body signals the body editor to replace its content", async () => {
+  const { collab } = fakeCollab({});
+  const seen: FieldSlotArgs[] = [];
+  const renderField = (args: FieldSlotArgs) => {
+    if (args.field.source !== "body") return undefined;
+    seen.push(args);
+    return <div data-testid="body-slot" />;
+  };
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "Now.", collab,
+    fields: [
+      { name: "status", type: "string", value: "published" },
+      { name: "content", type: "string", component: "body", source: "body", value: "Now." },
+    ],
+  };
+  await openHistory(entry, {
+    path: "posts/a.md", status: "M", label: "Alpha", added: 1, removed: 1,
+    fields: [{ name: "status", kind: "changed", before: "draft", after: "published" }],
+    bodyBefore: "Then.", bodyAfter: "Now.",
+  }, renderField);
+
+  const before = seen[seen.length - 1].resetNonce;
+
+  fireEvent.click(screen.getByTestId("restore-field-body"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  await waitFor(() => {
+    const last = seen[seen.length - 1];
+    expect(last.value).toBe("Then.");
+    expect(last.resetNonce).not.toBe(before);
+  });
+});
+
+// Restoring some other field must not make the body editor replace itself — a
+// peer could be mid-sentence in it.
+test("restoring another field leaves the body editor's signal alone", async () => {
+  const { collab } = fakeCollab({ status: "published" });
+  const seen: FieldSlotArgs[] = [];
+  const renderField = (args: FieldSlotArgs) => {
+    if (args.field.source !== "body") return undefined;
+    seen.push(args);
+    return <div data-testid="body-slot" />;
+  };
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "Now.", collab,
+    fields: [
+      { name: "status", type: "string", value: "published" },
+      { name: "content", type: "string", component: "body", source: "body", value: "Now." },
+    ],
+  };
+  await openHistory(entry, {
+    path: "posts/a.md", status: "M", label: "Alpha", added: 1, removed: 1,
+    fields: [{ name: "status", kind: "changed", before: "draft", after: "published" }],
+    bodyBefore: "Then.", bodyAfter: "Now.",
+  }, renderField);
+
+  const before = seen[seen.length - 1].resetNonce;
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  await waitFor(() => expect(screen.getByTestId("column-scroll")).toBeInTheDocument());
+  expect(seen[seen.length - 1].resetNonce).toBe(before);
+});
+
+// ---- discard, in a live session -------------------------------------------
+//
+// Discard has the same shape of problem as a restore, and had the same bug: it
+// reverted the local form and left the discarded work sitting in the CRDT,
+// where the control read it straight back. In a session a discard is a change
+// to the ROOM — the unsaved work is the collective state every client is
+// looking at, not one screen's private draft.
+
+async function openEditor(entry: CmsEntry, renderField?: (a: FieldSlotArgs) => React.ReactNode) {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={jest.fn()}
+        entries={[entry]}
+        selectedEntryId={entry.id}
+        onSelectEntry={jest.fn()}
+        userInitials="ED"
+        onSaveEntry={jest.fn(async () => {})}
+        renderField={renderField}
+      />,
+    ),
+  );
+  await screen.findByTestId("column-scroll");
+}
+
+test("discarding puts the saved value back in the room, not just on screen", async () => {
+  const { collab, room } = fakeCollab({ status: "published" });
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "", collab,
+    fields: [{ name: "status", type: "string", label: "Status", value: "published" }],
+  };
+  await openEditor(entry);
+
+  fireEvent.change(screen.getByDisplayValue("published"), { target: { value: "scratch" } });
+  await waitFor(() => expect(room.get("status")).toBe("scratch"));
+
+  fireEvent.click(await screen.findByTestId("discard-changes"));
+
+  // The room is back to the document, so the control has nothing to read back.
+  expect(room.get("status")).toBe("published");
+  await waitFor(() => expect(screen.getByDisplayValue("published")).toBeInTheDocument());
+});
+
+// The body is a fragment the editor mirrors, so a discard has to tell it rather
+// than write a binding it does not read.
+test("discarding signals the body editor to rebuild from the saved document", async () => {
+  const { collab } = fakeCollab({ status: "published" });
+  const seen: FieldSlotArgs[] = [];
+  const renderField = (args: FieldSlotArgs) => {
+    if (args.field.source !== "body") return undefined;
+    seen.push(args);
+    return <div data-testid="body-slot" />;
+  };
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "Saved.", collab,
+    fields: [
+      { name: "status", type: "string", value: "published" },
+      { name: "content", type: "string", component: "body", source: "body", value: "Saved." },
+    ],
+  };
+  await openEditor(entry, renderField);
+
+  const before = seen[seen.length - 1].resetNonce;
+  // An edit to the body, as the editor itself would report one.
+  seen[seen.length - 1].onChange("Scratch.");
+
+  fireEvent.click(await screen.findByTestId("discard-changes"));
+
+  await waitFor(() => {
+    const last = seen[seen.length - 1];
+    expect(last.value).toBe("Saved.");
+    expect(last.resetNonce).not.toBe(before);
+  });
+});
+
+// A discard replaces the whole document, but only the fields that actually
+// moved should be written: churning the rest costs CRDT operations and can
+// nudge the cursor of a peer working in a field nobody discarded.
+test("discarding leaves untouched fields alone in the room", async () => {
+  const { collab } = fakeCollab({ status: "published", subtitle: "untouched" });
+  const writes: string[] = [];
+  const wrapped: CollabApi = {
+    ...collab,
+    text: (p) => {
+      const b = collab.text(p);
+      return { ...b, set: (n) => { writes.push(p); b.set(n); } };
+    },
+  };
+  const entry: CmsEntry = {
+    id: "a", path: "posts/a.md", title: "Alpha", body: "", collab: wrapped,
+    fields: [
+      { name: "status", type: "string", label: "Status", value: "published" },
+      { name: "subtitle", type: "string", label: "Subtitle", value: "untouched" },
+    ],
+  };
+  await openEditor(entry);
+
+  fireEvent.change(screen.getByDisplayValue("published"), { target: { value: "scratch" } });
+  await waitFor(() => expect(screen.getByDisplayValue("scratch")).toBeInTheDocument());
+  writes.length = 0;
+
+  fireEvent.click(await screen.findByTestId("discard-changes"));
+
+  expect(writes).toContain("status");
+  expect(writes).not.toContain("subtitle");
+});

package/src/__tests__/ContentBrowser.slotmedia.test.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import {
+  ContentBrowser,
+  type CmsEntry,
+  type CmsNavSection,
+  type EntryField,
+  type FieldSlotArgs,
+} from "../components/ContentBrowser";
+import type { MediaApi, MediaAsset, MediaResolution } from "../media";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const hero: MediaAsset = {
+  id: "m1",
+  set: "uploads",
+  repoPath: "public/uploads/hero.png",
+  publicPath: "/uploads/hero.png",
+  cdnPath: "https://cdn.example.com/uploads/hero.png",
+  mimeType: "image/png",
+  extension: "png",
+  kind: "image",
+  size: 2048,
+  width: 800,
+  height: 600,
+  pending: false,
+  url: "https://store.example.com/signed/hero.png",
+};
+
+function makeApi(over: Partial<MediaApi> = {}): MediaApi {
+  return {
+    sets: [{ name: "uploads", path: "public/uploads/**/*", mimeTypes: [], count: 1 }],
+    resolve: jest.fn(async (paths: string[]): Promise<MediaResolution[]> =>
+      paths.map((p) => ({ input: p, media: hero, aliasKind: "public", ambiguous: false, candidates: [] })),
+    ),
+    byId: jest.fn(async () => hero),
+    list: jest.fn(async () => [hero]),
+    ...over,
+  };
+}
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const bodyField: EntryField = {
+  name: "body",
+  label: "Body",
+  type: "string",
+  component: "body",
+  source: "body",
+  format: "markdown",
+  value: "",
+};
+
+function renderWith(entry: CmsEntry, api: MediaApi | undefined, renderField: (a: FieldSlotArgs) => React.ReactNode) {
+  render(
+    <ThemeProvider>
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={[entry]}
+        userInitials="ED"
+        media={api}
+        renderField={renderField}
+      />
+    </ThemeProvider>,
+  );
+}
+
+// A slot control that exposes what it received: a button to open the picker
+// and a place to show what the pick settled with.
+function makeSlot() {
+  const seen: { media?: FieldSlotArgs["media"] } = {};
+  const renderField = (args: FieldSlotArgs) => {
+    if (args.field.component !== "body") return undefined;
+    seen.media = args.media;
+    return <button data-testid="slot-control">custom body</button>;
+  };
+  return { seen, renderField };
+}
+
+test("a slot-rendered field receives media access that opens the picker and resolves paths", async () => {
+  const api = makeApi();
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "", fields: [bodyField] };
+  renderWith(entry, api, renderField);
+
+  await screen.findByTestId("slot-control");
+  expect(seen.media).toBeDefined();
+
+  // Resolution is bound to the open document, like a media field's.
+  const resolved = await seen.media!.resolve(["/uploads/hero.png"]);
+  expect(resolved[0].media).toEqual(hero);
+  expect(api.resolve).toHaveBeenCalledWith(["/uploads/hero.png"], "content/posts/a.md");
+
+  // pick() opens the picker; choosing a row settles it with the asset and the
+  // path in the field's store_as form (public by default).
+  let pending: Promise<{ asset: MediaAsset; path: string } | null>;
+  act(() => {
+    pending = seen.media!.pick({ kinds: ["image", "svg"] });
+  });
+  const row = await screen.findByTestId(`media-row-${hero.id}`);
+  expect(api.list).toHaveBeenCalledWith(expect.objectContaining({ set: "uploads", kinds: ["image", "svg"] }));
+  fireEvent.click(row);
+  await expect(pending!).resolves.toEqual({ asset: hero, path: "/uploads/hero.png" });
+});
+
+test("dismissing the picker settles pick() with null", async () => {
+  const api = makeApi();
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "", fields: [bodyField] };
+  renderWith(entry, api, renderField);
+  await screen.findByTestId("slot-control");
+
+  let pending: Promise<unknown>;
+  act(() => {
+    pending = seen.media!.pick();
+  });
+  await screen.findByTestId(`media-row-${hero.id}`);
+  fireEvent.click(screen.getByLabelText("Close"));
+  await expect(pending!).resolves.toBeNull();
+});
+
+test("the schema-less body gets media access bound to its document", async () => {
+  const api = makeApi();
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "hello" };
+  renderWith(entry, api, renderField);
+  await screen.findByTestId("slot-control");
+
+  expect(seen.media).toBeDefined();
+  await seen.media!.resolve(["./hero.png"]);
+  expect(api.resolve).toHaveBeenCalledWith(["./hero.png"], "content/posts/a.md");
+});
+
+test("without a media api the slot receives no media handle", async () => {
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "", fields: [bodyField] };
+  renderWith(entry, undefined, renderField);
+  await screen.findByTestId("slot-control");
+  expect(seen.media).toBeUndefined();
+});

package/src/__tests__/MediaField.test.tsx

@@ -183,3 +183,21 @@ describe("pathForStoreAs", () => {
     expect(pathForStoreAs(manual, "public")).toBe("files/manual.pdf");
   });
 });
+
+// The gap this closes: the picker row asked the preview for its compact form,
+// and compact rendered the file chip for every kind — so an image showed as a
+// filename squeezed into a 48px square instead of a thumbnail.
+test("the picker shows a thumbnail for images and an icon for other kinds", async () => {
+  const api = makeApi();
+  renderField(<MediaField shape="string" value="" onChange={jest.fn()} set="uploads" />, api);
+
+  fireEvent.click(screen.getByTestId("media-choose"));
+  await screen.findByTestId(`media-row-${hero.id}`);
+
+  const thumb = screen.getByTestId(`media-thumb-${hero.id}`);
+  expect(thumb.tagName).toBe("IMG");
+  expect(thumb).toHaveAttribute("src", hero.url);
+  // The PDF row has no thumbnail: it gets the kind icon instead.
+  expect(screen.queryByTestId(`media-thumb-${manual.id}`)).not.toBeInTheDocument();
+  expect(screen.getByTestId(`media-row-${manual.id}`)).toBeInTheDocument();
+});

package/src/__tests__/ProtectedBranchModal.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ProtectedBranchModal } from "../components/ProtectedBranchModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const base = { branch: "main", onCreate: () => {}, onCancel: () => {} };
+
+test("it names the branch, the document, and offers the one remedy", () => {
+  render(wrap(<ProtectedBranchModal {...base} documentLabel="Hello world" />));
+
+  const modal = screen.getByTestId("protected-branch-modal");
+  expect(modal).toHaveTextContent("This branch is protected");
+  expect(modal).toHaveTextContent("main");
+  expect(modal).toHaveTextContent("Hello world");
+  expect(modal).toHaveTextContent("Branched from main");
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Create branch and save");
+});
+
+test("the suggested name prefills the field and submits", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("edit/hello");
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).toHaveBeenCalledWith("edit/hello");
+});
+
+// The author's own name wins: a suggestion arriving late (the host resolves the
+// document a render after the modal opens) must not overwrite what they typed.
+test("a late suggestion does not overwrite a typed name", () => {
+  const { rerender } = render(wrap(<ProtectedBranchModal {...base} />));
+  fireEvent.change(screen.getByTestId("protected-branch-name"), { target: { value: "mine" } });
+  rerender(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" />));
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("mine");
+});
+
+test("an empty name cannot be submitted", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCreate={onCreate} />));
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+// While the branch is being created there is no way out but forward: cancelling
+// mid-flight would abandon a save whose branch may already exist.
+test("busy disables both actions and hides the close control", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" busy onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Creating…");
+  expect(screen.queryByTestId("protected-branch-close")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+test("the server's message is shown so a rejected name can be corrected", () => {
+  render(wrap(<ProtectedBranchModal {...base} error={`branch "edit/hello" already exists`} />));
+  expect(screen.getByTestId("protected-branch-error")).toHaveTextContent("already exists");
+});
+
+test("cancel dismisses", () => {
+  const onCancel = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCancel={onCancel} />));
+  fireEvent.click(screen.getByTestId("protected-branch-cancel"));
+  expect(onCancel).toHaveBeenCalledTimes(1);
+});