@gogitcms/design-system 0.15.0-next.3

package/src/__tests__/MediaBrowser.test.tsx

@@ -0,0 +1,353 @@
+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 { MediaBrowser, conditionsFrom } from "../components/MediaBrowser";
+import { MediaProvider } from "../components/MediaField";
+import { MEDIA_NAV_KEY, mediaNavKey, isMediaNavKey, parseMediaNavKey } from "../media";
+import type { MediaApi, MediaAsset, MediaFacets } from "../media";
+
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+function asset(over: Partial<MediaAsset> = {}): MediaAsset {
+  return {
+    id: "m1",
+    set: "uploads",
+    repoPath: "public/uploads/hero.png",
+    publicPath: "/uploads/hero.png",
+    cdnPath: null,
+    mimeType: "image/png",
+    extension: "png",
+    kind: "image",
+    size: 2048,
+    width: 800,
+    height: 600,
+    pending: false,
+    url: "https://store.example.com/signed/hero.png",
+    ...over,
+  };
+}
+
+const facets: MediaFacets = {
+  extensions: [{ value: "png", count: 2 }, { value: "pdf", count: 1 }],
+  mimeTypes: [{ value: "image/png", count: 2 }, { value: "application/pdf", count: 1 }],
+  kinds: [{ value: "image", count: 2 }, { value: "pdf", count: 1 }],
+  minSize: 9,
+  maxSize: 4096,
+  total: 3,
+};
+
+function makeApi(over: Partial<MediaApi> = {}): MediaApi {
+  return {
+    sets: [
+      { name: "uploads", path: "public/uploads/**/*", mimeTypes: [], count: 3 },
+      { name: "documents", path: "public/docs/**/*.pdf", mimeTypes: [], count: 1 },
+    ],
+    resolve: jest.fn(async () => []),
+    byId: jest.fn(async () => null),
+    list: jest.fn(async () => [asset(), asset({ id: "m2", repoPath: "files/manual.pdf", kind: "pdf", extension: "pdf", mimeType: "application/pdf" })]),
+    count: jest.fn(async () => 2),
+    facets: jest.fn(async () => facets),
+    ...over,
+  };
+}
+
+function renderBrowser(api: MediaApi | undefined, set = "uploads") {
+  render(
+    <ThemeProvider>
+      <MediaProvider api={api}>
+        <MediaBrowser set={set} label="Uploads" />
+      </MediaProvider>
+    </ThemeProvider>,
+  );
+}
+
+describe("nav keys", () => {
+  test("the button and a set are both media, but only one names a set", () => {
+    expect(mediaNavKey()).toBe(MEDIA_NAV_KEY);
+    expect(mediaNavKey("uploads")).toBe("media:uploads");
+
+    // The bare button is media with nothing selected yet.
+    expect(isMediaNavKey(MEDIA_NAV_KEY)).toBe(true);
+    expect(parseMediaNavKey(MEDIA_NAV_KEY)).toBeNull();
+
+    // A set is media, and names itself.
+    expect(isMediaNavKey("media:uploads")).toBe(true);
+    expect(parseMediaNavKey("media:uploads")).toBe("uploads");
+  });
+
+  test("collections are never mistaken for media", () => {
+    for (const key of ["posts", "", null, undefined]) {
+      expect(isMediaNavKey(key)).toBe(false);
+      expect(parseMediaNavKey(key)).toBeNull();
+    }
+    // A collection may legitimately be *named* "media"; the colon is what
+    // separates the two spaces, and the config schema forbids it in a name.
+    expect(isMediaNavKey("media")).toBe(false);
+    expect(parseMediaNavKey("media")).toBeNull();
+  });
+});
+
+describe("sidebar section", () => {
+  const sections: CmsNavSection[] = [
+    { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+  ];
+  const entry: CmsEntry = { id: "a", path: "posts/a.md", title: "Alpha", body: "", fields: [] };
+
+  function renderShell(api: MediaApi | undefined, activeNavKey = "posts") {
+    const onSelectNav = jest.fn();
+    render(
+      <ThemeProvider>
+        <ContentBrowser
+          workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+          sections={sections}
+          activeNavKey={activeNavKey}
+          onSelectNav={onSelectNav}
+          entries={[entry]}
+          userInitials="ED"
+          media={api}
+        />
+      </ThemeProvider>,
+    );
+    return onSelectNav;
+  }
+
+  test("one Media button appears, not a row per set", () => {
+    renderShell(makeApi());
+    expect(screen.getByTestId("nav-media:")).toBeInTheDocument();
+    // The sets are the content list you get after pressing it, not sidebar rows.
+    expect(screen.queryByTestId("nav-media:uploads")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("nav-media:documents")).not.toBeInTheDocument();
+  });
+
+  test("the button counts every file across the sets", () => {
+    renderShell(makeApi());
+    // 3 uploads + 1 document.
+    expect(screen.getByTestId("nav-media:")).toHaveTextContent("4");
+  });
+
+  // The requirement: no media collections, no button.
+  test("the button is hidden when there are no media sets", () => {
+    renderShell(makeApi({ sets: [] }));
+    expect(screen.queryByTestId("nav-media:")).not.toBeInTheDocument();
+  });
+
+  test("the button is hidden when the host wires no media api at all", () => {
+    renderShell(undefined);
+    expect(screen.queryByTestId("nav-media:")).not.toBeInTheDocument();
+    // The ordinary collections are untouched.
+    expect(screen.getByTestId("nav-posts")).toBeInTheDocument();
+  });
+
+  test("pressing Media reports the bare media key", () => {
+    const onSelectNav = renderShell(makeApi());
+    fireEvent.click(screen.getByTestId("nav-media:"));
+    expect(onSelectNav).toHaveBeenCalledWith("media:");
+  });
+
+  test("Media lists the collections in the content pane, details prompts for one", () => {
+    renderShell(makeApi(), "media:");
+    expect(screen.getByTestId("media-set-list")).toBeInTheDocument();
+    expect(screen.getByTestId("media-set-uploads")).toBeInTheDocument();
+    expect(screen.getByTestId("media-set-documents")).toBeInTheDocument();
+    // Nothing chosen yet, so the details pane says so rather than showing a
+    // browser for an arbitrary set.
+    expect(screen.getByTestId("media-sets-empty")).toBeInTheDocument();
+    // The document panes are gone — there is no document to edit here.
+    expect(screen.queryByTestId("pane-entries")).not.toBeInTheDocument();
+  });
+
+  test("choosing a collection reports its key to the host", () => {
+    const onSelectNav = renderShell(makeApi(), "media:");
+    fireEvent.click(screen.getByTestId("media-set-uploads"));
+    expect(onSelectNav).toHaveBeenCalledWith("media:uploads");
+  });
+
+  test("a chosen collection shows its browser in the details pane, list still visible", async () => {
+    renderShell(makeApi(), "media:uploads");
+    // The content pane keeps listing the collections so you can switch.
+    expect(screen.getByTestId("media-set-list")).toBeInTheDocument();
+    expect(await screen.findByTestId("media-grid")).toBeInTheDocument();
+    expect(screen.queryByTestId("media-sets-empty")).not.toBeInTheDocument();
+  });
+
+  // The set is not a sidebar row, so without this the sidebar would show nothing
+  // selected while media is plainly on screen.
+  test("the Media button stays active while a collection is open", () => {
+    renderShell(makeApi(), "media:uploads");
+    expect(screen.getByTestId("nav-media:")).toHaveAttribute("aria-current", "page");
+    // ...and an unrelated collection is not.
+    expect(screen.getByTestId("nav-posts")).not.toHaveAttribute("aria-current");
+  });
+});
+
+describe("browser", () => {
+  test("lists the set's assets and reports the count", async () => {
+    const api = makeApi();
+    renderBrowser(api);
+    expect(await screen.findByTestId("media-tile-m1")).toBeInTheDocument();
+    expect(screen.getByTestId("media-tile-m2")).toBeInTheDocument();
+    expect(api.list).toHaveBeenCalledWith(expect.objectContaining({ set: "uploads", limit: 60, offset: 0 }));
+    await waitFor(() => expect(screen.getByTestId("media-count")).toHaveTextContent("2 files"));
+  });
+
+  test("toggles between grid and list", async () => {
+    renderBrowser(makeApi());
+    expect(await screen.findByTestId("media-grid")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("media-view-list"));
+    expect(await screen.findByTestId("media-list")).toBeInTheDocument();
+    expect(screen.queryByTestId("media-grid")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("media-view-grid"));
+    expect(await screen.findByTestId("media-grid")).toBeInTheDocument();
+  });
+
+  test("searching re-queries with the term", async () => {
+    const api = makeApi();
+    renderBrowser(api);
+    await screen.findByTestId("media-grid");
+
+    fireEvent.change(screen.getByTestId("media-search"), { target: { value: "hero" } });
+    await waitFor(
+      () => expect(api.list).toHaveBeenCalledWith(expect.objectContaining({ search: "hero" })),
+      { timeout: 2000 },
+    );
+  });
+
+  test("the facet panel offers the values the set actually holds, with counts", async () => {
+    renderBrowser(makeApi());
+    await screen.findByTestId("media-grid");
+
+    fireEvent.click(screen.getByTestId("media-filter-toggle"));
+    expect(await screen.findByTestId("media-facets")).toBeInTheDocument();
+    expect(screen.getByTestId("facet-ext-png")).toHaveTextContent("png (2)");
+    expect(screen.getByTestId("facet-mime-image/png")).toHaveTextContent("image/png (2)");
+    expect(screen.getByTestId("facet-kind-image")).toHaveTextContent("image (2)");
+  });
+
+  // Selecting a facet must not re-query until Apply — otherwise the list churns
+  // under the user while they are still choosing.
+  test("facets apply as filters only when applied", async () => {
+    const api = makeApi();
+    renderBrowser(api);
+    await screen.findByTestId("media-grid");
+    fireEvent.click(screen.getByTestId("media-filter-toggle"));
+    await screen.findByTestId("media-facets");
+
+    const before = (api.list as jest.Mock).mock.calls.length;
+    fireEvent.click(screen.getByTestId("facet-ext-png"));
+    expect((api.list as jest.Mock).mock.calls.length).toBe(before);
+
+    fireEvent.click(screen.getByTestId("media-facets-apply"));
+    await waitFor(
+      () =>
+        expect(api.list).toHaveBeenCalledWith(
+          expect.objectContaining({
+            filters: [{ field: "extension", op: "in", values: ["png"] }],
+          }),
+        ),
+      { timeout: 2000 },
+    );
+  });
+
+  test("without a facets provider the filter toggle is not offered", async () => {
+    renderBrowser(makeApi({ facets: undefined }));
+    await screen.findByTestId("media-grid");
+    expect(screen.queryByTestId("media-filter-toggle")).not.toBeInTheDocument();
+    // Search still works — the panel is an enhancement, not a requirement.
+    expect(screen.getByTestId("media-search")).toBeInTheDocument();
+  });
+
+  test("selecting an asset opens its details", async () => {
+    renderBrowser(makeApi());
+    fireEvent.click(await screen.findByTestId("media-tile-m1"));
+
+    expect(await screen.findByText("public/uploads/hero.png")).toBeInTheDocument();
+    expect(screen.getByText("800 × 600")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("media-detail-close"));
+    await waitFor(() => expect(screen.queryByTestId("media-detail-close")).not.toBeInTheDocument());
+  });
+
+  test("an empty set says so rather than showing a blank pane", async () => {
+    renderBrowser(makeApi({ list: jest.fn(async () => []), count: jest.fn(async () => 0) }));
+    expect(await screen.findByText("This set has no files yet")).toBeInTheDocument();
+  });
+
+  test("no results under a filter reads differently from an empty set", async () => {
+    renderBrowser(makeApi({ list: jest.fn(async () => []), count: jest.fn(async () => 0) }));
+    await screen.findByText("This set has no files yet");
+
+    fireEvent.change(screen.getByTestId("media-search"), { target: { value: "zzz" } });
+    expect(await screen.findByText("Nothing matches those filters", {}, { timeout: 2000 })).toBeInTheDocument();
+  });
+
+  test("without a media api the browser says media is unavailable", () => {
+    renderBrowser(undefined);
+    expect(screen.getByText("Media is unavailable")).toBeInTheDocument();
+  });
+
+  // Switching sets must not carry one library's filters onto another, where they
+  // could match nothing and look like an empty set.
+  test("changing set resets the search", async () => {
+    const api = makeApi();
+    const { rerender } = render(
+      <ThemeProvider>
+        <MediaProvider api={api}>
+          <MediaBrowser set="uploads" label="Uploads" />
+        </MediaProvider>
+      </ThemeProvider>,
+    );
+    await screen.findByTestId("media-grid");
+    fireEvent.change(screen.getByTestId("media-search"), { target: { value: "hero" } });
+    expect(screen.getByTestId("media-search")).toHaveValue("hero");
+
+    rerender(
+      <ThemeProvider>
+        <MediaProvider api={api}>
+          <MediaBrowser set="documents" label="Documents" />
+        </MediaProvider>
+      </ThemeProvider>,
+    );
+    await waitFor(() => expect(screen.getByTestId("media-search")).toHaveValue(""));
+  });
+});
+
+describe("conditionsFrom", () => {
+  const empty = { extensions: [], mimeTypes: [], kinds: [], minSize: "", maxSize: "" };
+
+  test("no selection means no conditions", () => {
+    expect(conditionsFrom(empty)).toEqual([]);
+  });
+
+  test("multi-select within a facet becomes one `in`", () => {
+    expect(conditionsFrom({ ...empty, extensions: ["png", "jpg"] })).toEqual([
+      { field: "extension", op: "in", values: ["png", "jpg"] },
+    ]);
+  });
+
+  test("size is entered in KB and sent in bytes", () => {
+    expect(conditionsFrom({ ...empty, minSize: "10", maxSize: "100" })).toEqual([
+      { field: "size", op: "gte", value: "10240" },
+      { field: "size", op: "lte", value: "102400" },
+    ]);
+  });
+
+  test("blank or nonsensical sizes are ignored rather than sent as NaN", () => {
+    expect(conditionsFrom({ ...empty, minSize: "  ", maxSize: "abc" })).toEqual([]);
+    expect(conditionsFrom({ ...empty, minSize: "-5" })).toEqual([]);
+  });
+
+  test("different facets combine", () => {
+    const got = conditionsFrom({ ...empty, kinds: ["image"], extensions: ["png"], maxSize: "1" });
+    expect(got).toEqual([
+      { field: "extension", op: "in", values: ["png"] },
+      { field: "kind", op: "in", values: ["image"] },
+      { field: "size", op: "lte", value: "1024" },
+    ]);
+  });
+});

package/src/__tests__/MediaField.test.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { MediaField, MediaProvider } from "../components/MediaField";
+import { pathForStoreAs } from "../components/MediaField";
+import type { MediaApi, MediaAsset, MediaResolution } from "../media";
+
+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",
+};
+
+const manual: MediaAsset = {
+  ...hero,
+  id: "m2",
+  repoPath: "files/manual.pdf",
+  publicPath: null,
+  cdnPath: null,
+  mimeType: "application/pdf",
+  kind: "pdf",
+  width: null,
+  height: null,
+  url: "https://store.example.com/signed/manual.pdf",
+};
+
+function makeApi(over: Partial<MediaApi> = {}): MediaApi {
+  return {
+    sets: [{ name: "uploads", path: "public/uploads/**/*", mimeTypes: [], count: 2 }],
+    resolve: jest.fn(async (paths: string[]): Promise<MediaResolution[]> =>
+      paths.map((p) => ({ input: p, media: null, ambiguous: false, candidates: [] })),
+    ),
+    byId: jest.fn(async () => null),
+    list: jest.fn(async () => [hero, manual]),
+    ...over,
+  };
+}
+
+// api is deliberately not defaulted: passing `undefined` explicitly must mean
+// "no host wiring", not "give me the default".
+function renderField(ui: React.ReactElement, api: MediaApi | undefined) {
+  return render(
+    <ThemeProvider>
+      <MediaProvider api={api}>{ui}</MediaProvider>
+    </ThemeProvider>,
+  );
+}
+
+test("resolves a string value and previews the matched asset", async () => {
+  const api = makeApi({
+    resolve: jest.fn(async (paths: string[]) =>
+      paths.map((p) => ({ input: p, media: hero, aliasKind: "public", ambiguous: false, candidates: [] })),
+    ),
+  });
+  renderField(
+    <MediaField shape="string" value="/uploads/hero.png" onChange={jest.fn()} set="uploads" documentPath="posts/a.md" />,
+    api,
+  );
+
+  const img = await screen.findByRole("img");
+  expect(img).toHaveAttribute("src", hero.url);
+  // The document path travels with the request so relative references resolve
+  // against the right directory.
+  expect(api.resolve).toHaveBeenCalledWith(["/uploads/hero.png"], "posts/a.md");
+  // The raw stored string stays visible — the author needs to see what actually
+  // goes into the file.
+  expect(screen.getByText("/uploads/hero.png")).toBeInTheDocument();
+});
+
+test("a string that resolves to nothing renders as unmanaged, not as an error", async () => {
+  renderField(<MediaField shape="string" value="https://elsewhere.example/x.png" onChange={jest.fn()} set="uploads" />, makeApi());
+  expect(await screen.findByText("External link")).toBeInTheDocument();
+  // The value is preserved exactly; nothing was rewritten.
+  expect(screen.getByText("https://elsewhere.example/x.png")).toBeInTheDocument();
+});
+
+test("a path outside every media set is flagged without discarding the value", async () => {
+  renderField(<MediaField shape="string" value="images/gone.png" onChange={jest.fn()} set="uploads" />, makeApi());
+  expect(await screen.findByText("Not a managed asset")).toBeInTheDocument();
+  expect(screen.getByText("images/gone.png")).toBeInTheDocument();
+});
+
+test("an ambiguous basename offers candidates instead of picking one", async () => {
+  const api = makeApi({
+    resolve: jest.fn(async (paths: string[]) =>
+      paths.map((p) => ({
+        input: p,
+        media: null,
+        aliasKind: "basename",
+        ambiguous: true,
+        candidates: [hero, { ...hero, id: "m3", repoPath: "public/uploads/sub/hero.png" }],
+      })),
+    ),
+  });
+  const onChange = jest.fn();
+  renderField(<MediaField shape="string" value="hero.png" onChange={onChange} set="uploads" />, api);
+
+  expect(await screen.findByText(/2 files share this name/)).toBeInTheDocument();
+  // Nothing was auto-selected — a silently wrong image in a published page is
+  // far more expensive than one extra click.
+  expect(onChange).not.toHaveBeenCalled();
+
+  // Choosing a candidate resolves the ambiguity in the stored value.
+  fireEvent.click(screen.getByTestId("media-candidate-m3"));
+  expect(onChange).toHaveBeenCalledWith("/uploads/hero.png");
+});
+
+test("picking an asset writes the form the field's store_as declares", async () => {
+  const onChange = jest.fn();
+  renderField(<MediaField shape="string" value="" onChange={onChange} set="uploads" storeAs="repo" />, makeApi());
+
+  fireEvent.click(screen.getByTestId("media-choose"));
+  fireEvent.click(await screen.findByTestId("media-row-m1"));
+
+  expect(onChange).toHaveBeenCalledWith("public/uploads/hero.png");
+});
+
+test("the object shape stores the asset id, not a path", async () => {
+  const onChange = jest.fn();
+  renderField(<MediaField shape="object" value={null} onChange={onChange} set="uploads" />, makeApi());
+
+  fireEvent.click(screen.getByTestId("media-choose"));
+  fireEvent.click(await screen.findByTestId("media-row-m1"));
+
+  expect(onChange).toHaveBeenCalledWith({
+    id: "m1",
+    public_path: "/uploads/hero.png",
+    cdn_path: "https://cdn.example.com/uploads/hero.png",
+  });
+});
+
+test("the object shape fetches by id and never resolves", async () => {
+  const api = makeApi({ byId: jest.fn(async () => hero) });
+  renderField(<MediaField shape="object" value={{ id: "m1" }} onChange={jest.fn()} set="uploads" />, api);
+
+  await screen.findByRole("img");
+  expect(api.byId).toHaveBeenCalledWith("m1");
+  // The id is authoritative, so there is nothing to reverse-engineer.
+  expect(api.resolve).not.toHaveBeenCalled();
+});
+
+test("an object reference whose asset is gone shows as missing, keeping the value", async () => {
+  const api = makeApi({ byId: jest.fn(async () => null) });
+  const onChange = jest.fn();
+  renderField(<MediaField shape="object" value={{ id: "m9" }} onChange={onChange} set="uploads" />, api);
+
+  expect(await screen.findByText("Missing asset")).toBeInTheDocument();
+  // Silently blanking the field would destroy the evidence of what it pointed at.
+  expect(onChange).not.toHaveBeenCalled();
+});
+
+test("without a host media api the picker is disabled", () => {
+  renderField(<MediaField shape="string" value="" onChange={jest.fn()} set="uploads" />, undefined);
+  expect(screen.getByTestId("media-choose")).toBeDisabled();
+});
+
+test("readOnly hides the picker controls entirely", () => {
+  renderField(<MediaField shape="string" value="" onChange={jest.fn()} set="uploads" readOnly />, makeApi());
+  expect(screen.queryByTestId("media-choose")).not.toBeInTheDocument();
+});
+
+describe("pathForStoreAs", () => {
+  test("writes each declared form", () => {
+    expect(pathForStoreAs(hero, "repo")).toBe("public/uploads/hero.png");
+    expect(pathForStoreAs(hero, "public")).toBe("/uploads/hero.png");
+    expect(pathForStoreAs(hero, "cdn")).toBe("https://cdn.example.com/uploads/hero.png");
+  });
+
+  test("falls back down the chain when a set declares no base", () => {
+    // A set with no public_base/cdn_base serves files at their repository paths,
+    // so that is the only honest thing to write.
+    expect(pathForStoreAs(manual, "cdn")).toBe("files/manual.pdf");
+    expect(pathForStoreAs(manual, "public")).toBe("files/manual.pdf");
+  });
+});

package/src/__tests__/Notifications.test.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { NotificationBell, NotificationList, type NotificationItem } from "../components/Notifications";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const items: NotificationItem[] = [
+  { id: "1", title: "Export failed", body: "conflict", level: "error", read: false, createdAt: new Date().toISOString() },
+  { id: "2", title: "Import completed", level: "info", read: true, createdAt: new Date().toISOString() },
+];
+
+test("bell shows an unread dot only when there are unread notifications", () => {
+  const { rerender } = render(wrap(<NotificationBell notifications={items} unreadCount={2} />));
+  expect(screen.getByTestId("notification-unread-dot")).toBeInTheDocument();
+
+  rerender(wrap(<NotificationBell notifications={items} unreadCount={0} />));
+  expect(screen.queryByTestId("notification-unread-dot")).not.toBeInTheDocument();
+});
+
+test("opening the bell reveals the menu, calls onOpen, and lists notifications", () => {
+  const onOpen = jest.fn();
+  render(wrap(<NotificationBell notifications={items} unreadCount={2} onOpen={onOpen} />));
+  expect(screen.queryByTestId("notification-menu")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("notification-bell"));
+  expect(onOpen).toHaveBeenCalledTimes(1);
+  const menu = screen.getByTestId("notification-menu");
+  expect(menu).toHaveTextContent("Export failed");
+  expect(menu).toHaveTextContent("Import completed");
+});
+
+test("Read more fires onViewAll and closes the menu", () => {
+  const onViewAll = jest.fn();
+  render(wrap(<NotificationBell notifications={items} unreadCount={2} onViewAll={onViewAll} />));
+  fireEvent.click(screen.getByTestId("notification-bell"));
+  fireEvent.click(screen.getByTestId("notification-read-more"));
+  expect(onViewAll).toHaveBeenCalledTimes(1);
+  expect(screen.queryByTestId("notification-menu")).not.toBeInTheDocument();
+});
+
+test("empty bell shows the caught-up message", () => {
+  render(wrap(<NotificationBell notifications={[]} unreadCount={0} />));
+  fireEvent.click(screen.getByTestId("notification-bell"));
+  expect(screen.getByTestId("notification-empty")).toBeInTheDocument();
+});
+
+test("NotificationList renders rows and empty state", () => {
+  const { rerender } = render(wrap(<NotificationList notifications={items} />));
+  expect(screen.getByTestId("notification-list")).toHaveTextContent("Export failed");
+
+  rerender(wrap(<NotificationList notifications={[]} />));
+  expect(screen.getByTestId("notification-list-empty")).toBeInTheDocument();
+});
+
+test("bell becomes a spinner while busy, keeping the menu and the unread dot", () => {
+  const onOpen = jest.fn();
+  const { rerender } = render(wrap(<NotificationBell notifications={items} unreadCount={2} />));
+  expect(screen.queryByTestId("notification-busy")).not.toBeInTheDocument();
+
+  rerender(wrap(<NotificationBell notifications={items} unreadCount={2} onOpen={onOpen} busy />));
+  expect(screen.getByTestId("notification-busy")).toBeInTheDocument();
+  // Unread notifications don't stop being unread because an import is running.
+  expect(screen.getByTestId("notification-unread-dot")).toBeInTheDocument();
+  // And the menu still opens — the spinner replaces the glyph, not the control.
+  fireEvent.click(screen.getByTestId("notification-bell"));
+  expect(onOpen).toHaveBeenCalled();
+  expect(screen.getByTestId("notification-menu")).toBeInTheDocument();
+});