@gogitcms/design-system 0.16.0-next.3 → 0.16.0-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.3",
+  "version": "0.16.0-next.5",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

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

@@ -0,0 +1,385 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+import type { DocumentVersion, HistoryApi } from "../history";
+import { refreshDrafts } from "../components/documentDrafts";
+import type { DocumentChange } from "../components/ChangeDetail";
+
+// 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 wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+// 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 entry: CmsEntry = {
+  id: "doc-1",
+  path: "posts/hello.md",
+  title: "Hello",
+  body: "",
+  fields: [
+    { name: "title", type: "string", value: "Hello" },
+    { name: "status", type: "string", value: "published" },
+    { name: "body", type: "string", component: "body", source: "body", value: "Current body." },
+  ],
+};
+
+const published: DocumentVersion = {
+  sha: "9f2c1abcdef",
+  shortSha: "9f2c1ab",
+  message: "Publish the post\n\nA body the list has no room for.",
+  authorName: "Ada",
+  authoredAt: "2026-03-01T12:00:00Z",
+  url: "https://github.com/acme/site/commit/9f2c1ab",
+  filesChanged: 3,
+};
+
+const drafted: DocumentVersion = {
+  sha: "3b7de1098877",
+  shortSha: "3b7de10",
+  message: "Draft the post",
+  authorName: "Ada",
+  authoredAt: "2026-02-01T12:00:00Z",
+  url: "https://github.com/acme/site/commit/3b7de10",
+  filesChanged: 1,
+};
+
+const draftedDetail: DocumentChange = {
+  path: "posts/hello.md",
+  status: "M",
+  label: "Hello",
+  added: 1,
+  removed: 1,
+  fields: [
+    { name: "title", kind: "unchanged", before: "Hello", after: "Hello" },
+    { name: "status", kind: "changed", before: "draft", after: "published" },
+  ],
+  bodyBefore: "The earlier body.",
+  bodyAfter: "Current body.",
+};
+
+function makeApi(over: Partial<HistoryApi> = {}): HistoryApi {
+  return {
+    list: jest.fn(async () => [published, drafted]),
+    get: jest.fn(async () => draftedDetail),
+    ...over,
+  };
+}
+
+function renderBrowser(history?: HistoryApi, over: { readOnly?: boolean } = {}) {
+  const onSaveEntry = jest.fn(async () => {});
+  render(
+    wrap(
+      <ContentBrowser
+        onSaveEntry={onSaveEntry}
+        readOnly={over.readOnly}
+        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"
+        history={history}
+      />,
+    ),
+  );
+  return onSaveEntry;
+}
+
+/**
+ * Opens history and waits for the newest version's diff to actually land — the
+ * pane mounts before its first fetch resolves, and everything to do with
+ * restoring is rendered from the fetched diff.
+ */
+async function openHistory(history?: HistoryApi, over: { readOnly?: boolean } = {}) {
+  const onSaveEntry = renderBrowser(history ?? makeApi(), over);
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+  await screen.findByTestId("document-history");
+  await screen.findByTestId("change-detail");
+  return onSaveEntry;
+}
+
+// The affordance only exists where history does. A deployment with no provider
+// should show no button at all rather than one that errors when pressed.
+test("no history seam means no history button", () => {
+  renderBrowser(undefined);
+  expect(screen.queryByTestId("document-history-toggle")).not.toBeInTheDocument();
+});
+
+test("the history button gives the document's column over to the version browser", async () => {
+  renderBrowser(makeApi());
+
+  // The editor form is what a column shows until history is asked for.
+  expect(screen.getByTestId("column-scroll")).toBeInTheDocument();
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByTestId("document-history")).toBeInTheDocument();
+  // The form is gone — history takes the column's body, not a slice of it.
+  expect(screen.queryByTestId("column-scroll")).not.toBeInTheDocument();
+});
+
+test("the version list shows each commit's subject, author, sha and file count", async () => {
+  renderBrowser(makeApi());
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByTestId("version-9f2c1ab")).toBeInTheDocument();
+  expect(screen.getByTestId("version-3b7de10")).toBeInTheDocument();
+
+  // The subject only — the message body would push every other row off screen.
+  expect(screen.getByText("Publish the post")).toBeInTheDocument();
+  expect(screen.queryByText(/A body the list has no room for/)).not.toBeInTheDocument();
+
+  expect(screen.getByText("3 files")).toBeInTheDocument();
+  // Singular, because "1 files" is the kind of thing people notice.
+  expect(screen.getByText("1 file")).toBeInTheDocument();
+});
+
+// An empty diff beside a full list is a second click for nothing.
+test("opening history selects the newest version and loads its diff", async () => {
+  const api = makeApi();
+  renderBrowser(api);
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  await waitFor(() => expect(api.get).toHaveBeenCalledWith({ documentId: "doc-1", sha: published.sha }));
+  expect(await screen.findByTestId("change-detail")).toBeInTheDocument();
+});
+
+test("selecting a version loads that version's document and diff", async () => {
+  const api = makeApi();
+  renderBrowser(api);
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  fireEvent.click(await screen.findByTestId("version-3b7de10"));
+
+  await waitFor(() => expect(api.get).toHaveBeenCalledWith({ documentId: "doc-1", sha: drafted.sha }));
+  // The version's value on the left of the diff, the current one on the right.
+  expect(await screen.findByText("draft")).toBeInTheDocument();
+  expect(screen.getByText("published")).toBeInTheDocument();
+});
+
+// A document with no commits is a real and common state — one created in the
+// CMS and not yet exported. It must not read as a failure.
+test("a document with no commits explains itself", async () => {
+  renderBrowser(makeApi({ list: jest.fn(async () => []) }));
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByTestId("history-empty")).toBeInTheDocument();
+  expect(screen.queryByTestId("history-error")).not.toBeInTheDocument();
+});
+
+test("a failed history says so rather than showing an empty list", async () => {
+  renderBrowser(makeApi({ list: jest.fn(async () => { throw new Error("GitHub is unreachable"); }) }));
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByText("GitHub is unreachable")).toBeInTheDocument();
+  expect(screen.queryByTestId("history-empty")).not.toBeInTheDocument();
+});
+
+test("the button toggles back, returning the column to the editor", async () => {
+  renderBrowser(makeApi());
+  const toggle = screen.getByTestId("document-history-toggle");
+
+  fireEvent.click(toggle);
+  expect(await screen.findByTestId("document-history")).toBeInTheDocument();
+
+  fireEvent.click(toggle);
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+  expect(screen.getByTestId("column-scroll")).toBeInTheDocument();
+});
+
+test("the pane's own close control leaves history too", async () => {
+  renderBrowser(makeApi());
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  fireEvent.click(await screen.findByTestId("history-close"));
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+});
+
+// ---- restoring fields from a past version ---------------------------------
+
+// A tick means "take this version's value". An unchanged field's two sides are
+// the same value, so a box on it could only ever be a no-op dressed up as a
+// choice.
+test("only changed fields offer a box", async () => {
+  await openHistory();
+
+  expect(screen.getByTestId("restore-field-status")).toBeInTheDocument();
+  expect(screen.getByTestId("restore-field-body")).toBeInTheDocument();
+  expect(screen.queryByTestId("restore-field-title")).not.toBeInTheDocument();
+});
+
+// The bar is mounted from the start rather than appearing on the first tick:
+// otherwise it shifts the diff under the hand that just ticked something, and
+// nothing tells you what the boxes are for until you have used one.
+test("the restore bar is present but inert until something is picked", async () => {
+  await openHistory();
+
+  expect(screen.getByTestId("restore-bar")).toBeInTheDocument();
+  expect(screen.getByTestId("restore-apply")).toBeDisabled();
+  expect(screen.getByText("Tick a field to take its earlier value")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  expect(screen.getByTestId("restore-apply")).not.toBeDisabled();
+  expect(screen.getByText("1 field selected")).toBeInTheDocument();
+});
+
+test("restoring a field puts its old value in the editor and closes history", async () => {
+  await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  // Back in the form, which is where the restored value now is.
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+  expect(screen.getByTestId("column-scroll")).toBeInTheDocument();
+
+  // The picked field took the version's value; the others are untouched.
+  expect(screen.getByDisplayValue("draft")).toBeInTheDocument();
+  expect(screen.getByDisplayValue("Hello")).toBeInTheDocument();
+});
+
+// The restore is an edit, not a write: it lands in the form and waits to be
+// saved like anything the author typed.
+test("a restore leaves the document unsaved rather than saving it", async () => {
+  const onSaveEntry = await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  expect(onSaveEntry).not.toHaveBeenCalled();
+  await waitFor(() => expect(screen.getByTestId("save-entry")).not.toBeDisabled());
+  // And it can be thrown away like any other edit.
+  expect(screen.getByTestId("discard-changes")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("save-entry"));
+  await waitFor(() =>
+    expect(onSaveEntry).toHaveBeenCalledWith(
+      expect.objectContaining({ fields: expect.objectContaining({ status: "draft" }) }),
+    ),
+  );
+});
+
+// The body is a field in the form like any other; which one it is comes from
+// the schema's `source: "body"`.
+test("the body restores onto the model's body field", async () => {
+  const onSaveEntry = await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-body"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  fireEvent.click(screen.getByTestId("save-entry"));
+  await waitFor(() =>
+    expect(onSaveEntry).toHaveBeenCalledWith(expect.objectContaining({ body: "The earlier body." })),
+  );
+});
+
+test("several fields restore together", async () => {
+  const onSaveEntry = await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-field-body"));
+  expect(screen.getByText("2 fields selected")).toBeInTheDocument();
+  expect(screen.getByTestId("restore-apply")).toHaveTextContent("Restore 2 fields");
+
+  fireEvent.click(screen.getByTestId("restore-apply"));
+  fireEvent.click(screen.getByTestId("save-entry"));
+  await waitFor(() =>
+    expect(onSaveEntry).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fields: expect.objectContaining({ status: "draft" }),
+        body: "The earlier body.",
+      }),
+    ),
+  );
+});
+
+test("unticking a field, and Clear, take it back out of the selection", async () => {
+  await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  expect(screen.getByTestId("restore-apply")).toBeDisabled();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-clear"));
+  expect(screen.getByTestId("restore-apply")).toBeDisabled();
+});
+
+// A tick names a VALUE, not a field. Carrying it to the next version would keep
+// the box ticked while silently repointing it at a different value.
+test("switching version clears what was picked", async () => {
+  await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  expect(screen.getByTestId("restore-apply")).not.toBeDisabled();
+
+  fireEvent.click(screen.getByTestId("version-3b7de10"));
+  await waitFor(() => expect(screen.getByTestId("restore-apply")).toBeDisabled());
+});
+
+// A read-only document can be read back through but not rewritten.
+test("a read-only document gets history with no restore at all", async () => {
+  await openHistory(makeApi(), { readOnly: true });
+
+  expect(screen.queryByTestId("restore-bar")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("restore-field-status")).not.toBeInTheDocument();
+});
+
+// A version identical to the current document has no field whose earlier value
+// is anything but the value already in the form.
+test("an unchanged version offers nothing to restore", async () => {
+  const unchanged: DocumentChange = {
+    path: "posts/hello.md",
+    status: "U",
+    label: "Hello",
+    added: 0,
+    removed: 0,
+    fields: [{ name: "status", kind: "unchanged", before: "published", after: "published" }],
+  };
+  await openHistory(makeApi({ get: jest.fn(async () => unchanged) }));
+
+  expect(screen.queryByTestId("restore-bar")).not.toBeInTheDocument();
+});
+
+// Restoring needs somewhere for the values to go. A host that wired no save
+// would otherwise offer a control that dirties a form nothing can persist.
+test("a document with no save handler gets history with no restore", async () => {
+  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"
+        history={makeApi()}
+      />,
+    ),
+  );
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+  await screen.findByTestId("change-detail");
+
+  expect(screen.queryByTestId("restore-bar")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("restore-field-status")).not.toBeInTheDocument();
+});