@thepalaceproject/circulation-admin 1.43.0-post.17 → 1.43.0-post.18

package/package.json

@@ -143,5 +143,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.43.0-post.17"
+  "version": "1.43.0-post.18"
 }

package/tests/jest/components/AdvancedSearchBuilder.test.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+// AdvancedSearchBuilder is a pure forwarding component: it renders an
+// AdvancedSearchFilterInput and an AdvancedSearchFilterViewer and threads their
+// callbacks up to the builder's handlers, prefixed with the builder `name`. Mock
+// both children to markers that capture the props they receive, so those
+// forwarding closures can be exercised directly — including `onMove`, which is
+// otherwise only reachable through a real react-dnd drag that jsdom can't perform.
+let inputProps: any;
+let viewerProps: any;
+jest.mock("../../../src/components/AdvancedSearchFilterInput", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    inputProps = props;
+    return <div data-testid="filter-input" data-name={props.name} />;
+  },
+}));
+jest.mock("../../../src/components/AdvancedSearchFilterViewer", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    viewerProps = props;
+    return (
+      <div
+        data-testid="filter-viewer"
+        data-read-only={String(props.readOnly)}
+      />
+    );
+  },
+}));
+
+import AdvancedSearchBuilder from "../../../src/components/AdvancedSearchBuilder";
+
+describe("AdvancedSearchBuilder", () => {
+  const query = { id: "0", key: "genre", value: "Horror" };
+
+  const renderBuilder = (overrides: Record<string, unknown> = {}) => {
+    const handlers = {
+      addQuery: jest.fn(),
+      updateClearFiltersFlag: jest.fn(),
+      updateQueryBoolean: jest.fn(),
+      moveQuery: jest.fn(),
+      removeQuery: jest.fn(),
+      selectQuery: jest.fn(),
+    };
+    render(
+      <AdvancedSearchBuilder
+        isOwner
+        name="include"
+        query={query as any}
+        selectedQueryId="0"
+        {...handlers}
+        {...overrides}
+      />
+    );
+    return handlers;
+  };
+
+  beforeEach(() => {
+    inputProps = undefined;
+    viewerProps = undefined;
+  });
+
+  it("renders the filter input and the viewer", () => {
+    renderBuilder();
+
+    expect(screen.getByTestId("filter-input")).toHaveAttribute(
+      "data-name",
+      "include"
+    );
+    expect(screen.getByTestId("filter-viewer")).toBeInTheDocument();
+    expect(viewerProps.query).toBe(query);
+    expect(viewerProps.selectedQueryId).toBe("0");
+  });
+
+  it("hides the filter input and marks the viewer read-only when not the owner", () => {
+    renderBuilder({ isOwner: false });
+
+    expect(screen.queryByTestId("filter-input")).not.toBeInTheDocument();
+    expect(screen.getByTestId("filter-viewer")).toHaveAttribute(
+      "data-read-only",
+      "true"
+    );
+  });
+
+  it("forwards the input's onAdd and clear-filters callbacks with the builder name", () => {
+    const { addQuery, updateClearFiltersFlag } = renderBuilder();
+
+    const newQuery = { key: "title", value: "The Shining" };
+    inputProps.onAdd(newQuery);
+    inputProps.onClearFiltersFlagChange(true);
+
+    expect(addQuery).toHaveBeenCalledWith("include", newQuery);
+    expect(updateClearFiltersFlag).toHaveBeenCalledWith("include", true);
+  });
+
+  it("forwards the viewer's callbacks to their handlers with the builder name", () => {
+    const { updateQueryBoolean, moveQuery, removeQuery, selectQuery } =
+      renderBuilder();
+
+    viewerProps.onBooleanChange("2", "or");
+    viewerProps.onMove("2", "33");
+    viewerProps.onRemove("2");
+    viewerProps.onSelect("2");
+
+    expect(updateQueryBoolean).toHaveBeenCalledWith("include", "2", "or");
+    expect(moveQuery).toHaveBeenCalledWith("include", "2", "33");
+    expect(removeQuery).toHaveBeenCalledWith("include", "2");
+    expect(selectQuery).toHaveBeenCalledWith("include", "2");
+  });
+});

package/tests/jest/components/BookDetailsTabContainer.test.tsx

@@ -0,0 +1,237 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { Provider } from "react-redux";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+import { getBookData } from "../../../src/features/book/bookEditorSlice";
+
+// Each tab panel is a connected component that fetches over the network on mount.
+// This container's behavior is the tab SET, tab SWITCHING, and clearing book data,
+// not the panels' internals, so mock each panel to a marker echoing the props the
+// container is responsible for threading into it.
+jest.mock("../../../src/components/BookDetailsEditor", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-details-editor"
+      data-csrf-token={props.csrfToken}
+      data-book-url={props.bookUrl}
+    />
+  ),
+}));
+jest.mock("../../../src/components/Classifications", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="classifications" data-book-url={props.bookUrl} />
+  ),
+}));
+jest.mock("../../../src/components/CustomListsForBook", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists-for-book"
+      data-book-url={props.bookUrl}
+      data-library={props.library}
+    />
+  ),
+}));
+jest.mock("../../../src/components/BookCoverEditor", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="book-cover-editor" data-book-url={props.bookUrl} />
+  ),
+}));
+
+import BookDetailsTabContainerConnected, {
+  BookDetailsTabContainer,
+} from "../../../src/components/BookDetailsTabContainer";
+
+// The container reads `router` and `pathFor` from the legacy React context the
+// app supplies in production. Wrap it in a small provider that hands it those.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    router: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const TEST_BOOK_URL = "book url";
+const TEST_COLLECTION_URL = "collection url";
+
+describe("BookDetailsTabContainer", () => {
+  const pathFor = (collectionUrl: string, bookUrl: string, tab?: string) =>
+    `${collectionUrl}::${bookUrl}::${tab}`;
+
+  type Overrides = {
+    bookData?: any;
+    bookUrl?: string;
+    clearBook?: jest.Mock;
+    push?: jest.Mock;
+  };
+
+  const renderContainer = (overrides: Overrides = {}) => {
+    const push = overrides.push || jest.fn();
+    const clearBook = overrides.clearBook || jest.fn();
+    const context = { router: { push }, pathFor };
+    // One store for the lifetime of the render: a fresh one per element() call
+    // would hand the panels a new store identity on every rerender.
+    const store = buildStore();
+    const element = (bookUrl: string, bookData: any) => (
+      <LegacyContextProvider context={context}>
+        <BookDetailsTabContainer
+          bookUrl={bookUrl}
+          collectionUrl={TEST_COLLECTION_URL}
+          csrfToken="token"
+          refreshCatalog={jest.fn()}
+          store={store}
+          library={() => "library"}
+          canSuppress={true}
+          complaintsCount={0}
+          bookData={bookData}
+          clearBook={clearBook}
+          tab={null}
+        >
+          <div className="bookDetails">Moby Dick</div>
+        </BookDetailsTabContainer>
+      </LegacyContextProvider>
+    );
+    const result = render(
+      element(overrides.bookUrl ?? TEST_BOOK_URL, overrides.bookData ?? null)
+    );
+    const rerenderWith = (bookUrl: string, bookData: any = null) =>
+      result.rerender(element(bookUrl, bookData));
+    return { ...result, push, clearBook, rerenderWith };
+  };
+
+  it("shows book details", () => {
+    renderContainer();
+    expect(screen.getByText("Moby Dick")).toBeInTheDocument();
+  });
+
+  it("shows details, edit, and classifications tabs", () => {
+    renderContainer();
+    for (const name of ["Details", "Edit", "Classifications"]) {
+      expect(screen.getByRole("link", { name })).toBeInTheDocument();
+    }
+  });
+
+  it("only shows cover tab when the book data has a change cover link", () => {
+    const { rerenderWith } = renderContainer();
+    expect(
+      screen.queryByRole("link", { name: "Cover" })
+    ).not.toBeInTheDocument();
+
+    rerenderWith(TEST_BOOK_URL, {
+      title: "title",
+      changeCoverLink: {
+        href: "/change-cover",
+        rel: "http://librarysimplified.org/terms/rel/change_cover",
+      },
+    });
+    expect(screen.getByRole("link", { name: "Cover" })).toBeInTheDocument();
+  });
+
+  it("shows editor", () => {
+    renderContainer();
+    const editor = screen.getByTestId("book-details-editor");
+    expect(editor).toHaveAttribute("data-csrf-token", "token");
+    expect(editor).toHaveAttribute("data-book-url", TEST_BOOK_URL);
+  });
+
+  it("shows classifications", () => {
+    renderContainer();
+    expect(screen.getByTestId("classifications")).toHaveAttribute(
+      "data-book-url",
+      TEST_BOOK_URL
+    );
+  });
+
+  it("shows lists", () => {
+    renderContainer();
+    const lists = screen.getByTestId("custom-lists-for-book");
+    expect(lists).toHaveAttribute("data-book-url", TEST_BOOK_URL);
+    expect(lists).toHaveAttribute("data-library", "library");
+  });
+
+  it("uses router to navigate when tab is clicked", async () => {
+    const { push } = renderContainer();
+    await userEvent.click(screen.getByRole("link", { name: "Edit" }));
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledWith(
+      pathFor(TEST_COLLECTION_URL, TEST_BOOK_URL, "edit")
+    );
+  });
+
+  it("clears book data when receiving new book url", () => {
+    const clearBook = jest.fn();
+    const { rerenderWith } = renderContainer({ clearBook });
+    rerenderWith("new book url");
+    expect(clearBook).toHaveBeenCalledTimes(1);
+  });
+
+  it("clears book data on unmount", () => {
+    const clearBook = jest.fn();
+    const { unmount } = renderContainer({ clearBook });
+    unmount();
+    expect(clearBook).toHaveBeenCalledTimes(1);
+  });
+
+  // Render the CONNECTED default export so mapStateToProps / mapDispatchToProps
+  // (which run only when the connected component mounts) are exercised.
+  const renderConnected = (store = buildStore()) =>
+    render(
+      <Provider store={store}>
+        <LegacyContextProvider
+          context={{ router: { push: jest.fn() }, pathFor }}
+        >
+          <BookDetailsTabContainerConnected
+            bookUrl={TEST_BOOK_URL}
+            collectionUrl={TEST_COLLECTION_URL}
+            csrfToken="token"
+            refreshCatalog={jest.fn()}
+            library={() => "library"}
+            canSuppress={true}
+            tab={null}
+          >
+            <div className="bookDetails">Moby Dick</div>
+          </BookDetailsTabContainerConnected>
+        </LegacyContextProvider>
+      </Provider>
+    );
+
+  it("wires up store and dispatch when connected", () => {
+    renderConnected();
+    expect(screen.getByRole("link", { name: "Details" })).toBeInTheDocument();
+    expect(screen.getByText("Moby Dick")).toBeInTheDocument();
+  });
+
+  it("takes book data from the store when connected", () => {
+    const store = buildStore();
+    store.dispatch(
+      getBookData.fulfilled(
+        {
+          title: "title",
+          changeCoverLink: {
+            href: "/change-cover",
+            rel: "http://librarysimplified.org/terms/rel/change_cover",
+          },
+        } as any,
+        "request-id",
+        { url: TEST_BOOK_URL } as any
+      )
+    );
+    renderConnected(store);
+    // The cover tab appears only when bookData carries a changeCoverLink, so it
+    // is the observable proof that mapStateToProps threaded the store's book
+    // data into the container.
+    expect(screen.getByRole("link", { name: "Cover" })).toBeInTheDocument();
+  });
+});

package/tests/jest/components/CatalogServices.test.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { screen, within } from "@testing-library/react";
-import { CatalogServices } from "../../../src/components/CatalogServices";
+import CatalogServicesConnected, {
+  CatalogServices,
+} from "../../../src/components/CatalogServices";
 import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 
 describe("CatalogServices", () => {
@@ -61,3 +65,36 @@ describe("CatalogServices", () => {
     );
   });
 });
+
+describe("CatalogServices - connected wiring", () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it("wires mapStateToProps/mapDispatchToProps and renders the fetched list", async () => {
+    jest.spyOn(globalThis, "fetch").mockImplementation(
+      async () =>
+        new Response(
+          JSON.stringify({
+            catalog_services: [
+              { id: 2, protocol: "test protocol", name: "Test Catalog" },
+            ],
+            protocols: [{ name: "test protocol", label: "TP", settings: [] }],
+          }),
+          { status: 200, headers: { "Content-Type": "application/json" } }
+        )
+    );
+    const store = buildStore();
+
+    renderWithProviders(<CatalogServicesConnected csrfToken="token" />, {
+      reduxProviderProps: { store },
+      appConfigSettings: { roles: [{ role: "system" }] },
+    });
+
+    // The edit link only appears once the on-mount fetch resolves and
+    // mapStateToProps feeds the fetched service back in as props.
+    const editLink = await screen.findByRole("link", { name: /edit/i });
+    expect(editLink).toHaveAttribute(
+      "href",
+      "/admin/web/config/catalogServices/edit/2"
+    );
+  });
+});

package/tests/jest/components/ConfigTabContainer.test.tsx

@@ -0,0 +1,196 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+import Admin from "../../../src/models/Admin";
+
+// Every configuration tab panel is a connected component that fetches on mount.
+// This container's behavior is the tab SET and tab SWITCHING, not the panels'
+// internals, so mock each panel to a marker echoing the props the container is
+// responsible for threading into it (csrfToken / editOrCreate / identifier).
+const panelMock = (testId: string) => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid={testId}
+      data-csrf-token={props.csrfToken}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+    />
+  ),
+});
+
+jest.mock("../../../src/components/Libraries", () => panelMock("libraries"));
+jest.mock("../../../src/components/Collections", () =>
+  panelMock("collections")
+);
+jest.mock("../../../src/components/IndividualAdmins", () =>
+  panelMock("individual-admins")
+);
+jest.mock("../../../src/components/PatronAuthServices", () =>
+  panelMock("patron-auth-services")
+);
+jest.mock("../../../src/components/MetadataServices", () =>
+  panelMock("metadata-services")
+);
+jest.mock("../../../src/components/CatalogServices", () =>
+  panelMock("catalog-services")
+);
+jest.mock("../../../src/components/DiscoveryServices", () =>
+  panelMock("discovery-services")
+);
+jest.mock("../../../src/components/SitewideAnnouncements", () =>
+  panelMock("sitewide-announcements")
+);
+
+import ConfigTabContainer from "../../../src/components/ConfigTabContainer";
+
+// ConfigTabContainer reads `router`, `pathFor`, and `admin` from the legacy React
+// context the app supplies in production. Wrap it in a small provider that hands
+// it those.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    router: PropTypes.object,
+    pathFor: PropTypes.func,
+    admin: PropTypes.object,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+describe("ConfigTabContainer", () => {
+  const systemAdmin = new Admin([{ role: "system" }]);
+  const libraryManagerA = new Admin([{ role: "manager", library: "a" }]);
+  const sitewideLibrarian = new Admin([{ role: "librarian-all" }]);
+
+  const renderWithAdmin = (admin: Admin, push: jest.Mock = jest.fn()) => {
+    const context = { router: { push }, pathFor: jest.fn(), admin };
+    const result = render(
+      <LegacyContextProvider context={context}>
+        <ConfigTabContainer
+          tab={null}
+          csrfToken="token"
+          store={buildStore()}
+          editOrCreate="edit"
+          identifier="identifier"
+        />
+      </LegacyContextProvider>
+    );
+    return { ...result, push };
+  };
+
+  const expectPanelProps = (testId: string) => {
+    const panel = screen.getByTestId(testId);
+    expect(panel).toHaveAttribute("data-csrf-token", "token");
+    expect(panel).toHaveAttribute("data-edit-or-create", "edit");
+    expect(panel).toHaveAttribute("data-identifier", "identifier");
+  };
+
+  describe("for system admin", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(systemAdmin);
+      for (const name of [
+        "Libraries",
+        "Admins",
+        "Collections",
+        "Patron Authentication",
+        "Metadata",
+        "External Catalogs",
+        "Discovery",
+        "Sitewide Announcements",
+      ]) {
+        expect(screen.getByRole("link", { name })).toBeInTheDocument();
+      }
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(systemAdmin);
+      for (const testId of [
+        "libraries",
+        "individual-admins",
+        "collections",
+        "patron-auth-services",
+        "metadata-services",
+        "catalog-services",
+        "discovery-services",
+        "sitewide-announcements",
+      ]) {
+        expectPanelProps(testId);
+      }
+    });
+
+    it("uses router to navigate when tab is clicked", async () => {
+      const { push } = renderWithAdmin(systemAdmin);
+      await userEvent.click(screen.getByRole("link", { name: "Collections" }));
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenCalledWith("/admin/web/config/collections");
+    });
+  });
+
+  describe("for library manager", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(libraryManagerA);
+      expect(
+        screen.getByRole("link", { name: "Libraries" })
+      ).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: "Admins" })).toBeInTheDocument();
+      for (const name of [
+        "Collections",
+        "Patron Authentication",
+        "Metadata",
+        "External Catalogs",
+      ]) {
+        expect(screen.queryByRole("link", { name })).not.toBeInTheDocument();
+      }
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(libraryManagerA);
+      expectPanelProps("libraries");
+      expectPanelProps("individual-admins");
+      for (const testId of [
+        "collections",
+        "patron-auth-services",
+        "metadata-services",
+        "catalog-services",
+        "discovery-services",
+        "sitewide-announcements",
+      ]) {
+        expect(screen.queryByTestId(testId)).not.toBeInTheDocument();
+      }
+    });
+  });
+
+  describe("for librarian", () => {
+    it("shows tabs", () => {
+      const { container } = renderWithAdmin(sitewideLibrarian);
+      const links = container.querySelectorAll("ul.nav-tabs a");
+      expect(links).toHaveLength(1);
+      expect(
+        screen.getByRole("link", { name: "Libraries" })
+      ).toBeInTheDocument();
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(sitewideLibrarian);
+      expectPanelProps("libraries");
+      for (const testId of [
+        "individual-admins",
+        "collections",
+        "patron-auth-services",
+        "metadata-services",
+        "catalog-services",
+        "discovery-services",
+        "sitewide-announcements",
+      ]) {
+        expect(screen.queryByTestId(testId)).not.toBeInTheDocument();
+      }
+    });
+  });
+});

package/tests/jest/components/CustomListsForBook.test.tsx

@@ -312,4 +312,37 @@ describe("CustomListsForBook", () => {
     expect(screen.getByRole("button", { name: "Delete" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
   });
+
+  it("resyncs its lists when the book url changes", () => {
+    const commonProps = {
+      csrfToken: "token",
+      library: "library",
+      refreshCatalog: jest.fn().mockResolvedValue(undefined),
+      allCustomLists: allCustomLists as any,
+      fetchAllCustomLists: jest.fn(),
+      fetchCustomListsForBook: jest.fn(),
+      editCustomListsForBook: jest.fn().mockResolvedValue(undefined),
+    };
+    const { rerender } = render(
+      <UnconnectedCustomListsForBook
+        {...commonProps}
+        book={{ id: "a", title: "Book A" } as any}
+        bookUrl="works/book-a"
+        customListsForBook={listsForBook as any}
+      />
+    );
+    // list 2 (the book's only list) is in the current column.
+    expect(screen.getByText("list 2")).toBeInTheDocument();
+
+    // A new book url re-syncs the current lists from the new customListsForBook.
+    rerender(
+      <UnconnectedCustomListsForBook
+        {...commonProps}
+        book={{ id: "b", title: "Book B" } as any}
+        bookUrl="works/book-b"
+        customListsForBook={[allCustomLists[0]] as any}
+      />
+    );
+    expect(screen.getByText("list 1")).toBeInTheDocument();
+  });
 });

package/tests/jest/components/Libraries.test.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import Libraries from "../../../src/components/Libraries";
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+
+// The connected default export is what the app mounts, so render that rather
+// than the bare component: it is the only thing that exercises Libraries'
+// mapStateToProps/mapDispatchToProps.
+describe("Libraries - connected wiring", () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it("wires mapStateToProps/mapDispatchToProps and renders the fetched list", async () => {
+    jest.spyOn(globalThis, "fetch").mockImplementation(
+      async () =>
+        new Response(
+          JSON.stringify({
+            libraries: [
+              {
+                uuid: "uuid-nypl",
+                short_name: "nypl",
+                name: "New York Public Library",
+                settings: {},
+              },
+            ],
+          }),
+          { status: 200, headers: { "Content-Type": "application/json" } }
+        )
+    );
+
+    renderWithProviders(<Libraries csrfToken="token" />, {
+      reduxProviderProps: { store: buildStore() },
+      appConfigSettings: { roles: [{ role: "system" }] },
+    });
+
+    // The library and its edit control appear once the on-mount fetch resolves
+    // and mapStateToProps feeds the fetched data back in as props.
+    expect(
+      await screen.findByText("New York Public Library")
+    ).toBeInTheDocument();
+    const editLink = await screen.findByRole("link", { name: /edit/i });
+    expect(editLink).toHaveAttribute(
+      "href",
+      "/admin/web/config/libraries/edit/uuid-nypl"
+    );
+  });
+});

package/tests/jest/components/MetadataServices.test.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { screen, within } from "@testing-library/react";
-import { MetadataServices } from "../../../src/components/MetadataServices";
+import MetadataServicesConnected, {
+  MetadataServices,
+} from "../../../src/components/MetadataServices";
 import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 
 describe("MetadataServices", () => {
@@ -57,3 +61,35 @@ describe("MetadataServices", () => {
     );
   });
 });
+
+describe("MetadataServices - connected wiring", () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it("wires mapStateToProps/mapDispatchToProps and renders the fetched list", async () => {
+    jest.spyOn(globalThis, "fetch").mockImplementation(
+      async () =>
+        new Response(
+          JSON.stringify({
+            metadata_services: [
+              { id: 2, protocol: "test protocol", name: "Test Metadata" },
+            ],
+            protocols: [{ name: "test protocol", label: "TP", settings: [] }],
+          }),
+          { status: 200, headers: { "Content-Type": "application/json" } }
+        )
+    );
+
+    renderWithProviders(<MetadataServicesConnected csrfToken="token" />, {
+      reduxProviderProps: { store: buildStore() },
+      appConfigSettings: { roles: [{ role: "system" }] },
+    });
+
+    // The edit link only appears once the on-mount fetch resolves and
+    // mapStateToProps feeds the fetched service back in as props.
+    const editLink = await screen.findByRole("link", { name: /edit/i });
+    expect(editLink).toHaveAttribute(
+      "href",
+      "/admin/web/config/metadata/edit/2"
+    );
+  });
+});

package/tests/jest/components/SelfTestsTabContainer.test.tsx

@@ -0,0 +1,216 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+
+// Each active tab renders the connected SelfTestsCategory, which fetches on mount
+// and recurses into the self-tests machinery. This container's behavior is which
+// slice of the store each category gets and under what type/link name, so mock it
+// to a marker echoing those. `data-items` names the slice's contents so passing
+// the wrong category's items — or the whole items object — is visible.
+jest.mock("../../../src/components/SelfTestsCategory", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="self-tests-category"
+      data-type={props.type}
+      data-link-name={props.linkName}
+      data-items={
+        Array.isArray(props.items)
+          ? props.items.map((item: any) => item.name).join(",")
+          : `not-an-array:${typeof props.items}`
+      }
+    />
+  ),
+}));
+
+import { SelfTestsTabContainer } from "../../../src/components/SelfTestsTabContainer";
+
+// SelfTestsTabContainer reads `router` and `pathFor` from legacy react-router
+// context via static contextTypes (handleSelect calls router.push). Supply them
+// through a tiny legacy-context provider.
+class LegacyContextProvider extends React.Component<{
+  router: { push: jest.Mock };
+  pathFor: jest.Mock;
+  children: React.ReactNode;
+}> {
+  static childContextTypes = {
+    router: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  getChildContext() {
+    return { router: this.props.router, pathFor: this.props.pathFor };
+  }
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
+
+describe("SelfTestsTabContainer", () => {
+  let goToTab: jest.Mock;
+  let fetchItems: jest.Mock;
+  let router: { push: jest.Mock };
+  let pathFor: jest.Mock;
+  let store;
+
+  const collections = [
+    {
+      id: 1,
+      name: "collection 1",
+      protocol: "protocol",
+      self_test_results: {
+        duration: 1.75,
+        start: "2018-08-07T19:34:54Z",
+        end: "2018-08-07T19:34:55Z",
+        results: [
+          {
+            duration: 0.000119,
+            end: "2018-08-07T19:34:54Z",
+            exception: null,
+            name: "Initial setup.",
+            result: null,
+            start: "2018-08-07T19:34:54Z",
+            success: true,
+          },
+        ],
+      },
+    },
+  ];
+
+  beforeEach(() => {
+    store = buildStore();
+    goToTab = jest.fn();
+    fetchItems = jest.fn();
+    router = { push: jest.fn() };
+    pathFor = jest.fn();
+  });
+
+  const element = (overrides = {}) => {
+    const props = {
+      store,
+      goToTab,
+      fetchItems,
+      tab: "collections",
+      items: { protocols: [], collections },
+      ...overrides,
+    };
+    return (
+      <LegacyContextProvider router={router} pathFor={pathFor}>
+        <SelfTestsTabContainer {...props} />
+      </LegacyContextProvider>
+    );
+  };
+
+  const renderContainer = (overrides = {}) => render(element(overrides));
+
+  it("renders a tab container", () => {
+    const { container } = renderContainer();
+    expect(container.firstChild).toHaveClass("tab-container");
+  });
+
+  it("renders tabs and defaults to showing the Collections tab", () => {
+    const { container } = renderContainer();
+    const tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs).toHaveLength(3);
+
+    expect(tabs[0]).toHaveTextContent("Collections");
+    expect(tabs[0]).toHaveClass("active");
+
+    expect(tabs[1]).toHaveTextContent("Patron Authentication");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    expect(tabs[2]).toHaveTextContent("Metadata Services");
+    expect(tabs[2]).not.toHaveClass("active");
+  });
+
+  it("renders tab content", () => {
+    const { container } = renderContainer();
+
+    // Only the collections data is present, so its category renders; the other
+    // two tabs fall back to a loading indicator.
+    const markers = screen.getAllByTestId("self-tests-category");
+    expect(markers).toHaveLength(1);
+    expect(markers[0]).toHaveAttribute("data-type", "collection");
+    expect(markers[0]).toHaveAttribute("data-link-name", "collections");
+    expect(markers[0]).toHaveAttribute("data-items", "collection 1");
+
+    expect(container.querySelectorAll(".loading")).toHaveLength(2);
+  });
+
+  it("calls fetchItems on mount", () => {
+    renderContainer();
+    expect(fetchItems).toHaveBeenCalled();
+  });
+
+  it("shows an error message", () => {
+    const { container, rerender } = renderContainer();
+    expect(container.querySelectorAll(".alert-danger")).toHaveLength(0);
+
+    rerender(
+      element({
+        fetchError: { status: 401, response: "error fetching diagnostics" },
+      })
+    );
+
+    expect(container.querySelectorAll(".alert-danger")).toHaveLength(3);
+  });
+
+  it("calls goToTab and pushes to the router when a tab is clicked", async () => {
+    renderContainer();
+
+    await userEvent.click(
+      screen.getByRole("link", { name: "Patron Authentication" })
+    );
+
+    expect(goToTab).toHaveBeenCalledTimes(1);
+    expect(goToTab).toHaveBeenCalledWith("patronAuthServices");
+    await waitFor(() =>
+      expect(router.push).toHaveBeenCalledWith(
+        "/admin/web/troubleshooting/self-tests/patronAuthServices"
+      )
+    );
+  });
+
+  it("switches tabs when the tab prop changes", () => {
+    const { container, rerender } = renderContainer();
+    let tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    rerender(element({ tab: "patronAuthServices" }));
+
+    tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).not.toHaveClass("active");
+    expect(tabs[1]).toHaveClass("active");
+  });
+
+  it("derives the store key, type, and link name for each category", () => {
+    // A category only renders once its store key holds items, so populate all
+    // three with distinctly named items: the key each category is looked up
+    // under is then observable in the items its marker receives.
+    renderContainer({
+      items: {
+        collections: [{ id: 1, name: "a collection" }],
+        patron_auth_services: [{ id: 2, name: "a patron auth service" }],
+        metadata_services: [{ id: 3, name: "a metadata service" }],
+      },
+    });
+
+    const markers = screen.getAllByTestId("self-tests-category");
+    expect(markers).toHaveLength(3);
+
+    expect(markers[0]).toHaveAttribute("data-type", "collection");
+    expect(markers[0]).toHaveAttribute("data-link-name", "collections");
+    expect(markers[0]).toHaveAttribute("data-items", "a collection");
+
+    expect(markers[1]).toHaveAttribute("data-type", "patron_auth_service");
+    expect(markers[1]).toHaveAttribute("data-link-name", "patronAuth");
+    expect(markers[1]).toHaveAttribute("data-items", "a patron auth service");
+
+    expect(markers[2]).toHaveAttribute("data-type", "metadata_service");
+    expect(markers[2]).toHaveAttribute("data-link-name", "metadata");
+    expect(markers[2]).toHaveAttribute("data-items", "a metadata service");
+  });
+});