@gogitcms/design-system 0.15.0-next.3

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

@@ -0,0 +1,185 @@
+// A select has to show what the document actually holds.
+//
+// Three ways it didn't. A value the enum no longer lists matched no <option>, so
+// the browser rendered the box blank — indistinguishable from unset, and the
+// next save wrote that blankness back. A select over an integer/float field read
+// the shared Y.Text while the server seeds numbers into the "reg" map, so it
+// found nothing there ever. And every collab-bound select read empty until the
+// room finished syncing, showing a saved document as an unset dropdown for as
+// long as the handshake took.
+
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import {
+  ContentBrowser,
+  type CmsEntry,
+  type CmsNavSection,
+  type CollabApi,
+  type CollabRegister,
+  type CollabText,
+  type EntryField,
+  type OpenTab,
+} from "../components/ContentBrowser";
+
+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 stand-in for @gogitcms/realtime's DocCollab, modeling the two things the
+ * real one does that matter here: text and register are separate stores (the
+ * server seeds strings into one and scalars into the other), and the doc reads
+ * empty until `sync()` — no field value has arrived before then.
+ */
+function fakeCollab() {
+  const texts = new Map<string, string>();
+  const regs = new Map<string, unknown>();
+  const listeners = new Map<string, Set<() => void>>();
+  const syncListeners = new Set<() => void>();
+  let synced = false;
+  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);
+  };
+
+  // Both caches memoize per path: useSyncExternalStore re-renders until an
+  // unchanged store gives back a stable snapshot.
+  const textCache = new Map<string, CollabText>();
+  const text = (path: string): CollabText => {
+    let binding = textCache.get(path);
+    if (!binding) {
+      textCache.set(path, (binding = {
+        get: () => texts.get(path) ?? "",
+        set: (next) => { texts.set(path, next); notify(path); },
+        peers: () => noPeers,
+        subscribe: (cb) => listen(path, cb),
+      }));
+    }
+    return binding;
+  };
+  const regCache = new Map<string, CollabRegister>();
+  const register = (path: string): CollabRegister => {
+    let binding = regCache.get(path);
+    if (!binding) {
+      regCache.set(path, (binding = {
+        get: () => regs.get(path),
+        set: (next) => { regs.set(path, next); notify(path); },
+        subscribe: (cb) => listen(path, cb),
+      }));
+    }
+    return binding;
+  };
+
+  const collab: CollabApi = {
+    text,
+    register,
+    setFocus: () => {},
+    peersAt: () => noPeers,
+    peersUnder: () => noPeers,
+    participants: () => noPeers,
+    awarenessVersion: () => 0,
+    subscribeAwareness: () => () => {},
+    synced: () => synced,
+    subscribeSynced: (cb) => {
+      syncListeners.add(cb);
+      return () => void syncListeners.delete(cb);
+    },
+    ydoc: {},
+    awareness: {},
+  };
+
+  return {
+    collab,
+    /** The server's seeded state arriving: strings as Y.Text, scalars as registers. */
+    sync(seed: { text?: Record<string, string>; reg?: Record<string, unknown> } = {}) {
+      act(() => {
+        synced = true;
+        for (const [p, v] of Object.entries(seed.text ?? {})) { texts.set(p, v); notify(p); }
+        for (const [p, v] of Object.entries(seed.reg ?? {})) { regs.set(p, v); notify(p); }
+        syncListeners.forEach((cb) => cb());
+      });
+    },
+  };
+}
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries: [{ id: "a", path: "posts/a.md", title: "Alpha", body: "", fields: [] } as CmsEntry],
+  userInitials: "ED",
+} as const;
+
+function renderDoc(fields: EntryField[], collab?: CollabApi) {
+  const entry: CmsEntry = { id: "a", path: "posts/a.md", title: "Alpha", body: "", collab, fields };
+  return render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        openTabs={[{ id: "a", collection: "posts", entry } as OpenTab]}
+        activeTabId="a"
+        onSaveEntry={jest.fn()}
+      />
+    )
+  );
+}
+
+const control = () => screen.getByTestId("select-control") as HTMLSelectElement;
+
+test("a stored value the enum no longer lists still shows, marked", () => {
+  renderDoc([
+    { name: "status", label: "Status", type: "string", component: "select", enumValues: ["draft", "shipped"], value: "Shipped" },
+  ]);
+  expect(control().value).toBe("Shipped");
+  expect(screen.getByText("Shipped (not in list)")).toBeInTheDocument();
+});
+
+test("a numeric select reads the register the server seeds scalars into", () => {
+  const { collab, sync } = fakeCollab();
+  renderDoc(
+    [{ name: "year", label: "Year", type: "integer", component: "select", enumValues: ["2024", "2025"], value: 2025 }],
+    collab
+  );
+  sync({ reg: { year: 2025 } });
+  expect(control().value).toBe("2025");
+});
+
+test("a collab select shows the document's value until the room has synced", () => {
+  const { collab, sync } = fakeCollab();
+  renderDoc(
+    [{ name: "status", label: "Status", type: "string", component: "select", enumValues: ["draft", "shipped"], value: "shipped" }],
+    collab
+  );
+  // Nothing has arrived over the wire yet — the host's own value stands in.
+  expect(control().value).toBe("shipped");
+  sync({ text: { status: "shipped" } });
+  expect(control().value).toBe("shipped");
+});
+
+test("a value already in the shared doc wins over the host's, synced or not", () => {
+  const { collab, sync } = fakeCollab();
+  renderDoc(
+    [{ name: "status", label: "Status", type: "string", component: "select", enumValues: ["draft", "shipped"], value: "shipped" }],
+    collab
+  );
+  // A peer's edit reaching the field, and a peer clearing it — neither is
+  // undone by the stale local value.
+  sync({ text: { status: "draft" } });
+  expect(control().value).toBe("draft");
+  act(() => collab.text("status").set(""));
+  expect(control().value).toBe("");
+});

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

@@ -0,0 +1,132 @@
+// A document does not always arrive in one piece.
+//
+// The host loads a document and its collection's field definitions with separate
+// queries, so on a cold load either half can land first, and a refetch replaces
+// both later on. The editor seeded itself once, keyed on the document id, and
+// never looked again — so a form that mounted before its values existed showed
+// every field empty for as long as it stayed open, with the values sitting right
+// there in the entry it was rendering from.
+//
+// Re-reading the document is only half of it. The other half is that an author's
+// work — an edit in flight, a stored draft — must survive the document moving
+// underneath it.
+
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import {
+  ContentBrowser,
+  type CmsEntry,
+  type CmsNavSection,
+  type EntryField,
+  type OpenTab,
+} from "../components/ContentBrowser";
+import { refreshDrafts, writeDraft } 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>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries: [{ id: "a", path: "posts/a.md", title: "Alpha", body: "", fields: [] } as CmsEntry],
+  userInitials: "ED",
+} as const;
+
+beforeEach(() => {
+  localStorage.clear();
+  refreshDrafts();
+});
+
+const fieldsWith = (title: string, status: string): EntryField[] => [
+  { name: "title", label: "Title", type: "string", value: title },
+  { name: "status", label: "Status", type: "string", component: "select", enumValues: ["draft", "shipped"], value: status },
+];
+// The same field definitions before the document's values have arrived.
+const defsOnly: EntryField[] = fieldsWith("", "").map((f) => ({ ...f, value: undefined }));
+
+const doc = (fields?: EntryField[]): CmsEntry => ({
+  id: "a",
+  path: "posts/a.md",
+  title: "Alpha",
+  body: "body text",
+  fields,
+});
+
+const ui = (entry?: CmsEntry) =>
+  wrap(
+    <ContentBrowser
+      {...base}
+      openTabs={[{ id: "a", collection: "posts", entry, loading: !entry } as OpenTab]}
+      activeTabId="a"
+      onSaveEntry={jest.fn()}
+    />
+  );
+
+const status = () => (screen.getByTestId("select-control") as HTMLSelectElement).value;
+
+describe("a document that arrives in stages", () => {
+  it("fills in values that land after the fields they belong to", () => {
+    const { rerender } = render(ui(doc(defsOnly)));
+    expect(status()).toBe("");
+
+    rerender(ui(doc(fieldsWith("Alpha", "shipped"))));
+    expect(screen.getByDisplayValue("Alpha")).toBeInTheDocument();
+    expect(status()).toBe("shipped");
+  });
+
+  it("fills in values when the collection schema is the half that was missing", () => {
+    // No fields at all: the editor falls back to its title/body form.
+    const { rerender } = render(ui(doc(undefined)));
+    expect(screen.queryByTestId("select-control")).not.toBeInTheDocument();
+
+    rerender(ui(doc(fieldsWith("Alpha", "shipped"))));
+    expect(screen.getByDisplayValue("Alpha")).toBeInTheDocument();
+    expect(status()).toBe("shipped");
+  });
+
+  it("shows a saved change made elsewhere while the document sits open untouched", () => {
+    const { rerender } = render(ui(doc(fieldsWith("Alpha", "draft"))));
+    rerender(ui(doc(fieldsWith("Alpha", "shipped"))));
+    expect(status()).toBe("shipped");
+  });
+});
+
+describe("what the author has in hand survives it", () => {
+  it("an edit in flight is not overwritten when the entry re-renders", () => {
+    const { rerender } = render(ui(doc(fieldsWith("Alpha", "draft"))));
+    fireEvent.change(screen.getByDisplayValue("Alpha"), { target: { value: "Beta" } });
+
+    rerender(ui(doc(fieldsWith("Alpha", "draft"))));
+    expect(screen.getByDisplayValue("Beta")).toBeInTheDocument();
+  });
+
+  it("an edit in flight survives the saved document moving underneath it", () => {
+    const { rerender } = render(ui(doc(fieldsWith("Alpha", "draft"))));
+    fireEvent.change(screen.getByDisplayValue("Alpha"), { target: { value: "Beta" } });
+
+    // Someone else's save arrives for this document. The author's unsaved work
+    // stays on screen — it is the only copy of it there is.
+    rerender(ui(doc(fieldsWith("Gamma", "draft"))));
+    expect(screen.getByDisplayValue("Beta")).toBeInTheDocument();
+  });
+
+  it("a stored draft is not thrown away by a late-arriving document", () => {
+    writeDraft("a", { title: "Drafted", status: "draft" });
+    refreshDrafts();
+
+    const { rerender } = render(ui(doc(defsOnly)));
+    rerender(ui(doc(fieldsWith("Alpha", "shipped"))));
+    expect(screen.getByDisplayValue("Drafted")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type UserMenuItem } from "../components/ContentBrowser";
+
+// 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>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+const entries: CmsEntry[] = [{ id: "a", path: "posts/a.md", title: "Alpha", body: "" }];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+} as const;
+
+test("without userMenuItems the topbar keeps the sign-out icon and static avatar", () => {
+  render(wrap(<ContentBrowser {...base} onSignOut={() => {}} />));
+  expect(screen.getByLabelText("Sign out")).toBeInTheDocument();
+  expect(screen.queryByTestId("user-menu")).not.toBeInTheDocument();
+});
+
+test("userMenuItems turn the avatar into a dropdown with items and Sign out", () => {
+  const onSelect = jest.fn();
+  const onSignOut = jest.fn();
+  const items: UserMenuItem[] = [
+    { label: "Plugins", icon: "settings", onSelect, testID: "user-menu-plugins" },
+  ];
+  render(wrap(<ContentBrowser {...base} onSignOut={onSignOut} userMenuItems={items} />));
+
+  // The standalone sign-out icon is replaced by the menu.
+  expect(screen.queryByLabelText("Sign out")).not.toBeInTheDocument();
+
+  // Closed by default; opens on avatar press.
+  expect(screen.queryByTestId("user-menu-plugins")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("user-menu"));
+  fireEvent.click(screen.getByTestId("user-menu-plugins"));
+  expect(onSelect).toHaveBeenCalledTimes(1);
+  // Selecting closes the menu.
+  expect(screen.queryByTestId("user-menu-plugins")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("user-menu"));
+  fireEvent.click(screen.getByTestId("user-menu-sign-out"));
+  expect(onSignOut).toHaveBeenCalledTimes(1);
+});