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

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/LanguageField.test.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import LanguageField from "../../../src/components/LanguageField";
+
+describe("LanguageField", () => {
+  const languages = {
+    eng: ["English"],
+    es: ["Spanish", "Castilian"],
+    spa: ["Spanish", "Castilian"],
+  };
+
+  it("renders an autocomplete field", () => {
+    const { container } = render(
+      <LanguageField name="language" languages={languages} />
+    );
+
+    // An <input> with a `list` attribute has the implicit ARIA role "combobox".
+    const input = screen.getByRole("combobox");
+    expect(input).toHaveAttribute("name", "language");
+    expect(input).toHaveAttribute("list", "language-autocomplete-list");
+    expect(
+      container.querySelector("datalist#language-autocomplete-list")
+    ).toBeInTheDocument();
+  });
+
+  it("renders a unique, ordered list of language names as options", () => {
+    const { container } = render(
+      <LanguageField name="language" languages={languages} />
+    );
+
+    const options = Array.from(
+      container.querySelectorAll<HTMLOptionElement>(
+        "#language-autocomplete-list option"
+      )
+    ).map((option) => option.value);
+
+    expect(options).toStrictEqual(["English", "Spanish", "Castilian"]);
+  });
+});

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

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import LoadButton from "../../../src/components/LoadButton";
+
+describe("LoadButton", () => {
+  it("displays 'Load more' text when not fetching", () => {
+    render(<LoadButton isFetching={false} loadMore={jest.fn()} />);
+
+    expect(
+      screen.getByRole("button", { name: "Load more" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders the MoreDotsIcon only while fetching", () => {
+    const { container, rerender } = render(
+      <LoadButton isFetching={false} loadMore={jest.fn()} />
+    );
+
+    // The MoreDotsIcon is a Font Awesome-style <svg>, so query for it directly.
+    expect(container.querySelector("svg")).not.toBeInTheDocument();
+
+    rerender(<LoadButton isFetching={true} loadMore={jest.fn()} />);
+
+    expect(container.querySelector("svg")).toBeInTheDocument();
+    expect(screen.queryByText("Load more")).not.toBeInTheDocument();
+  });
+
+  it("calls loadMore when clicked", async () => {
+    const user = userEvent.setup();
+    const loadMore = jest.fn();
+    render(<LoadButton isFetching={false} loadMore={loadMore} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(loadMore).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when disabled", async () => {
+    const user = userEvent.setup();
+    const loadMore = jest.fn();
+    render(<LoadButton isFetching={true} loadMore={loadMore} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(loadMore).not.toHaveBeenCalled();
+  });
+});

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/ManagePatronsForm.test.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import buildStore from "../../../src/store";
+import { ManagePatronsForm } from "../../../src/components/ManagePatronsForm";
+import { PatronData } from "../../../src/interfaces";
+
+// The reusable-components `Form` builds `new FormData(formElement)` on submit,
+// which the unit jsdom environment's undici FormData rejects; install the shared
+// shim that reads the form's successful controls.
+installFormDataShim();
+
+const patron: 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: "",
+};
+
+// `clearPatronData` is called on unmount (RTL cleanup), so it must always be a
+// function; `patronLookup` too, so the connected dispatch props are stubbed.
+const renderForm = (props: Record<string, unknown> = {}) =>
+  renderWithProviders(
+    <ManagePatronsForm
+      store={buildStore()}
+      csrfToken="token"
+      library="nypl"
+      patronLookup={jest.fn()}
+      clearPatronData={jest.fn()}
+      {...props}
+    />
+  );
+
+describe("ManagePatronsForm", () => {
+  describe("rendering", () => {
+    it("has .manage-patrons-form class", () => {
+      const { container } = renderForm();
+      expect(
+        container.querySelector(".manage-patrons-form")
+      ).toBeInTheDocument();
+    });
+
+    it("shows an editable identifier input", () => {
+      renderForm();
+      expect(
+        screen.getByPlaceholderText("Enter the patron's identifier")
+      ).toBeInTheDocument();
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("has a form with an input field and a button", () => {
+      const { container } = renderForm();
+      expect(container.querySelectorAll("form")).toHaveLength(1);
+      expect(container.querySelectorAll("form input")).toHaveLength(1);
+      expect(container.querySelectorAll("form button")).toHaveLength(1);
+    });
+
+    it("doesn't initially show an alert or error message", () => {
+      const { container } = renderForm();
+      expect(container.querySelector(".alert")).not.toBeInTheDocument();
+      expect(screen.queryByText(/Patron found/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe("behavior", () => {
+    it("calls patronLookup on submit", async () => {
+      const user = userEvent.setup();
+      const patronLookup = jest.fn();
+      renderForm({ patronLookup });
+
+      expect(patronLookup).not.toHaveBeenCalled();
+
+      await user.type(
+        screen.getByPlaceholderText("Enter the patron's identifier"),
+        "1234"
+      );
+      await user.click(screen.getByRole("button"));
+
+      expect(patronLookup).toHaveBeenCalledTimes(1);
+      // The second argument is the library short name.
+      expect(patronLookup.mock.calls[0][1]).toBe("nypl");
+    });
+
+    it("displays an error message if there is an error", () => {
+      const fetchError = { status: 400, response: "", url: "" };
+      const { container, rerender } = renderForm();
+      expect(container.querySelector(".alert-danger")).not.toBeInTheDocument();
+
+      rerender(
+        <ManagePatronsForm
+          store={buildStore()}
+          csrfToken="token"
+          library="nypl"
+          patronLookup={jest.fn()}
+          clearPatronData={jest.fn()}
+          fetchError={fetchError}
+        />
+      );
+
+      expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+      expect(screen.getByText(/Error:/)).toBeInTheDocument();
+    });
+
+    it("should display a no-identifier message if the input field is blank when searching", () => {
+      const fetchError = {
+        status: 400,
+        response: "No patron identifier provided",
+        url: "",
+      };
+      const { rerender } = renderForm();
+      expect(
+        screen.queryByText("Error: No patron identifier provided")
+      ).not.toBeInTheDocument();
+
+      rerender(
+        <ManagePatronsForm
+          store={buildStore()}
+          csrfToken="token"
+          library="nypl"
+          patronLookup={jest.fn()}
+          clearPatronData={jest.fn()}
+          fetchError={fetchError}
+        />
+      );
+
+      expect(
+        screen.getByText("Error: No patron identifier provided")
+      ).toBeInTheDocument();
+    });
+
+    it("should display a success alert message when a patron is found", () => {
+      const { container, rerender } = renderForm();
+      expect(container.querySelector(".alert-success")).not.toBeInTheDocument();
+
+      rerender(
+        <ManagePatronsForm
+          store={buildStore()}
+          csrfToken="token"
+          library="nypl"
+          patronLookup={jest.fn()}
+          clearPatronData={jest.fn()}
+          patron={patron}
+        />
+      );
+
+      const alert = container.querySelector(".alert-success");
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveTextContent(
+        `Patron found: ${patron.authorization_identifier}`
+      );
+    });
+
+    it("should show the PatronInfo list when a patron is found", () => {
+      const { container, rerender } = renderForm();
+      expect(container.querySelector(".patron-info")).not.toBeInTheDocument();
+
+      rerender(
+        <ManagePatronsForm
+          store={buildStore()}
+          csrfToken="token"
+          library="nypl"
+          patronLookup={jest.fn()}
+          clearPatronData={jest.fn()}
+          patron={patron}
+        />
+      );
+
+      expect(container.querySelector(".patron-info")).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,143 @@
+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";
+
+// Both tab panels fetch on mount (ResetAdobeId is a connected component; Debug
+// Authentication uses react-query). They're incidental to a tab-navigation test,
+// so mock them to markers. ResetAdobeId echoes the csrfToken asserted below.
+jest.mock("../../../src/components/ResetAdobeId", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="reset-adobe-id" data-csrf-token={props.csrfToken} />
+  ),
+}));
+jest.mock("../../../src/components/DebugAuthentication", () => ({
+  __esModule: true,
+  default: () => <div data-testid="debug-authentication" />,
+}));
+
+import ManagePatronsTabContainer from "../../../src/components/ManagePatronsTabContainer";
+
+// ManagePatronsTabContainer reads `admin`, `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,
+    admin: PropTypes.object,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+describe("ManagePatronsTabContainer", () => {
+  const systemAdmin = new Admin([{ role: "system" }]);
+  const libraryManagerNYPL = new Admin([{ role: "manager", library: "NYPL" }]);
+  const libraryManagerA = new Admin([{ role: "manager", library: "a" }]);
+  const librarian = new Admin([{ role: "librarian", library: "NYPL" }]);
+
+  const renderWithAdmin = (admin: Admin, push: jest.Mock = jest.fn()) => {
+    const context = { router: { push }, pathFor: jest.fn(), admin };
+    const result = render(
+      <LegacyContextProvider context={context}>
+        <ManagePatronsTabContainer
+          tab={null}
+          csrfToken="token"
+          store={buildStore()}
+          library="NYPL"
+        />
+      </LegacyContextProvider>
+    );
+    return { ...result, push };
+  };
+
+  describe("for system admin", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(systemAdmin);
+      expect(
+        screen.getByRole("link", { name: "Reset Adobe ID" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("link", { name: "Debug Authentication" })
+      ).toBeInTheDocument();
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(systemAdmin);
+      expect(screen.getByTestId("reset-adobe-id")).toHaveAttribute(
+        "data-csrf-token",
+        "token"
+      );
+    });
+
+    it("uses router to navigate when tab is clicked", async () => {
+      const user = userEvent.setup();
+      const { push } = renderWithAdmin(systemAdmin);
+      await user.click(screen.getByRole("link", { name: "Reset Adobe ID" }));
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenCalledWith("/admin/web/patrons/NYPL/resetAdobeId");
+    });
+  });
+
+  describe("for right library manager", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(libraryManagerNYPL);
+      expect(
+        screen.getByRole("link", { name: "Reset Adobe ID" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("link", { name: "Debug Authentication" })
+      ).toBeInTheDocument();
+    });
+
+    it("marks the current tab as active", () => {
+      const { container } = renderWithAdmin(libraryManagerNYPL);
+      const tabItems = container.querySelectorAll("ul.nav-tabs li");
+      expect(tabItems).toHaveLength(2);
+      expect(tabItems[0]).toHaveClass("active");
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(libraryManagerNYPL);
+      expect(screen.getByTestId("reset-adobe-id")).toHaveAttribute(
+        "data-csrf-token",
+        "token"
+      );
+    });
+
+    it("uses router to navigate when tab is clicked", async () => {
+      const user = userEvent.setup();
+      const { push } = renderWithAdmin(libraryManagerNYPL);
+      await user.click(screen.getByRole("link", { name: "Reset Adobe ID" }));
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenCalledWith("/admin/web/patrons/NYPL/resetAdobeId");
+    });
+  });
+
+  describe("for wrong library manager", () => {
+    it("doesn't show tabs", () => {
+      renderWithAdmin(libraryManagerA);
+      expect(
+        screen.queryByRole("link", { name: "Reset Adobe ID" })
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("for librarian", () => {
+    it("doesn't show tabs", () => {
+      renderWithAdmin(librarian);
+      expect(
+        screen.queryByRole("link", { name: "Reset Adobe ID" })
+      ).not.toBeInTheDocument();
+    });
+  });
+});