@gogitcms/editor 0.25.0 → 0.28.0

package/app/vendor/design-system/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/app/vendor/design-system/src/__tests__/FormsBrowser.test.tsx

@@ -0,0 +1,253 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { FormsBrowser } from "../components/FormsBrowser";
+import type { FormInfo, FormsApi, SubmissionInfo } from "../forms";
+import { FORMS_NAV_KEY, formsNavKey, isFormsNavKey, parseFormsNavKey, summaryLine } from "../forms";
+
+const contact: FormInfo = {
+  name: "contact",
+  label: "Contact us",
+  description: "General enquiries.",
+  fields: [
+    { name: "email", label: "Email", type: "string" },
+    { name: "reason", label: "Reason", type: "string" },
+    { name: "orderNumber", label: "Order number", type: "string" },
+  ],
+  fieldCount: 3,
+  submissionCount: 2,
+  versioned: true,
+  storePath: "content/submissions/contact/*.json",
+  canDelete: true,
+};
+
+const newsletter: FormInfo = {
+  name: "newsletter",
+  label: "Newsletter",
+  fields: [{ name: "email", type: "string" }],
+  fieldCount: 1,
+  submissionCount: 308,
+  versioned: false,
+  canDelete: false,
+};
+
+const submissions: SubmissionInfo[] = [
+  {
+    id: "s1",
+    form: "contact",
+    fields: { email: "priya@example.test", reason: "support", orderNumber: "A-1" },
+    submittedAt: "2026-08-28T12:00:00Z",
+    status: "received",
+    path: "content/submissions/contact/s1.json",
+  },
+  {
+    // reason is "sales", so orderNumber was never asked for — it is ABSENT
+    // rather than null, which the detail view must show as such.
+    id: "s2",
+    form: "contact",
+    fields: { email: "sam@example.test", reason: "sales" },
+    submittedAt: "2026-08-27T09:30:00Z",
+    status: "received",
+  },
+];
+
+function makeApi(over: Partial<FormsApi> = {}): FormsApi {
+  return {
+    forms: [contact, newsletter],
+    list: jest.fn(async ({ status }) =>
+      status === "spam" ? [] : submissions,
+    ),
+    count: jest.fn(async ({ status }) => (status === "spam" ? 0 : submissions.length)),
+    ...over,
+  };
+}
+
+function renderBrowser(props: Partial<React.ComponentProps<typeof FormsBrowser>> = {}) {
+  const api = props.api ?? makeApi();
+  const onSelectForm = props.onSelectForm ?? jest.fn();
+  const utils = render(
+    <ThemeProvider>
+      <FormsBrowser
+        api={api}
+        form={props.form ?? null}
+        onSelectForm={onSelectForm}
+        selectedId={props.selectedId}
+        onSelectSubmission={props.onSelectSubmission}
+        variant={props.variant ?? "desktop"}
+      />
+    </ThemeProvider>,
+  );
+  return { ...utils, api, onSelectForm };
+}
+
+// ── nav keys ────────────────────────────────────────────────────────────────
+
+describe("the forms nav-key space", () => {
+  it("cannot collide with a collection, because a collection name has no colon", () => {
+    expect(isFormsNavKey("forms")).toBe(false); // a collection literally named "forms"
+    expect(isFormsNavKey(FORMS_NAV_KEY)).toBe(true);
+    expect(isFormsNavKey(formsNavKey("contact"))).toBe(true);
+  });
+
+  it("tells the Forms button apart from a chosen form", () => {
+    expect(parseFormsNavKey(FORMS_NAV_KEY)).toBeNull();
+    expect(parseFormsNavKey(formsNavKey("contact"))).toBe("contact");
+    expect(parseFormsNavKey("posts")).toBeNull();
+  });
+});
+
+// ── the forms list ──────────────────────────────────────────────────────────
+
+describe("the forms list", () => {
+  it("shows each form's name, description and submission count", () => {
+    renderBrowser();
+    expect(screen.getByText("Contact us")).toBeTruthy();
+    expect(screen.getByText("General enquiries.")).toBeTruthy();
+    expect(screen.getByText("2")).toBeTruthy();
+    expect(screen.getByText("308")).toBeTruthy();
+  });
+
+  it("does not carry the field count, which describes the form and not its inbox", () => {
+    renderBrowser();
+    expect(screen.queryByText("3 fields")).toBeNull();
+    expect(screen.queryByText(/\bfields?\b/)).toBeNull();
+  });
+
+  it("opens a form when its row is pressed", () => {
+    const { onSelectForm } = renderBrowser();
+    fireEvent.click(screen.getByTestId("form-row-contact"));
+    expect(onSelectForm).toHaveBeenCalledWith("contact");
+  });
+
+  it("says so when the branch declares no forms", () => {
+    renderBrowser({ api: makeApi({ forms: [] }) });
+    expect(screen.getByText(/declares no forms/i)).toBeTruthy();
+  });
+});
+
+// ── submissions ─────────────────────────────────────────────────────────────
+
+describe("a form's submissions", () => {
+  it("lists them with a summary line built from what the person wrote", async () => {
+    renderBrowser({ form: "contact" });
+    await waitFor(() => expect(screen.getByTestId("submission-row-s1")).toBeTruthy());
+    // The email is preferred: it is what a reader scans an inbox for.
+    expect(screen.getByText("priya@example.test")).toBeTruthy();
+    expect(screen.getByText("sam@example.test")).toBeTruthy();
+  });
+
+  it("reports a tap so the host can bind it to the URL", async () => {
+    const onSelectSubmission = jest.fn();
+    renderBrowser({ form: "contact", onSelectSubmission });
+    await waitFor(() => expect(screen.getByTestId("submission-row-s1")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("submission-row-s1"));
+    expect(onSelectSubmission).toHaveBeenCalledWith("s1");
+  });
+
+  it("goes back to the forms list", async () => {
+    const { onSelectForm } = renderBrowser({ form: "contact" });
+    await waitFor(() => expect(screen.getByTestId("forms-back")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("forms-back"));
+    expect(onSelectForm).toHaveBeenCalledWith(null);
+  });
+
+  it("has somewhere to see spam, since a honeypot hit is recorded not discarded", async () => {
+    const { api } = renderBrowser({ form: "contact" });
+    await waitFor(() => expect(screen.getByTestId("forms-status-toggle")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("forms-status-toggle"));
+    await waitFor(() =>
+      expect(api.list).toHaveBeenCalledWith(expect.objectContaining({ status: "spam" })),
+    );
+    await waitFor(() => expect(screen.getByText(/Nothing caught as spam/i)).toBeTruthy());
+  });
+});
+
+// ── the read-only submission ────────────────────────────────────────────────
+
+describe("a selected submission", () => {
+  it("renders every value read-only, with no editable control", async () => {
+    renderBrowser({ form: "contact", selectedId: "s1" });
+    await waitFor(() => expect(screen.getByText("A-1")).toBeTruthy());
+    // The email shows twice — once as the row's summary line, once as the
+    // detail's value — which is what a list beside a detail looks like.
+    expect(screen.getAllByText("priya@example.test").length).toBeGreaterThan(0);
+    expect(screen.getByText("support")).toBeTruthy();
+    // A submission is a record of what someone sent, not a document with
+    // editing switched off.
+    expect(screen.queryByDisplayValue("priya@example.test")).toBeNull();
+  });
+
+  it("distinguishes a field that was never asked for from one left blank", async () => {
+    renderBrowser({ form: "contact", selectedId: "s2" });
+    await waitFor(() => expect(screen.getByTestId("submission-not-asked-orderNumber")).toBeTruthy());
+    expect(screen.getByText("Not asked")).toBeTruthy();
+  });
+
+  it("shows where a versioned submission lives in the repository", async () => {
+    renderBrowser({ form: "contact", selectedId: "s1" });
+    await waitFor(() =>
+      expect(screen.getByText("content/submissions/contact/s1.json")).toBeTruthy(),
+    );
+  });
+
+  it("omits the repository path for a submission git does not hold", async () => {
+    renderBrowser({ form: "contact", selectedId: "s2" });
+    await waitFor(() => expect(screen.getByText("Not asked")).toBeTruthy());
+    expect(screen.queryByText(/In the repository/i)).toBeNull();
+  });
+});
+
+// ── the summary line ────────────────────────────────────────────────────────
+
+describe("summaryLine", () => {
+  it("prefers an email-ish value, then the first readable text", () => {
+    expect(summaryLine(submissions[0], contact)).toBe("priya@example.test");
+    expect(
+      summaryLine(
+        { ...submissions[0], fields: { reason: "support", orderNumber: "A-1" } },
+        contact,
+      ),
+    ).toBe("support");
+  });
+
+  it("says so rather than rendering an empty row", () => {
+    expect(summaryLine({ ...submissions[0], fields: { agreed: true } }, contact)).toBe("(no text)");
+  });
+});
+
+// A form can legitimately fail to list — local mode answers NO_SUBMISSION_STORE
+// for a form that keeps its submissions in a database it does not have. Before
+// this had somewhere to go, the promise rejected and the pane spun forever.
+describe("a form whose submissions cannot be listed", () => {
+  const failing = (): FormsApi => ({
+    forms: [contact],
+    list: jest.fn().mockRejectedValue(
+      Object.assign(new Error("network"), {
+        graphQLErrors: [{ message: "form \"newsletter\" keeps its submissions in a database" }],
+      }),
+    ),
+    count: jest.fn().mockRejectedValue(new Error("network")),
+  });
+
+  it("stops loading instead of spinning forever", async () => {
+    renderBrowser({ api: failing(), form: "contact" });
+    await waitFor(() => expect(screen.getByTestId("forms-error")).toBeTruthy());
+  });
+
+  it("shows the server's own sentence, which says what to change", async () => {
+    renderBrowser({ api: failing(), form: "contact" });
+    await waitFor(() =>
+      expect(screen.getByText(/keeps its submissions in a database/)).toBeTruthy(),
+    );
+  });
+
+  it("falls back to something readable when the error carries no message", async () => {
+    const api: FormsApi = {
+      forms: [contact],
+      list: jest.fn().mockRejectedValue({}),
+      count: jest.fn().mockRejectedValue({}),
+    };
+    renderBrowser({ api, form: "contact" });
+    await waitFor(() => expect(screen.getByText(/could not be loaded/)).toBeTruthy());
+  });
+});