@thepalaceproject/circulation-admin 1.43.0-post.7 → 1.43.0-post.8

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.7"
+  "version": "1.43.0-post.8"
 }

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome with no behavior worth exercising here, and
+// Header pulls in the react-router v3 context that `renderWithProviders` does not
+// supply. Mock them to markers so the test stays about what AccountPage composes.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+import AccountPage from "../../../src/components/AccountPage";
+
+describe("AccountPage", () => {
+  it("renders the header and footer chrome", () => {
+    renderWithProviders(<AccountPage />);
+
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+
+  it("renders the change-password form", () => {
+    renderWithProviders(<AccountPage />);
+
+    // ChangePasswordForm is connected; its heading and fields appearing proves
+    // it received a working store and csrf token from context. EditableInput
+    // renders its label and input as siblings with no htmlFor, so there is no
+    // accessible label association to query — assert the label text instead.
+    expect(
+      screen.getByRole("heading", { name: "Change Password" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("New Password")).toBeInTheDocument();
+    expect(screen.getByText("Confirm New Password")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+
+import BookDetails from "../../../src/components/BookDetails";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+const book: BookData = {
+  id: "urn:librarysimplified.org/terms/id/3M%20ID/crrmnr9",
+  url: "http://circulation.librarysimplified.org/works/3M/crrmnr9",
+  title: "The Mayan Secrets",
+  authors: ["Clive Cussler", "Thomas Perry"],
+  contributors: ["contributor 1"],
+  summary:
+    "<b>Sam and Remi Fargo race for treasure—and survival—in this lightning-paced new adventure from #1<i> New York Times</i> bestselling author Clive Cussler.</b><br /><br />Husband-and-wife team Sam and Remi Fargo are in Mexico when they come upon a remarkable discovery—the mummified remainsof a man clutching an ancient sealed pot. Within the pot is a Mayan book larger than any known before.<br /><br />The book contains astonishing information about the Mayans, their cities, and about mankind itself. The secrets are so powerful that some people would do anything to possess them—as the Fargos are about to find out. Many men and women are going to die for that book.",
+  imageUrl: "https://dlotdqc6pnwqb.cloudfront.net/3M/crrmnr9/cover.jpg",
+  borrowUrl: "borrow url",
+  openAccessLinks: [{ url: "secrets.epub", type: "application/epub+zip" }],
+  publisher: "Penguin Publishing Group",
+  published: "February 29, 2016",
+  categories: ["Children", "10-12", "Fiction", "Adventure", "Fantasy"],
+  raw: {
+    category: [
+      {
+        $: {
+          scheme: { value: "http://schema.org/audience" },
+          label: { value: "Children" },
+        },
+      },
+      {
+        $: {
+          scheme: { value: "http://schema.org/typicalAgeRange" },
+          label: { value: "10-12" },
+        },
+      },
+      {
+        $: {
+          scheme: { value: "http://librarysimplified.org/terms/fiction/" },
+          label: { value: "Fiction" },
+        },
+      },
+      {
+        $: {
+          scheme: {
+            value: "http://librarysimplified.org/terms/genres/Simplified/",
+          },
+          label: { value: "Adventure" },
+        },
+      },
+      {
+        $: {
+          scheme: {
+            value: "http://librarysimplified.org/terms/genres/Simplified/",
+          },
+          label: { value: "Fantasy" },
+        },
+      },
+    ],
+    "bibframe:distribution": [
+      {
+        $: {
+          "bibframe:ProviderName": {
+            value: "Overdrive",
+          },
+        },
+      },
+    ],
+    link: [
+      {
+        $: {
+          rel: { value: "issues" },
+          href: { value: "http://example.com/report" },
+        },
+      },
+      {
+        $: {
+          rel: { value: "http://librarysimplified.org/terms/rel/revoke" },
+          href: { value: "http://example.com/revoke" },
+        },
+      },
+    ],
+  },
+};
+
+describe("BookDetails", () => {
+  const updateBook = jest.fn();
+
+  it("shows audience and target age", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const audience = container.querySelector(".audience");
+    expect(audience).toBeInTheDocument();
+    expect(audience).toHaveTextContent("Audience: Children (age 10-12)");
+  });
+
+  it("shows categories", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const categories = container.querySelector(".categories");
+    expect(categories).toBeInTheDocument();
+    expect(categories).toHaveTextContent("Categories: Adventure, Fantasy");
+  });
+
+  it("doesn't show categories when there aren't any", () => {
+    const bookCopy: BookData = {
+      ...book,
+      raw: { category: [], link: [] },
+    };
+    const { container } = render(
+      <BookDetails book={bookCopy} updateBook={updateBook} />
+    );
+    expect(container.querySelector(".categories")).not.toBeInTheDocument();
+  });
+
+  it("shows distributor", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const distributor = container.querySelector(".distributed-by");
+    expect(distributor).toBeInTheDocument();
+    expect(distributor).toHaveTextContent("Distributed By: Overdrive");
+  });
+
+  it("doesn't render any circulation link content", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const circulationLinks = container.querySelector(".circulation-links");
+    expect(circulationLinks).toBeInTheDocument();
+    expect(circulationLinks).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+
+import buildStore from "../../../src/store";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+// BookDetailsTabContainer is a connected TabContainer that mounts every one of its
+// tab panels on render (the metadata editor, classifications, cover, and lists
+// editors), each of which fetches over the network on mount. That machinery is
+// incidental to what BookDetailsContainer composes, so mock it to a marker that
+// echoes the props it receives and renders the book child it is handed.
+jest.mock("../../../src/components/BookDetailsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-details-tab-container"
+      data-book-url={props.bookUrl}
+      data-collection-url={props.collectionUrl}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+      data-has-library={String(!!props.library)}
+      data-has-refresh-catalog={String(!!props.refreshCatalog)}
+    >
+      {props.children}
+    </div>
+  ),
+}));
+
+import BookDetailsContainer from "../../../src/components/BookDetailsContainer";
+import BookDetails from "../../../src/components/BookDetails";
+
+// BookDetailsContainer reads its configuration from the legacy React context that
+// the OPDS web client supplies in production. `renderWithProviders` does not supply
+// the `library` (nor `tab`) keys it reads, so wrap it in a small legacy context
+// provider that hands it everything it needs.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    editorStore: PropTypes.object,
+    csrfToken: PropTypes.string,
+    tab: PropTypes.string,
+    library: PropTypes.func,
+    admin: PropTypes.object,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const bookData: BookData = {
+  id: "book id",
+  url: "book url",
+  title: "book title",
+  raw: { category: [], link: [] },
+};
+
+describe("BookDetailsContainer", () => {
+  let store;
+  let context;
+  let refreshCatalog;
+
+  beforeEach(() => {
+    store = buildStore();
+    refreshCatalog = jest.fn();
+    context = {
+      editorStore: store,
+      csrfToken: "token",
+      library: jest.fn(),
+      admin: { isLibraryManager: () => true },
+    };
+  });
+
+  const renderContainer = () =>
+    render(
+      <LegacyContextProvider context={context}>
+        <BookDetailsContainer
+          book={bookData}
+          bookUrl="book url"
+          collectionUrl="collection url"
+          refreshCatalog={refreshCatalog}
+        >
+          <BookDetails book={bookData} updateBook={jest.fn()} />
+        </BookDetailsContainer>
+      </LegacyContextProvider>
+    );
+
+  it("renders BookDetails with its child's props", () => {
+    renderContainer();
+    // The container recreates the real BookDetails from the child element's props,
+    // so the book it was handed shows up (its title is rendered as the heading).
+    expect(
+      screen.getByRole("heading", { name: "book title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a tab container with initial tab", () => {
+    renderContainer();
+    const tabContainer = screen.getByTestId("book-details-tab-container");
+    expect(tabContainer).toBeInTheDocument();
+    expect(tabContainer).toHaveAttribute("data-book-url", "book url");
+    expect(tabContainer).toHaveAttribute(
+      "data-collection-url",
+      "collection url"
+    );
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The library function, redux store, and refreshCatalog callback are forwarded
+    // from context/props; they are not serializable to the DOM, so assert they were
+    // passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+    expect(tabContainer).toHaveAttribute("data-has-library", "true");
+    expect(tabContainer).toHaveAttribute("data-has-refresh-catalog", "true");
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// ConfigTabContainer mounts the connected configuration sections (Libraries,
+// Collections, Individual Admins, ...) which fetch over the network on mount. That
+// is incidental to what ConfigPage composes — the page's job is to hand the tab
+// container the params and context it needs — so mock it to a marker that echoes
+// the props it received.
+jest.mock("../../../src/components/ConfigTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="config-tab-container"
+      data-tab={props.tab}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import ConfigPage from "../../../src/components/ConfigPage";
+
+describe("ConfigPage", () => {
+  const params = {
+    tab: "libraries",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows a tab container with tab from params", () => {
+    renderWithProviders(<ConfigPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const tabContainer = screen.getByTestId("config-tab-container");
+    expect(tabContainer).toHaveAttribute("data-tab", "libraries");
+    expect(tabContainer).toHaveAttribute("data-edit-or-create", "edit");
+    expect(tabContainer).toHaveAttribute("data-identifier", "identifier");
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// CustomLists is a connected component that fetches lists, collections, libraries,
+// and languages over the network on mount. That is incidental to what
+// CustomListPage composes — the page's job is to hand the editor the params and
+// context it needs — so mock it to a marker that echoes the props it received.
+jest.mock("../../../src/components/CustomLists", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists"
+      data-library={props.library}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import CustomListPage from "../../../src/components/CustomListPage";
+
+describe("CustomListPage", () => {
+  const params = {
+    library: "library",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows custom lists with info from params", () => {
+    renderWithProviders(<CustomListPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const customLists = screen.getByTestId("custom-lists");
+    expect(customLists).toHaveAttribute("data-library", "library");
+    expect(customLists).toHaveAttribute("data-edit-or-create", "edit");
+    expect(customLists).toHaveAttribute("data-identifier", "identifier");
+    expect(customLists).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(customLists).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// Stats fetches statistics via RTK Query on mount; DashboardPage's job is just
+// composition, so mock Stats to a marker that echoes the `library` prop it is
+// handed rather than wiring up fetch mocking.
+jest.mock("../../../src/components/Stats", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="stats" data-library={props.library} />
+  ),
+}));
+
+// CirculationEventsDownload gates its output on a feature flag (off by default) and
+// keeps the `library` prop inside a collapsed form, so it is not DOM-observable when
+// rendered for real. Mock it to a marker that echoes `library` so the prop-flow the
+// original test checked stays observable.
+jest.mock("../../../src/components/CirculationEventsDownload", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="circulation-events-download"
+      data-library={props.library}
+    />
+  ),
+}));
+
+import DashboardPage from "../../../src/components/DashboardPage";
+
+describe("DashboardPage", () => {
+  it("shows Header", () => {
+    renderWithProviders(<DashboardPage params={{}} />);
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("shows CirculationEventsDownload", () => {
+    const { rerender } = renderWithProviders(<DashboardPage params={{}} />);
+
+    let events = screen.getByTestId("circulation-events-download");
+    expect(events).toBeInTheDocument();
+    expect(events).not.toHaveAttribute("data-library");
+
+    rerender(<DashboardPage params={{ library: "NYPL" }} />);
+    events = screen.getByTestId("circulation-events-download");
+    expect(events).toHaveAttribute("data-library", "NYPL");
+  });
+
+  it("shows Stats", () => {
+    const { rerender } = renderWithProviders(<DashboardPage params={{}} />);
+
+    let stats = screen.getByTestId("stats");
+    expect(stats).not.toHaveAttribute("data-library");
+
+    rerender(<DashboardPage params={{ library: "NYPL" }} />);
+    stats = screen.getByTestId("stats");
+    expect(stats).toHaveAttribute("data-library", "NYPL");
+  });
+
+  it("shows Footer", () => {
+    renderWithProviders(<DashboardPage params={{}} />);
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});

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

@@ -212,11 +212,7 @@ describe("DebugAuthentication", () => {
       )
     );
 
-    const {
-      getByLabelText,
-      queryByLabelText,
-      rerender,
-    } = renderWithProviders(
+    const { getByLabelText, queryByLabelText, rerender } = renderWithProviders(
       <DebugAuthentication library={LIBRARY} csrfToken="test-csrf-token" />,
       { queryClient }
     );

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

@@ -383,7 +383,11 @@ describe("EditableConfigList - library association disclosure", () => {
     it("falls back to short_name when allLibraries is absent from the data", () => {
       const { container } = renderWithContext(
         <TestServiceList
-          data={{ services: [{ id: 1, name: "Service A", libraries: [{ short_name: "nypl" }] }] }}
+          data={{
+            services: [
+              { id: 1, name: "Service A", libraries: [{ short_name: "nypl" }] },
+            ],
+          }}
           fetchData={jest.fn()}
           editItem={jest.fn().mockResolvedValue(undefined)}
           deleteItem={jest.fn().mockResolvedValue(undefined)}
@@ -393,7 +397,9 @@ describe("EditableConfigList - library association disclosure", () => {
         config
       );
       fireEvent.click(container.querySelector(".association-toggle"));
-      expect(container.querySelector(".associated-items li").textContent).toBe("nypl");
+      expect(container.querySelector(".associated-items li").textContent).toBe(
+        "nypl"
+      );
     });
   });
 });

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// The wrapped `Collection` (from web-opds-client) is incidental here — the
+// container's job is to pull the "Formats" facets out and hand them to
+// `EntryPointsTabs`. Mock Collection to a marker so we can render the real
+// EntryPointsTabs and assert the tabs it produces.
+jest.mock(
+  "@thepalaceproject/web-opds-client/lib/components/Collection",
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="collection" />,
+  })
+);
+
+// EntryPointsTabs renders CatalogLink -> React Router `Link`, which needs router
+// context renderWithProviders does not supply. Mock `Link` to a marker.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import EntryPointsContainer from "../../../src/components/EntryPointsContainer";
+
+// Stands in for the OPDS Collection child whose `collection` prop the container
+// reads. It is never rendered by the container (only its props are inspected).
+class CollectionChild extends React.Component<{ collection: unknown }> {
+  render() {
+    return null;
+  }
+}
+
+describe("EntryPointsContainer", () => {
+  it("should not render entry-point tabs if no facets were passed", () => {
+    const collection = {
+      facetGroups: [],
+      lanes: [],
+      books: [],
+      navigationLinks: [],
+    };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    expect(
+      container.querySelector(".entry-points-tab-container")
+    ).toBeInTheDocument();
+    // EntryPointsTabs renders nothing when there are no format facets.
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("shows a tab container with facets when the label is 'Formats'", () => {
+    const facetGroups = [
+      {
+        facets: [],
+        label: "Some other facets",
+      },
+      {
+        facets: [
+          {
+            label: "Ebooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+            active: false,
+          },
+          {
+            label: "Audiobooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+            active: false,
+          },
+        ],
+        label: "Formats",
+      },
+    ];
+    const collection = { facetGroups };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import { FacetData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Each tab is a CatalogLink, which renders a React Router `Link`. Router `Link`
+// needs router context that `renderWithProviders` does not supply, so mock it to
+// a marker that exposes its navigation target and children (matching Lane.test.tsx).
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import { EntryPointsTabs } from "../../../src/components/EntryPointsTabs";
+
+const twoFacets: FacetData[] = [
+  {
+    label: "Ebooks",
+    href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+    active: true,
+  },
+  {
+    label: "Audiobooks",
+    href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+    active: false,
+  },
+];
+
+describe("EntryPointsTabs", () => {
+  it("should not generate any tabs", () => {
+    const { container } = renderWithProviders(<EntryPointsTabs />);
+
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("should generate two tabs with two entry points", () => {
+    const { container } = renderWithProviders(
+      <EntryPointsTabs facets={twoFacets} />
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+
+    const items = list.querySelectorAll("li");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveClass("active");
+    expect(items[1]).not.toHaveClass("active");
+
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+
+  it("uses router to navigate when a tab is clicked", () => {
+    renderWithProviders(<EntryPointsTabs facets={twoFacets} />);
+
+    const links = screen.getAllByTestId("Link");
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveTextContent("Ebooks");
+    expect(links[1]).toHaveTextContent("Audiobooks");
+    // Each tab links somewhere for the router to navigate to.
+    expect(links[0]).toHaveAttribute("data-to");
+    expect(links[1]).toHaveAttribute("data-to");
+  });
+
+  it("should generate one tab with an active entry point", () => {
+    const oneFacet: FacetData[] = [
+      {
+        label: "Audiobooks",
+        href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+        active: true,
+      },
+    ];
+    const { container } = renderWithProviders(
+      <EntryPointsTabs facets={oneFacet} />
+    );
+
+    const items = container.querySelectorAll("ul.nav-tabs li");
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveClass("active");
+
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});

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

@@ -304,11 +304,7 @@ describe("InventoryReportRequestModal", () => {
     const NO_EMAIL_CONTEXT_PROVIDER_PROPS = { email: undefined };
 
     it("shows the modal when `show` is true", async () => {
-      const {
-        getAllByRole,
-        queryAllByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getAllByRole, queryAllByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={false}
           onHide={onHide}
@@ -385,19 +381,15 @@ describe("InventoryReportRequestModal", () => {
       let show = true;
       onHide.mockImplementation(() => (show = false));
 
-      const {
-        getAllByRole,
-        getByRole,
-        queryAllByRole,
-        rerender,
-      } = renderWithProviders(
-        <InventoryReportRequestModal
-          show={show}
-          onHide={onHide}
-          library={LIBRARY}
-        />,
-        { queryClient }
-      );
+      const { getAllByRole, getByRole, queryAllByRole, rerender } =
+        renderWithProviders(
+          <InventoryReportRequestModal
+            show={show}
+            onHide={onHide}
+            library={LIBRARY}
+          />,
+          { queryClient }
+        );
       getAllByRole("dialog");
       expect(show).toBe(true);
       expect(onHide).not.toHaveBeenCalled();
@@ -420,10 +412,7 @@ describe("InventoryReportRequestModal", () => {
     });
 
     it("updates confirmation message, if report info request arrives in time", async () => {
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -457,10 +446,7 @@ describe("InventoryReportRequestModal", () => {
         )
       );
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -505,10 +491,7 @@ describe("InventoryReportRequestModal", () => {
         )
       );
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -538,10 +521,7 @@ describe("InventoryReportRequestModal", () => {
     it("requests report generation, if request confirmed", async () => {
       const user = userEvent.setup();
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -574,10 +554,7 @@ describe("InventoryReportRequestModal", () => {
     it("displays success message, when request is successful", async () => {
       const user = userEvent.setup();
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -615,10 +592,7 @@ describe("InventoryReportRequestModal", () => {
       );
       const user = userEvent.setup();
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}

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

@@ -19,13 +19,9 @@ const customListsData = [
   { id: 1, name: "list 1", entries: [], is_owner: true, is_shared: false },
 ];
 
-const editLane = stub().returns(
-  new Promise<void>((resolve) => resolve())
-);
+const editLane = stub().returns(new Promise<void>((resolve) => resolve()));
 
-const deleteLane = stub().returns(
-  new Promise<void>((resolve) => resolve())
-);
+const deleteLane = stub().returns(new Promise<void>((resolve) => resolve()));
 
 const toggleLaneVisibility = stub();
 

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { screen, waitForElementToBeRemoved } from "@testing-library/react";
+import * as fetchMock from "fetch-mock-jest";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that renderWithProviders does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// The real Lanes child (and its sidebar/editor) renders React Router `Link`s,
+// which need router context renderWithProviders does not supply. Mock `Link` to
+// a marker, matching Lane.test.tsx.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => <div data-testid="Link">{props.children}</div>,
+}));
+
+import LanePage from "../../../src/components/LanePage";
+
+describe("LanePage", () => {
+  beforeAll(() => {
+    Object.assign(fetchMock.config, { fetch, Headers, Request, Response });
+  });
+
+  beforeEach(() => {
+    // Lanes fetches lanes and custom lists on mount; stub the network so no real
+    // request is made.
+    fetchMock.mock("*", { lanes: [], custom_lists: [] });
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it("shows lanes with info from params", async () => {
+    const params = {
+      library: "library",
+      editOrCreate: "edit",
+      identifier: "5",
+    };
+
+    const { container } = renderWithProviders(<LanePage params={params} />);
+
+    // Header and Footer chrome are composed around the body.
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+
+    // The real Lanes child renders its container...
+    expect(container.querySelector("main.lanes-container")).toBeInTheDocument();
+    // ...and, because editOrCreate is "edit", its lane editor panel.
+    expect(container.querySelector(".lane-editor")).toBeInTheDocument();
+
+    // While its on-mount fetches (lanes and custom lists) are in flight, Lanes
+    // shows a loading indicator. Wait for it to clear so those fetches settle
+    // and their state updates flush, instead of racing a fixed-length timer.
+    await waitForElementToBeRemoved(() =>
+      screen.queryByRole("dialog", { name: "Loading" })
+    );
+  });
+});

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that renderWithProviders does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+import ManagePatrons from "../../../src/components/ManagePatrons";
+
+describe("ManagePatrons", () => {
+  it("shows Header", () => {
+    renderWithProviders(<ManagePatrons params={{ library: "", tab: "" }} />);
+
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("should have a .manage-patrons-page class", () => {
+    const { container } = renderWithProviders(
+      <ManagePatrons params={{ library: "", tab: "" }} />
+    );
+
+    expect(container.querySelector(".manage-patrons-page")).toBeInTheDocument();
+  });
+
+  it("shows heading", () => {
+    renderWithProviders(<ManagePatrons params={{ library: "", tab: "" }} />);
+
+    expect(
+      screen.getByRole("heading", { name: "Patron Manager" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows ManagePatronsTabContainer", () => {
+    // A library manager for "NYPL" sees a tab per patron action, which proves
+    // both the library and tab props reached the tab container.
+    const { container } = renderWithProviders(
+      <ManagePatrons params={{ library: "NYPL", tab: "resetAdobeId" }} />,
+      { appConfigSettings: { roles: [{ role: "manager", library: "NYPL" }] } }
+    );
+
+    const tabContainer = container.querySelector(".tab-container");
+    expect(tabContainer).toBeInTheDocument();
+
+    // The tab <li>s carry role="presentation", so query them directly.
+    const tabs = (tabContainer as HTMLElement).querySelectorAll(
+      "ul.nav-tabs > li"
+    );
+    expect(tabs).toHaveLength(2);
+    expect(
+      screen.getByRole("link", { name: "Reset Adobe ID" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Debug Authentication" })
+    ).toBeInTheDocument();
+    // The `tab` prop selects the active tab.
+    expect(tabs[0]).toHaveClass("active");
+  });
+
+  it("shows Footer", () => {
+    renderWithProviders(<ManagePatrons params={{ library: "", tab: "" }} />);
+
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});

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

@@ -612,7 +612,9 @@ describe("PatronBlockingRulesEditor", () => {
   });
 
   it("disables all editing inputs and buttons when disabled prop is true", () => {
-    renderEditor(<PatronBlockingRulesEditor value={existingRules} disabled={true} />);
+    renderEditor(
+      <PatronBlockingRulesEditor value={existingRules} disabled={true} />
+    );
 
     // The Help button stays enabled even in disabled mode (read-only affordance).
     const editingButtons = screen

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+
+import PatronInfo from "../../../src/components/PatronInfo";
+import { PatronData } from "../../../src/interfaces";
+
+const patrons: PatronData[] = [
+  {
+    authorization_expires: "",
+    username: "User Name",
+    personal_name: "Personal Name",
+    email_address: "user@email.com",
+    authorization_identifier: "1234",
+    authorization_identifiers: [""],
+    block_reason: "",
+    external_type: "",
+    fines: "",
+    permanent_id: "",
+  },
+  {
+    authorization_expires: "",
+    personal_name: "Personal Name2",
+    authorization_identifier: "5678",
+    authorization_identifiers: [""],
+    block_reason: "",
+    external_type: "",
+    fines: "",
+    permanent_id: "",
+  },
+];
+
+describe("PatronInfo", () => {
+  it("should display the patron's information", () => {
+    const { container } = render(<PatronInfo patron={patrons[0]} />);
+
+    const items = container.querySelectorAll("ul.patron-data-list > li");
+    expect(items).toHaveLength(4);
+    expect(items[0]).toHaveTextContent("Username:User Name");
+    expect(items[1]).toHaveTextContent("Personal Name:Personal Name");
+    expect(items[2]).toHaveTextContent("Email Address:user@email.com");
+    expect(items[3]).toHaveTextContent("Identifier:1234");
+  });
+
+  it("should update the patron's information if a new patron was searched and found", () => {
+    const { container, rerender } = render(<PatronInfo patron={patrons[0]} />);
+
+    rerender(<PatronInfo patron={patrons[1]} />);
+
+    const items = container.querySelectorAll("ul.patron-data-list > li");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent("Personal Name:Personal Name2");
+    expect(items[1]).toHaveTextContent("Identifier:5678");
+  });
+});

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import SetupPage from "../../../src/components/SetupPage";
+
+describe("SetupPage", () => {
+  beforeEach(() => {
+    // SetupPage renders the connected IndividualAdmins list, which fetches the
+    // admin list on mount. Stub fetch so mounting does not hit the network.
+    jest.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ individualAdmins: [] }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the individual-admins setup (create) form", async () => {
+    renderWithProviders(<SetupPage />);
+
+    // SetupPage wires IndividualAdmins with settingUp + editOrCreate="create".
+    // That combination renders the "Welcome!" heading and the
+    // "Set up your system admin account" create-form heading; their presence in
+    // the real DOM proves the child received those props (the original shallow
+    // test asserted the props directly). No identifier is passed, so there is no
+    // per-item "Edit ..." heading — only the create form shows.
+    expect(
+      await screen.findByRole("heading", { name: "Welcome!" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        name: "Set up your system admin account",
+      })
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import SingleStatListItem, {
+  SingleStatListItemProps,
+} from "../../../src/components/SingleStatListItem";
+
+describe("SingleStatListItem", () => {
+  const statWithTooltip: SingleStatListItemProps = {
+    label: "Number of Widgets",
+    value: 357892,
+    tooltip: "Total Widget Count",
+  };
+  const humanReadableValue = "357.9k";
+  const formattedValue = "357,892";
+
+  it("renders a top-level <li>, with or without a tooltip", () => {
+    const { container, rerender } = render(
+      <SingleStatListItem {...statWithTooltip} />
+    );
+    expect(container.firstElementChild?.tagName).toBe("LI");
+    expect(container.firstElementChild).toHaveClass("single-stat");
+
+    // Without a tooltip the <li> is still the top-level element.
+    rerender(
+      <SingleStatListItem
+        label={statWithTooltip.label}
+        value={statWithTooltip.value}
+      />
+    );
+    expect(container.firstElementChild?.tagName).toBe("LI");
+    expect(container.firstElementChild).toHaveClass("single-stat");
+  });
+
+  it("shows a tooltip wrapping the value and label when one is provided", () => {
+    const { container } = render(<SingleStatListItem {...statWithTooltip} />);
+
+    const tooltip = container.querySelector('[data-toggle="tooltip"]');
+    expect(tooltip).not.toBeNull();
+
+    const title = tooltip?.getAttribute("title") ?? "";
+    expect(title).toContain(statWithTooltip.tooltip);
+    expect(title).toContain(formattedValue);
+
+    // When there's a tooltip, it wraps the (rounded) value and the label.
+    expect(tooltip).toHaveTextContent(humanReadableValue);
+    expect(tooltip).toHaveTextContent(statWithTooltip.label);
+  });
+
+  it("omits the tooltip when none is provided, showing value and label directly", () => {
+    const { container } = render(
+      <SingleStatListItem
+        label={statWithTooltip.label}
+        value={statWithTooltip.value}
+      />
+    );
+
+    expect(container.querySelector('[data-toggle="tooltip"]')).toBeNull();
+    expect(screen.getByText(humanReadableValue)).toBeInTheDocument();
+    expect(screen.getByText(statWithTooltip.label)).toBeInTheDocument();
+  });
+});

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

@@ -382,14 +382,10 @@ describe("Dashboard Statistics", () => {
             roles,
             quicksightPagePath: fakeQuickSightHref,
           };
-          const {
-            container,
-            getByRole,
-            queryByRole,
-            queryByText,
-          } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
-            appConfigSettings,
-          });
+          const { container, getByRole, queryByRole, queryByText } =
+            renderWithProviders(<Stats library={sampleLibraryKey} />, {
+              appConfigSettings,
+            });
 
           // We should always render a Usage reports group when a library is specified.
           getByRole("heading", {

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+// The tab content (TroubleshootingCategoryPage) renders the connected
+// Diagnostics/Self-tests containers, which need Redux store + csrf context this
+// test does not supply. That content is incidental here — the test is about the
+// tab navigation — so mock it to a marker.
+jest.mock("../../../src/components/TroubleshootingCategoryPage", () => ({
+  __esModule: true,
+  default: () => <div data-testid="category-page" />,
+}));
+
+import TroubleshootingTabContainer from "../../../src/components/TroubleshootingTabContainer";
+
+describe("TroubleshootingTabContainer", () => {
+  let goToTab: jest.Mock;
+
+  beforeEach(() => {
+    goToTab = jest.fn();
+  });
+
+  it("renders tabs and defaults to showing the Diagnostics tab", () => {
+    const { container } = render(
+      <TroubleshootingTabContainer goToTab={goToTab} tab="diagnostics" />
+    );
+
+    const nav = container.querySelector("ul.nav-tabs");
+    expect(nav).not.toBeNull();
+
+    const tabs = nav.querySelectorAll("li");
+    expect(tabs).toHaveLength(2);
+
+    expect(tabs[0]).toHaveTextContent("Diagnostics");
+    expect(tabs[0]).toHaveClass("active");
+
+    expect(tabs[1]).toHaveTextContent("Self-tests");
+    expect(tabs[1]).not.toHaveClass("active");
+  });
+
+  it("calls goToTab when another tab is clicked", async () => {
+    const user = userEvent.setup();
+    render(<TroubleshootingTabContainer goToTab={goToTab} tab="diagnostics" />);
+
+    await user.click(screen.getByRole("link", { name: "Self-tests" }));
+
+    expect(goToTab).toHaveBeenCalledTimes(1);
+    expect(goToTab).toHaveBeenCalledWith("self-tests");
+  });
+
+  it("switches the active tab when the tab prop changes", () => {
+    const { container, rerender } = render(
+      <TroubleshootingTabContainer goToTab={goToTab} tab="diagnostics" />
+    );
+
+    let tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    rerender(
+      <TroubleshootingTabContainer goToTab={goToTab} tab="self-tests" />
+    );
+
+    tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).not.toHaveClass("active");
+    expect(tabs[1]).toHaveClass("active");
+  });
+});

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+// Header pulls in the react-router v3 context a plain render does not supply, and
+// both Header and Footer are page chrome with no behavior worth exercising here.
+// Mock them to markers so the test stays about what WelcomePage composes.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+import WelcomePage from "../../../src/components/WelcomePage";
+
+describe("WelcomePage", () => {
+  it("shows the header", () => {
+    render(<WelcomePage />);
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("shows the welcome message", () => {
+    render(<WelcomePage />);
+    expect(
+      screen.getByRole("heading", {
+        name: "Welcome to the Circulation Admin Interface!",
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a link to the library create form", () => {
+    render(<WelcomePage />);
+    const link = screen.getByRole("link", { name: /create a new library/i });
+    expect(link).toHaveAttribute("href", "/admin/web/config/libraries/create");
+  });
+
+  it("shows the footer", () => {
+    render(<WelcomePage />);
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});