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

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

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import AdvancedSearchValueFilter from "../../../src/components/AdvancedSearchValueFilter";
+import {
+  fields,
+  operators,
+} from "../../../src/components/AdvancedSearchBuilder";
+
+describe("AdvancedSearchValueFilter", () => {
+  let onMove;
+  let onRemove;
+  let onSelect;
+  let query;
+
+  const renderFilter = (props = {}) =>
+    render(
+      <DndProvider backend={HTML5Backend}>
+        <AdvancedSearchValueFilter
+          query={query}
+          onMove={onMove}
+          onSelect={onSelect}
+          onRemove={onRemove}
+          {...props}
+        />
+      </DndProvider>
+    );
+
+  beforeEach(() => {
+    onMove = jest.fn();
+    onRemove = jest.fn();
+    onSelect = jest.fn();
+
+    query = {
+      id: "91",
+      key: "title",
+      op: "eq",
+      value: "foo",
+    };
+  });
+
+  it("should render the field label, operator symbol, and value of the query", () => {
+    renderFilter();
+
+    const expectedField = `${
+      fields.find((field) => field.value === "title")?.label
+    }`;
+    const expectedOperator = `${
+      operators.find((op) => op.value === "eq")?.symbol
+    }`;
+    const filterLabelText = `${expectedField} ${expectedOperator} foo`;
+
+    expect(screen.getByText(filterLabelText)).toBeInTheDocument();
+  });
+
+  it("should apply the selected class when selected is true", () => {
+    const { container } = renderFilter({ selected: true });
+
+    expect(
+      container.querySelector(".advanced-search-value-filter")
+    ).toHaveClass("selected");
+  });
+
+  it("should not apply the selected class when readOnly is true", () => {
+    const { container } = renderFilter({ readOnly: true, selected: true });
+
+    expect(
+      container.querySelector(".advanced-search-value-filter")
+    ).not.toHaveClass("selected");
+  });
+
+  it("should render a remove button", () => {
+    renderFilter();
+
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveTextContent("×");
+  });
+
+  it("should not render a remove button when readOnly is true", () => {
+    renderFilter({ readOnly: true });
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should call onRemove when the remove button is clicked", async () => {
+    const user = userEvent.setup();
+    renderFilter();
+
+    await user.click(screen.getByRole("button"));
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledWith("91");
+  });
+
+  it("should call onSelect when clicked", async () => {
+    const user = userEvent.setup();
+    const { container } = renderFilter();
+
+    await user.click(container.querySelector(".advanced-search-value-filter"));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith("91");
+  });
+
+  it("should call onSelect when the space bar is depressed", async () => {
+    const user = userEvent.setup();
+    const { container } = renderFilter();
+
+    // The filter is a focusable treeitem; focus it and press space, as a
+    // keyboard user would.
+    const item = container.querySelector(
+      ".advanced-search-value-filter"
+    ) as HTMLElement;
+    item.focus();
+    await user.keyboard(" ");
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith("91");
+  });
+});

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { screen, within } from "@testing-library/react";
+import { CatalogServices } from "../../../src/components/CatalogServices";
+import renderWithContext from "../testUtils/renderWithContext";
+import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+
+describe("CatalogServices", () => {
+  const data = {
+    catalog_services: [
+      {
+        id: 2,
+        protocol: "test protocol",
+        settings: {
+          test_setting: "test setting",
+        },
+        libraries: [
+          {
+            short_name: "nypl",
+            test_library_setting: "test library setting",
+          },
+        ],
+        name: "nypl catalog",
+      },
+    ],
+    protocols: [
+      {
+        name: "test protocol",
+        label: "test protocol label",
+        settings: [],
+      },
+    ],
+    allLibraries: [
+      {
+        short_name: "nypl",
+      },
+    ],
+  };
+
+  const config = { csrfToken: "token", featureFlags: defaultFeatureFlags };
+
+  it("shows catalog service list", () => {
+    renderWithContext(
+      <CatalogServices
+        data={data}
+        fetchData={jest.fn()}
+        editItem={jest.fn().mockResolvedValue(undefined)}
+        csrfToken="token"
+        isFetching={false}
+      />,
+      config
+    );
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent("nypl catalog: test protocol label");
+
+    const editLink = within(items[0]).getByRole("link");
+    expect(editLink).toHaveAttribute(
+      "href",
+      "/admin/web/config/catalogServices/edit/2"
+    );
+  });
+});

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import CirculationEventsDownloadForm from "../../../src/components/CirculationEventsDownloadForm";
+
+describe("CirculationEventsDownloadForm", () => {
+  let hide: jest.Mock;
+
+  beforeEach(() => {
+    hide = jest.fn();
+    render(<CirculationEventsDownloadForm show={true} hide={hide} />);
+  });
+
+  it("renders start date and end date inputs", () => {
+    // The modal renders into a portal, so query the whole document.
+    const dates =
+      document.querySelectorAll<HTMLInputElement>("input[type='date']");
+    expect(dates).toHaveLength(2);
+    expect(dates[0].name).toBe("dateStart");
+    expect(dates[1].name).toBe("dateEnd");
+  });
+
+  it("renders download and close buttons", async () => {
+    const user = userEvent.setup();
+
+    expect(
+      screen.getByRole("button", { name: "Download" })
+    ).toBeInTheDocument();
+
+    // The modal header's dismiss control is also labeled "Close" (its visible
+    // "×" is aria-hidden), so scope to the footer for the reusable Close button.
+    const footer = document.querySelector<HTMLElement>(".modal-footer");
+    const closeButton = within(footer).getByRole("button", { name: "Close" });
+    expect(closeButton).toBeInTheDocument();
+
+    await user.click(closeButton);
+
+    expect(hide).toHaveBeenCalledTimes(1);
+  });
+});

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