@gogitcms/design-system 0.15.0-next.3

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

@@ -0,0 +1,611 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type ContentBrowserProps } from "../components/ContentBrowser";
+import { MEDIA_NAV_KEY } from "../media";
+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>;
+
+const sections: CmsNavSection[] = [
+  { title: "Changed content", items: [{ key: "posts", label: "Blog posts", icon: "newspaper", count: 2 }] },
+  { title: "Changed configuration", items: [{ key: "site", label: "Site config", icon: "settings", count: 1 }] },
+];
+
+// The changed-entry rows carry git status + line counts, which is what
+// distinguishes this list from the editor's.
+const entries: CmsEntry[] = [
+  { id: "a", path: "content/blog/git-content.md", title: "Editing content in Git, explained", body: "", status: "M", added: 12, removed: 3 },
+  { id: "b", path: "content/blog/files-not-database.md", title: "Your content is just files", body: "", status: "A", added: 48, removed: 0 },
+];
+
+const change: DocumentChange = {
+  path: "content/blog/git-content.md",
+  status: "M",
+  label: "Editing content in Git, explained",
+  added: 12,
+  removed: 3,
+  fields: [
+    { name: "title", label: "Title", kind: "unchanged", before: "Editing content in Git, explained", after: "Editing content in Git, explained" },
+    { name: "status", label: "Status", kind: "changed", before: "draft", after: "published" },
+  ],
+  bodyBefore: "Draft intro — to be rewritten before publishing.\n",
+  bodyAfter: "# Editing content in Git, explained\n",
+};
+
+const base = {
+  workspace: { name: "acme/docs", initials: "AC", branch: "feat/rewrite", changed: 3 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+  onSelectEntry: () => {},
+  surface: "changes" as const,
+  segments: [
+    { key: "edit", label: "Edit" },
+    { key: "changes", label: "Changes" },
+  ],
+};
+
+test("the changes surface lists changed entries with their status and diff stat", () => {
+  render(wrap(<ContentBrowser {...base} />));
+
+  expect(screen.getByTestId("pane-changes")).toBeInTheDocument();
+  expect(screen.getByText("2 changed")).toBeInTheDocument();
+
+  // Status letters and line counts come from the entry rows the editor already
+  // knows how to render.
+  expect(screen.getByText("M")).toBeInTheDocument();
+  expect(screen.getByText("A")).toBeInTheDocument();
+  expect(screen.getByText("+12")).toBeInTheDocument();
+  expect(screen.getByText("-3")).toBeInTheDocument();
+  expect(screen.getByText("content/blog/git-content.md")).toBeInTheDocument();
+});
+
+test("a changed field renders before and after; an unchanged one renders as context", () => {
+  render(wrap(<ContentBrowser {...base} selectedChange={change} />));
+
+  expect(screen.getByTestId("change-detail")).toBeInTheDocument();
+
+  // The changed field shows both sides.
+  const status = screen.getByTestId("change-field-status");
+  expect(status).toHaveTextContent("draft");
+  expect(status).toHaveTextContent("published");
+
+  // The unchanged field shows its value once, with no diff tint.
+  const title = screen.getByTestId("change-field-title");
+  expect(title).toHaveTextContent("Editing content in Git, explained");
+  expect(title.querySelectorAll('[data-testid="diff-add"]')).toHaveLength(0);
+  expect(title.querySelectorAll('[data-testid="diff-del"]')).toHaveLength(0);
+
+  // A changed body is a diff too.
+  expect(screen.getByTestId("change-body")).toBeInTheDocument();
+});
+
+test("the changes surface offers no editing affordances", () => {
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={change}
+        // Even with every CRUD handler wired, the changes surface must not
+        // surface them — it describes a comparison, not an editable document.
+        canCreate
+        onStartCreate={() => {}}
+        selectable
+        onBulkDelete={() => {}}
+        searchable
+        onSearchChange={() => {}}
+        onSaveEntry={() => {}}
+      />,
+    ),
+  );
+
+  expect(screen.queryByTestId("create-entry")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("search-open")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("detail-menu")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("autosave-indicator")).not.toBeInTheDocument();
+});
+
+test("the segment control switches surfaces and marks the active one", () => {
+  const onSelectSegment = jest.fn();
+  render(wrap(<ContentBrowser {...base} onSelectSegment={onSelectSegment} />));
+
+  const changes = screen.getByTestId("segment-changes");
+  expect(changes).toHaveAttribute("aria-selected", "true");
+
+  fireEvent.click(screen.getByTestId("segment-edit"));
+  expect(onSelectSegment).toHaveBeenCalledWith("edit");
+
+  // The active segment is inert — clicking it must not re-navigate.
+  onSelectSegment.mockClear();
+  fireEvent.click(changes);
+  expect(onSelectSegment).not.toHaveBeenCalled();
+});
+
+test("a disabled segment cannot be selected", () => {
+  const onSelectSegment = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        surface="edit"
+        segments={[
+          { key: "edit", label: "Edit" },
+          // On the default branch there is nothing to compare against.
+          { key: "changes", label: "Changes", disabled: true },
+        ]}
+        onSelectSegment={onSelectSegment}
+      />,
+    ),
+  );
+
+  fireEvent.click(screen.getByTestId("segment-changes"));
+  expect(onSelectSegment).not.toHaveBeenCalled();
+});
+
+test("the branch control stays an inert badge until there is somewhere to switch to", () => {
+  const { rerender } = render(wrap(<ContentBrowser {...base} />));
+  expect(screen.getByTestId("branch-badge")).toBeInTheDocument();
+  expect(screen.queryByTestId("branch-menu")).not.toBeInTheDocument();
+
+  rerender(
+    wrap(
+      <ContentBrowser
+        {...base}
+        branches={[
+          { id: "1", name: "main" },
+          { id: "2", name: "feat/rewrite" },
+        ]}
+        defaultBranch="main"
+        onSelectBranch={() => {}}
+      />,
+    ),
+  );
+  expect(screen.getByTestId("branch-menu")).toBeInTheDocument();
+});
+
+test("the branch menu lists branches, marks the default, and reports a switch", () => {
+  const onSelectBranch = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        branches={[
+          { id: "1", name: "main" },
+          { id: "2", name: "feat/rewrite" },
+        ]}
+        defaultBranch="main"
+        onSelectBranch={onSelectBranch}
+      />,
+    ),
+  );
+
+  fireEvent.click(screen.getByTestId("branch-menu"));
+  expect(screen.getByTestId("branch-menu-list")).toBeInTheDocument();
+  expect(screen.getByText("default")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("branch-option-1"));
+  expect(onSelectBranch).toHaveBeenCalledWith({ id: "1", name: "main" });
+});
+
+test("the branch menu creates a branch from the current one", async () => {
+  const onCreateBranch = jest.fn().mockResolvedValue(undefined);
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        branches={[{ id: "2", name: "feat/rewrite" }]}
+        defaultBranch="main"
+        onCreateBranch={onCreateBranch}
+      />,
+    ),
+  );
+
+  fireEvent.click(screen.getByTestId("branch-menu"));
+  fireEvent.click(screen.getByTestId("branch-create"));
+  // The form says what the new branch is cut from, so the choice is not implicit.
+  expect(screen.getByText("Branched from feat/rewrite")).toBeInTheDocument();
+
+  fireEvent.change(screen.getByTestId("branch-create-input"), { target: { value: "feat/next" } });
+  // The submit handler awaits onCreate before closing the form, so the close is
+  // a state update outside the click's act() scope unless it is flushed here.
+  await act(async () => {
+    fireEvent.click(screen.getByTestId("branch-create-submit"));
+  });
+  expect(onCreateBranch).toHaveBeenCalledWith("feat/next");
+  expect(screen.queryByTestId("branch-create-input")).not.toBeInTheDocument();
+});
+
+// The editor derives its Media nav row from the media api — every set, always.
+// That derivation is wrong on the changes surface, where the row must reflect
+// what actually CHANGED. So the changes nav shows Media only when the host puts
+// it in `sections`, driven by the media change set.
+test("the changes nav does not derive Media from the media api", () => {
+  const media = {
+    sets: [{ name: "images", label: "Images", count: 12 }],
+  } as unknown as ContentBrowserProps["media"];
+
+  const { rerender } = render(wrap(<ContentBrowser {...base} surface="edit" media={media} />));
+  // The editor derives it: all 12 files, regardless of any comparison.
+  expect(screen.getByTestId(`nav-${MEDIA_NAV_KEY}`)).toBeInTheDocument();
+
+  // Same media api, changes surface, no media section supplied → no row, because
+  // nothing said any asset changed.
+  rerender(wrap(<ContentBrowser {...base} surface="changes" media={media} />));
+  expect(screen.queryByTestId(`nav-${MEDIA_NAV_KEY}`)).not.toBeInTheDocument();
+});
+
+test("the changes nav shows Media when the host reports changed assets", () => {
+  const media = {
+    sets: [{ name: "images", label: "Images", count: 12 }],
+  } as unknown as ContentBrowserProps["media"];
+  // What the host builds from branchMediaChanges: 2 changed assets, not 12 files.
+  const withMedia: CmsNavSection[] = [
+    ...sections,
+    { title: "", items: [{ key: MEDIA_NAV_KEY, label: "Media", icon: "image", count: 2 }] },
+  ];
+
+  render(wrap(<ContentBrowser {...base} surface="changes" sections={withMedia} media={media} />));
+
+  const row = screen.getByTestId(`nav-${MEDIA_NAV_KEY}`);
+  expect(row).toBeInTheDocument();
+  expect(row).toHaveTextContent("2");
+});
+
+// Selecting Media on the changes surface lists the changed assets; it must not
+// hand over to the media browser, which shows every file and has no diff.
+test("the changes surface lists changed assets rather than opening the media browser", () => {
+  const media = {
+    sets: [{ name: "images", label: "Images", count: 12 }],
+  } as unknown as ContentBrowserProps["media"];
+  const assets: CmsEntry[] = [
+    { id: "public/images/logo.png", path: "public/images/logo.png", title: "logo.png", body: "", status: "M" },
+    { id: "public/images/new.png", path: "public/images/new.png", title: "new.png", body: "", status: "A" },
+  ];
+
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        surface="changes"
+        activeNavKey={MEDIA_NAV_KEY}
+        sections={[...sections, { title: "", items: [{ key: MEDIA_NAV_KEY, label: "Media", icon: "image", count: 2 }] }]}
+        entries={assets}
+        media={media}
+      />,
+    ),
+  );
+
+  expect(screen.getByTestId("pane-changes")).toBeInTheDocument();
+  expect(screen.queryByTestId("pane-media-sets")).not.toBeInTheDocument();
+  expect(screen.getByText("public/images/logo.png")).toBeInTheDocument();
+  expect(screen.getByText("2 changed")).toBeInTheDocument();
+});
+
+test("the edit surface is unchanged when no surface is given", () => {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={base.workspace}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+        entriesEmpty="Choose a collection"
+        onSelectEntry={() => {}}
+      />,
+    ),
+  );
+
+  // No surface prop → the editor panes, not the changes ones.
+  expect(screen.getByTestId("pane-entries")).toBeInTheDocument();
+  expect(screen.queryByTestId("pane-changes")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("surface-segment")).not.toBeInTheDocument();
+});
+
+// The segment must be centered on the BAR, not in the space left over between
+// the left and right slots — those are never equal widths, so a flex-sibling
+// center sits visibly off-center. jsdom computes no layout, so this asserts the
+// mechanism (an overlay spanning the bar) rather than measured pixels.
+test("the segment control is centered against the bar, not between its neighbours", () => {
+  render(wrap(<ContentBrowser {...base} />));
+
+  const segment = screen.getByTestId("surface-segment");
+  const inner = segment.parentElement!;
+  const overlay = inner.parentElement!;
+  expect(overlay).toHaveStyle({ position: "absolute", left: "0px", right: "0px" });
+  expect(overlay).toHaveStyle({ justifyContent: "center" });
+
+  // The overlay spans the whole bar, so it must not intercept clicks aimed at
+  // the branch menu, bell or sign-out underneath it — while the segment itself
+  // stays clickable. Asserted as real CSS values: react-native's `box-none`
+  // would say this in one place, but react-native-web emits it as an invalid
+  // CSS value that browsers discard, silently reverting the overlay to `auto`.
+  expect(overlay).toHaveStyle({ pointerEvents: "none" });
+  expect(inner).toHaveStyle({ pointerEvents: "auto" });
+});
+
+// A changed or added asset is worth showing; a deleted one is not — there is no
+// current version, and previewing the base branch's copy would show a file this
+// branch removed as though it were still there.
+const mediaChange = (over: Partial<DocumentChange>): DocumentChange => ({
+  path: "public/images/logo.png",
+  status: "A",
+  label: "logo.png",
+  added: 0,
+  removed: 0,
+  fields: [{ name: "type", label: "Type", kind: "added", after: "image/png" }],
+  ...over,
+});
+
+test("an added asset previews only the new version", () => {
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={mediaChange({
+          status: "A",
+          preview: { kind: "image", afterUrl: "https://store/new.png" },
+        })}
+      />,
+    ),
+  );
+
+  expect(screen.getByTestId("change-preview")).toBeInTheDocument();
+  expect(screen.getByTestId("preview-add")).toBeInTheDocument();
+  expect(screen.queryByTestId("preview-del")).not.toBeInTheDocument();
+});
+
+test("a modified asset previews both versions", () => {
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={mediaChange({
+          status: "M",
+          preview: { kind: "image", beforeUrl: "https://store/old.png", afterUrl: "https://store/new.png" },
+        })}
+      />,
+    ),
+  );
+
+  expect(screen.getByTestId("preview-del")).toBeInTheDocument();
+  expect(screen.getByTestId("preview-add")).toBeInTheDocument();
+});
+
+test("a deleted asset is not previewed", () => {
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={mediaChange({
+          status: "D",
+          // The base branch's copy is still addressable, but this branch removed
+          // the file — there is no current version to show.
+          preview: { kind: "image", beforeUrl: "https://store/old.png", afterUrl: null },
+        })}
+      />,
+    ),
+  );
+
+  expect(screen.queryByTestId("change-preview")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("preview-del")).not.toBeInTheDocument();
+  // The metadata still renders — only the picture is withheld.
+  expect(screen.getByTestId("change-field-type")).toBeInTheDocument();
+});
+
+test("a non-visual asset falls back to metadata rather than a broken frame", () => {
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={mediaChange({
+          status: "A",
+          preview: { kind: "pdf", afterUrl: "https://store/doc.pdf" },
+        })}
+      />,
+    ),
+  );
+
+  expect(screen.queryByTestId("change-preview")).not.toBeInTheDocument();
+  expect(screen.getByTestId("change-field-type")).toBeInTheDocument();
+});
+
+test("the changes top bar shows a source → target selector; edit shows a single branch menu", () => {
+  const branchProps = {
+    branches: [
+      { id: "1", name: "main" },
+      { id: "2", name: "feat/rewrite" },
+      { id: "3", name: "draft/spring" },
+    ],
+    defaultBranch: "main",
+    onSelectBranch: () => {},
+  };
+
+  // Edit surface: single branch menu, no target.
+  const { rerender } = render(
+    wrap(<ContentBrowser {...base} surface="edit" {...branchProps} />),
+  );
+  expect(screen.getByTestId("branch-menu")).toBeInTheDocument();
+  expect(screen.queryByTestId("target-branch-menu")).not.toBeInTheDocument();
+
+  // Changes surface with a target: source (branch-menu) → target (target-branch-menu).
+  rerender(
+    wrap(
+      <ContentBrowser
+        {...base}
+        surface="changes"
+        {...branchProps}
+        targetBranch="main"
+        onSelectTarget={() => {}}
+      />,
+    ),
+  );
+  expect(screen.getByTestId("branch-menu")).toBeInTheDocument();
+  expect(screen.getByTestId("target-branch-menu")).toBeInTheDocument();
+});
+
+test("the target menu excludes the source branch and reports a retarget", () => {
+  const onSelectTarget = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        surface="changes"
+        // The source under review is workspace.branch = "feat/rewrite".
+        branches={[
+          { id: "1", name: "main" },
+          { id: "2", name: "feat/rewrite" },
+          { id: "3", name: "draft/spring" },
+        ]}
+        defaultBranch="main"
+        targetBranch="main"
+        onSelectTarget={onSelectTarget}
+      />,
+    ),
+  );
+
+  fireEvent.click(screen.getByTestId("target-branch-menu"));
+  // The source can't be its own target, so it's absent from the target options.
+  expect(screen.queryByTestId("target-branch-option-2")).not.toBeInTheDocument();
+  expect(screen.getByTestId("target-branch-option-3")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("target-branch-option-3"));
+  expect(onSelectTarget).toHaveBeenCalledWith({ id: "3", name: "draft/spring" });
+});
+
+test("the Apply button appears on the changes surface, gated by canApplyChanges", () => {
+  const onApplyChanges = jest.fn();
+  const { rerender } = render(
+    wrap(<ContentBrowser {...base} onApplyChanges={onApplyChanges} canApplyChanges={false} />),
+  );
+  // Present but disabled when there's nothing to apply.
+  const btn = screen.getByTestId("apply-changes");
+  expect(btn).toBeInTheDocument();
+  fireEvent.click(btn);
+  expect(onApplyChanges).not.toHaveBeenCalled();
+
+  rerender(wrap(<ContentBrowser {...base} onApplyChanges={onApplyChanges} canApplyChanges />));
+  fireEvent.click(screen.getByTestId("apply-changes"));
+  expect(onApplyChanges).toHaveBeenCalledTimes(1);
+});
+
+test("the apply modal opens on the confirmation step, then shows progress", () => {
+  const { rerender } = render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        targetBranch="main"
+        onApplyChanges={() => {}}
+        applyOpen
+        onConfirmApply={() => {}}
+        onCloseApply={() => {}}
+      />,
+    ),
+  );
+  // Open with no run yet → the confirmation step.
+  expect(screen.getByTestId("apply-changes-modal")).toBeInTheDocument();
+  expect(screen.getByTestId("apply-confirm")).toBeInTheDocument();
+
+  // Once a run exists → the progress checklist.
+  rerender(
+    wrap(
+      <ContentBrowser
+        {...base}
+        targetBranch="main"
+        onApplyChanges={() => {}}
+        applyOpen
+        applyProgress={{ status: "running", step: "comparing", sourceBranch: "feat/rewrite", targetBranch: "main" }}
+        onCloseApply={() => {}}
+      />,
+    ),
+  );
+  expect(screen.queryByTestId("apply-confirm")).not.toBeInTheDocument();
+  expect(screen.getByTestId("merge-step-active")).toBeInTheDocument();
+});
+
+test("the edit surface shows no Apply button", () => {
+  render(wrap(<ContentBrowser {...base} surface="edit" onApplyChanges={() => {}} canApplyChanges />));
+  // The Apply button lives in the changes top bar; the edit top bar omits it.
+  expect(screen.queryByTestId("apply-changes")).not.toBeInTheDocument();
+});
+
+test("a conflicted field renders the resolution controls and reports a choice", () => {
+  const onResolveConflict = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={change}
+        selectedConflicts={[
+          { id: "c1", field: "status", isBody: false, before: "draft", after: "published", resolution: null },
+        ]}
+        onResolveConflict={onResolveConflict}
+      />,
+    ),
+  );
+
+  // The conflicted field shows both candidate values under the red treatment,
+  // with three resolution choices.
+  const row = screen.getByTestId("conflict-field-status");
+  // Both candidate values are shown (before = target/HEAD, after = source).
+  expect(row).toHaveTextContent("before");
+  expect(row).toHaveTextContent("after");
+  expect(row).toHaveTextContent("draft");
+  expect(row).toHaveTextContent("published");
+  expect(screen.getByTestId("conflict-c1-ours")).toBeInTheDocument();
+  expect(screen.getByTestId("conflict-c1-theirs")).toBeInTheDocument();
+  expect(screen.getByTestId("conflict-c1-override")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("conflict-c1-theirs"));
+  expect(onResolveConflict).toHaveBeenCalledWith(
+    expect.objectContaining({ id: "c1" }),
+    "theirs",
+    undefined,
+  );
+});
+
+test("override reveals an input and saves the entered value", () => {
+  const onResolveConflict = jest.fn();
+  render(
+    wrap(
+      <ContentBrowser
+        {...base}
+        selectedChange={change}
+        selectedConflicts={[{ id: "c1", field: "status", isBody: false, before: "draft", after: "published" }]}
+        onResolveConflict={onResolveConflict}
+      />,
+    ),
+  );
+
+  fireEvent.click(screen.getByTestId("conflict-c1-override"));
+  fireEvent.change(screen.getByTestId("conflict-c1-override-input"), { target: { value: "archived" } });
+  fireEvent.click(screen.getByTestId("conflict-c1-override-save"));
+  expect(onResolveConflict).toHaveBeenCalledWith(expect.objectContaining({ id: "c1" }), "override", "archived");
+});
+
+test("the sidebar shows a conflict count and the list highlights conflicted rows", () => {
+  const withConflicts: CmsNavSection[] = [
+    { title: "Changed content", items: [{ key: "posts", label: "Blog posts", icon: "newspaper", count: 2, conflicts: 1 }] },
+  ];
+  const conflictedEntries: CmsEntry[] = [
+    { id: "a", path: "content/blog/git-content.md", title: "Editing content in Git", body: "", status: "M", conflicted: true },
+    { id: "b", path: "content/blog/other.md", title: "Other", body: "", status: "M" },
+  ];
+  render(wrap(<ContentBrowser {...base} sections={withConflicts} entries={conflictedEntries} />));
+
+  // Sidebar: a red conflict pill on the collection.
+  expect(screen.getByTestId("nav-posts-conflicts")).toHaveTextContent("1");
+  // List: the conflicted row carries a Conflict badge; the clean one doesn't.
+  const badges = screen.getAllByText("Conflict");
+  expect(badges.length).toBe(1);
+});