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

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();
+  });
+});