@thepalaceproject/circulation-admin 1.42.2 → 1.43.0-post.10

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

@@ -0,0 +1,275 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CustomListSearch from "../../../src/components/CustomListSearch";
+
+describe("CustomListSearch", () => {
+  const library = {
+    uuid: "uuid",
+    name: "name",
+    short_name: "short_name",
+    settings: {
+      large_collections: ["eng", "fre", "spa"],
+    },
+  };
+
+  const entryPoints = ["All", "Book", "Audio"];
+
+  const searchParams = {
+    entryPoint: "all",
+    terms: "foo bar",
+    sort: "title",
+    language: "English",
+    advanced: {
+      include: {
+        query: null,
+        selectedQueryId: null,
+        clearFilters: null,
+      },
+      exclude: {
+        query: null,
+        selectedQueryId: null,
+        clearFilters: null,
+      },
+    },
+  };
+
+  const languages = {
+    eng: ["English"],
+    spa: ["Spanish", "Castilian"],
+    fre: ["French"],
+  };
+
+  const renderSearch = (
+    overrides: Partial<React.ComponentProps<typeof CustomListSearch>> = {}
+  ) =>
+    render(
+      <CustomListSearch
+        entryPoints={entryPoints}
+        isOwner={true}
+        languages={languages}
+        library={library}
+        listId="123"
+        search={jest.fn()}
+        searchParams={searchParams}
+        updateAutoUpdate={jest.fn()}
+        updateSearchParam={jest.fn()}
+        {...overrides}
+      />
+    );
+
+  it("renders a radio button for each entry point", () => {
+    const { container } = renderSearch();
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    const radios = within(entryPointsSection).getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+
+    const all = within(entryPointsSection).getByRole("radio", { name: "All" });
+    expect(all).toHaveAttribute("name", "entry-points-selection");
+    expect(all).toHaveAttribute("value", "All");
+    expect(all).toBeEnabled();
+    expect(all).toBeChecked();
+
+    const book = within(entryPointsSection).getByRole("radio", {
+      name: "Book",
+    });
+    expect(book).toHaveAttribute("name", "entry-points-selection");
+    expect(book).toHaveAttribute("value", "Book");
+    expect(book).toBeEnabled();
+    expect(book).not.toBeChecked();
+
+    const audio = within(entryPointsSection).getByRole("radio", {
+      name: "Audio",
+    });
+    expect(audio).toHaveAttribute("name", "entry-points-selection");
+    expect(audio).toHaveAttribute("value", "Audio");
+    expect(audio).toBeEnabled();
+    expect(audio).not.toBeChecked();
+  });
+
+  it("disables the entry point radio buttons when isOwner is false", () => {
+    const { container } = renderSearch({ isOwner: false });
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    within(entryPointsSection)
+      .getAllByRole("radio")
+      .forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it("calls updateSearchParam when an entry point radio button is changed", async () => {
+    const user = userEvent.setup();
+    const updateSearchParam = jest.fn();
+    const { container } = renderSearch({ updateSearchParam });
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    await user.click(
+      within(entryPointsSection).getByRole("radio", { name: "Audio" })
+    );
+
+    expect(updateSearchParam).toHaveBeenCalledTimes(1);
+    expect(updateSearchParam).toHaveBeenCalledWith("entryPoint", "Audio");
+  });
+
+  it("renders a radio button for each sort option", () => {
+    const { container } = renderSearch();
+    const sortSection = container.querySelector<HTMLElement>(".search-options");
+
+    const radios = within(sortSection).getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+
+    const relevance = within(sortSection).getByRole("radio", {
+      name: "Relevance",
+    });
+    expect(relevance).toHaveAttribute("name", "sort-selection");
+    expect(relevance).toHaveAttribute("value", "");
+    expect(relevance).toBeEnabled();
+    expect(relevance).not.toBeChecked();
+
+    const title = within(sortSection).getByRole("radio", { name: "Title" });
+    expect(title).toHaveAttribute("name", "sort-selection");
+    expect(title).toHaveAttribute("value", "title");
+    expect(title).toBeEnabled();
+    expect(title).toBeChecked();
+
+    const author = within(sortSection).getByRole("radio", { name: "Author" });
+    expect(author).toHaveAttribute("name", "sort-selection");
+    expect(author).toHaveAttribute("value", "author");
+    expect(author).toBeEnabled();
+    expect(author).not.toBeChecked();
+  });
+
+  it("disables the sort option radio buttons when isOwner is false", () => {
+    const { container } = renderSearch({ isOwner: false });
+    const sortSection = container.querySelector<HTMLElement>(".search-options");
+
+    within(sortSection)
+      .getAllByRole("radio")
+      .forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it("calls updateSearchParam when a sort radio button is changed", async () => {
+    const user = userEvent.setup();
+    const updateSearchParam = jest.fn();
+    const { container } = renderSearch({ updateSearchParam });
+    const sortSection = container.querySelector<HTMLElement>(".search-options");
+
+    await user.click(
+      within(sortSection).getByRole("radio", { name: "Author" })
+    );
+
+    expect(updateSearchParam).toHaveBeenCalledTimes(1);
+    expect(updateSearchParam).toHaveBeenCalledWith("sort", "author");
+  });
+
+  it("calls addAdvSearchQuery and search when mounted if there is a startingTitle", () => {
+    const addAdvSearchQuery = jest.fn();
+    const search = jest.fn();
+
+    renderSearch({ startingTitle: "test", addAdvSearchQuery, search });
+
+    expect(addAdvSearchQuery).toHaveBeenCalledTimes(1);
+    expect(addAdvSearchQuery).toHaveBeenCalledWith("include", {
+      key: "title",
+      op: "eq",
+      value: "test",
+    });
+    expect(search).toHaveBeenCalledTimes(1);
+  });
+
+  describe("when showAutoUpdate is false", () => {
+    it("does not render radio buttons for auto update on and off", () => {
+      const { container } = renderSearch();
+
+      expect(container.querySelector(".auto-update")).toBeNull();
+    });
+  });
+
+  describe("when showAutoUpdate is true", () => {
+    it("renders radio buttons for auto update on and off", () => {
+      const { container } = renderSearch({
+        showAutoUpdate: true,
+        listId: null,
+      });
+      const autoSection = container.querySelector<HTMLElement>(".auto-update");
+
+      const radios = within(autoSection).getAllByRole("radio");
+      expect(radios).toHaveLength(2);
+
+      const on = within(autoSection).getByRole("radio", {
+        name: "Automatically update this list",
+      });
+      expect(on).toHaveAttribute("name", "auto-update");
+      expect(on).toBeEnabled();
+
+      const off = within(autoSection).getByRole("radio", {
+        name: "Manually select titles",
+      });
+      expect(off).toHaveAttribute("name", "auto-update");
+      expect(off).toBeEnabled();
+    });
+
+    it("disables the radio buttons for auto update when isOwner is false", () => {
+      const { container } = renderSearch({
+        showAutoUpdate: true,
+        isOwner: false,
+        listId: null,
+      });
+      const autoSection = container.querySelector<HTMLElement>(".auto-update");
+
+      within(autoSection)
+        .getAllByRole("radio")
+        .forEach((radio) => expect(radio).toBeDisabled());
+    });
+
+    it("disables the radio buttons for auto update when listId is not null", () => {
+      // isOwner: true keeps readOnly false, so listId is the only thing that can
+      // disable the radios — otherwise readOnly alone would, masking this path.
+      const { container } = renderSearch({
+        showAutoUpdate: true,
+        isOwner: true,
+        listId: "123",
+      });
+      const autoSection = container.querySelector<HTMLElement>(".auto-update");
+
+      within(autoSection)
+        .getAllByRole("radio")
+        .forEach((radio) => expect(radio).toBeDisabled());
+    });
+
+    it("calls updateAutoUpdate when an auto update radio button is changed", async () => {
+      const user = userEvent.setup();
+      // Clicking the currently-unchecked "on" radio reports true.
+      const updateAutoUpdateOn = jest.fn();
+      const { unmount } = renderSearch({
+        showAutoUpdate: true,
+        listId: null,
+        autoUpdate: false,
+        updateAutoUpdate: updateAutoUpdateOn,
+      });
+      await user.click(
+        screen.getByRole("radio", { name: "Automatically update this list" })
+      );
+      expect(updateAutoUpdateOn).toHaveBeenCalledTimes(1);
+      expect(updateAutoUpdateOn).toHaveBeenCalledWith(true);
+      unmount();
+
+      // Clicking the currently-unchecked "off" radio reports false.
+      const updateAutoUpdateOff = jest.fn();
+      renderSearch({
+        showAutoUpdate: true,
+        listId: null,
+        autoUpdate: true,
+        updateAutoUpdate: updateAutoUpdateOff,
+      });
+      await user.click(
+        screen.getByRole("radio", { name: "Manually select titles" })
+      );
+      expect(updateAutoUpdateOff).toHaveBeenCalledTimes(1);
+      expect(updateAutoUpdateOff).toHaveBeenCalledWith(false);
+    });
+  });
+});

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

@@ -0,0 +1,251 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CustomListsSidebar from "../../../src/components/CustomListsSidebar";
+
+// Render react-router's Link as a marker anchor so we can assert its target
+// (`data-to`), text, and className without needing a Router in the test.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <a
+      data-testid="Link"
+      data-to={props.to}
+      href={props.to}
+      className={props.className}
+    >
+      {props.children}
+    </a>
+  ),
+}));
+
+describe("CustomListsSidebar", () => {
+  const makeLists = () => [
+    {
+      id: 1,
+      name: "First List",
+      entry_count: 5,
+      is_owner: true,
+      is_shared: false,
+    },
+    {
+      id: 2,
+      name: "Second List",
+      entry_count: 10,
+      is_owner: true,
+      is_shared: false,
+    },
+  ];
+
+  const baseProps = () => ({
+    filter: "owned",
+    lists: makeLists(),
+    library: "library_name",
+    identifier: "123",
+    isLibraryManager: true,
+    deleteCustomList: jest.fn(),
+    changeSort: jest.fn(),
+    sortOrder: "asc",
+  });
+
+  it("renders a sidebar with a header and a create button", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    expect(
+      container.querySelector(".custom-lists-sidebar")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+      "List Manager"
+    );
+
+    const createButton = screen.getAllByTestId("Link")[0];
+    expect(createButton).toHaveTextContent("Create New List");
+    expect(createButton).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/create"
+    );
+  });
+
+  it("renders filter select", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    const select = container.querySelector<HTMLSelectElement>(
+      'select[name="filter"]'
+    );
+    expect(select).toHaveValue("owned");
+
+    const options = within(select).getAllByRole("option");
+    expect(options).toHaveLength(4);
+    expect(options[0]).toHaveValue("");
+    expect(options[1]).toHaveValue("owned");
+    expect(options[2]).toHaveValue("shared-out");
+    expect(options[3]).toHaveValue("shared-in");
+  });
+
+  it("renders sort select", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    const select = container.querySelector<HTMLSelectElement>(
+      'select[name="sort"]'
+    );
+    expect(select).toHaveValue("asc");
+
+    const options = within(select).getAllByRole("option");
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveValue("asc");
+    expect(options[1]).toHaveValue("desc");
+  });
+
+  it("renders a list of custom list info items", async () => {
+    const user = userEvent.setup();
+    const deleteCustomList = jest.fn();
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        deleteCustomList={deleteCustomList}
+      />
+    );
+
+    const listItems = container.querySelectorAll("ul > li");
+    expect(listItems).toHaveLength(2);
+    const [firstList, secondList] = Array.from(listItems);
+
+    const firstInfo = firstList.querySelectorAll(".custom-list-info > div");
+    expect(firstInfo[0]).toHaveTextContent("First List");
+    expect(firstInfo[1]).toHaveTextContent("Books in list: 5");
+    expect(firstInfo[2]).toHaveTextContent("ID-1");
+
+    const firstButtons = firstList.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const firstEdit = within(firstButtons).getByTestId("Link");
+    expect(firstEdit).toHaveTextContent("Edit");
+    expect(firstEdit).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/edit/1"
+    );
+    const firstDelete = within(firstButtons).getByRole("button");
+    expect(firstDelete).toHaveTextContent("Delete");
+    await user.click(firstDelete);
+    expect(deleteCustomList).toHaveBeenCalledTimes(1);
+
+    const secondInfo = secondList.querySelectorAll(".custom-list-info > div");
+    expect(secondInfo[0]).toHaveTextContent("Second List");
+    expect(secondInfo[1]).toHaveTextContent("Books in list: 10");
+    expect(secondInfo[2]).toHaveTextContent("ID-2");
+
+    const secondButtons = secondList.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const secondEdit = within(secondButtons).getByTestId("Link");
+    expect(secondEdit).toHaveTextContent("Edit");
+    expect(secondEdit).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/edit/2"
+    );
+    const secondDelete = within(secondButtons).getByRole("button");
+    expect(secondDelete).toHaveTextContent("Delete");
+    await user.click(secondDelete);
+    expect(deleteCustomList).toHaveBeenCalledTimes(2);
+  });
+
+  it("disables the edit button if the list is already being edited", () => {
+    const props = baseProps();
+    const { container, rerender } = render(<CustomListsSidebar {...props} />);
+
+    const firstButtons = () =>
+      container.querySelectorAll<HTMLElement>(".custom-list-buttons")[0];
+
+    const editLink = within(firstButtons()).getByTestId("Link");
+    expect(editLink).not.toHaveClass("disabled");
+    expect(editLink).toHaveTextContent("EditPencil Icon");
+
+    rerender(<CustomListsSidebar {...props} identifier="1" />);
+
+    const editingButton = within(firstButtons()).getByRole("button", {
+      name: "Editing",
+    });
+    expect(editingButton).toBeDisabled();
+  });
+
+  it("renders a view button instead of an edit button if a list is not owned", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: false,
+            is_shared: false,
+          },
+        ]}
+      />
+    );
+
+    const firstButtons = container.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const viewLink = within(firstButtons).getByTestId("Link");
+    expect(viewLink).not.toHaveClass("disabled");
+    expect(viewLink).toHaveTextContent("ViewVisible Icon");
+  });
+
+  it("displays the delete button only to library managers", () => {
+    const props = baseProps();
+    const { container, rerender } = render(<CustomListsSidebar {...props} />);
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(2);
+
+    rerender(<CustomListsSidebar {...props} isLibraryManager={false} />);
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+
+  it("does not render a delete button if a list is not owned", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: false,
+            is_shared: false,
+          },
+        ]}
+      />
+    );
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+
+  it("does not render a delete button if a list is shared", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: true,
+            is_shared: true,
+          },
+        ]}
+      />
+    );
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+});

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