@thepalaceproject/circulation-admin 1.43.0 → 1.44.0-post.3

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

@@ -0,0 +1,231 @@
+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 AdvancedSearchBooleanFilter from "../../../src/components/AdvancedSearchBooleanFilter";
+
+describe("AdvancedSearchBooleanFilter", () => {
+  let onBooleanChange;
+  let onMove;
+  let onRemove;
+  let onSelect;
+  let query;
+
+  const renderFilter = (props = {}) =>
+    render(
+      <DndProvider backend={HTML5Backend}>
+        <AdvancedSearchBooleanFilter
+          query={query}
+          selectedQueryId="91"
+          onBooleanChange={onBooleanChange}
+          onMove={onMove}
+          onSelect={onSelect}
+          onRemove={onRemove}
+          {...props}
+        />
+      </DndProvider>
+    );
+
+  beforeEach(() => {
+    onBooleanChange = jest.fn();
+    onMove = jest.fn();
+    onRemove = jest.fn();
+    onSelect = jest.fn();
+
+    query = {
+      id: "90",
+      and: [
+        {
+          id: "91",
+          key: "title",
+          value: "foo",
+        },
+        {
+          id: "92",
+          key: "title",
+          value: "bar",
+        },
+      ],
+    };
+  });
+
+  it("should render a select containing an option for each boolean operator, with the current operator selected", () => {
+    renderFilter();
+
+    const select = screen.getByRole("combobox");
+    const options = screen.getAllByRole("option");
+
+    expect(options).toHaveLength(2);
+
+    expect(options[0]).toHaveValue("and");
+    expect(options[0]).toHaveTextContent(
+      "All of these filters must be matched:"
+    );
+
+    expect(options[1]).toHaveValue("or");
+    expect(options[1]).toHaveTextContent(
+      "Any of these filters may be matched:"
+    );
+
+    expect(select).toHaveValue("and");
+  });
+
+  it("should disable the boolean operator select when readOnly is true", () => {
+    renderFilter({ readOnly: true });
+
+    expect(screen.getByRole("combobox")).toBeDisabled();
+  });
+
+  it("should call onBooleanChange when the boolean operator changes", async () => {
+    const user = userEvent.setup();
+    renderFilter();
+
+    await user.selectOptions(screen.getByRole("combobox"), "or");
+
+    expect(onBooleanChange).toHaveBeenCalledTimes(1);
+    expect(onBooleanChange).toHaveBeenCalledWith("90", "or");
+  });
+
+  it("should render a remove button", () => {
+    const { container } = renderFilter();
+
+    const button = container.querySelector(
+      ".advanced-search-boolean-filter > header button"
+    );
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("×");
+  });
+
+  it("should not render a remove button when readOnly is true", () => {
+    const { container } = renderFilter({ readOnly: true });
+
+    // readOnly propagates to all descendants, so there are no remove buttons at all.
+    expect(
+      container.querySelector(".advanced-search-boolean-filter > header button")
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should call onRemove when the remove button is clicked", async () => {
+    const user = userEvent.setup();
+    const { container } = renderFilter();
+
+    await user.click(
+      container.querySelector(".advanced-search-boolean-filter > header button")
+    );
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledWith("90");
+  });
+
+  it("should call onSelect when clicked", async () => {
+    const user = userEvent.setup();
+    const { container } = renderFilter();
+
+    await user.click(
+      container.querySelector(".advanced-search-boolean-filter")
+    );
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith("90");
+  });
+
+  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-boolean-filter"
+    ) as HTMLElement;
+    item.focus();
+    await user.keyboard(" ");
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith("90");
+  });
+
+  it("should render an AdvancedSearchFilter for each child", () => {
+    const { container } = renderFilter();
+
+    // Each child value query renders an AdvancedSearchValueFilter showing its label.
+    const childFilters = container.querySelectorAll(
+      ".advanced-search-value-filter"
+    );
+
+    expect(childFilters).toHaveLength(2);
+    expect(screen.getByText("Title foo")).toBeInTheDocument();
+    expect(screen.getByText("Title bar")).toBeInTheDocument();
+  });
+
+  it("should propagate the readOnly prop to AdvancedSearchFilter children", () => {
+    const { container } = renderFilter({ readOnly: true });
+
+    // The two children still render, but readOnly means none of them (or the
+    // parent) render a remove button.
+    expect(
+      container.querySelectorAll(".advanced-search-value-filter")
+    ).toHaveLength(2);
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
+  });
+
+  it('should separate child filters with "and" when the boolean operator is AND', () => {
+    const { container } = renderFilter();
+
+    const separators = container.querySelectorAll(
+      ".advanced-search-boolean-filter > ul > li > span"
+    );
+
+    expect(separators).toHaveLength(1);
+    expect(separators[0]).toHaveTextContent("and");
+  });
+
+  it('should separate child filters with "or" when the boolean operator is OR', () => {
+    query = {
+      id: "90",
+      or: [
+        {
+          id: "91",
+          key: "title",
+          value: "foo",
+        },
+        {
+          id: "92",
+          key: "title",
+          value: "bar",
+        },
+      ],
+    };
+
+    const { container } = renderFilter();
+
+    const separators = container.querySelectorAll(
+      ".advanced-search-boolean-filter > ul > li > span"
+    );
+
+    expect(separators).toHaveLength(1);
+    expect(separators[0]).toHaveTextContent("or");
+  });
+
+  it("should apply the selected class when the query id equals the selectedQueryId", () => {
+    const { container } = renderFilter({ selectedQueryId: "90" });
+
+    expect(
+      container.querySelector(".advanced-search-boolean-filter")
+    ).toHaveClass("selected");
+  });
+
+  it("should not apply the selected class when readOnly is true", () => {
+    const { container } = renderFilter({
+      readOnly: true,
+      selectedQueryId: "90",
+    });
+
+    expect(
+      container.querySelector(".advanced-search-boolean-filter")
+    ).not.toHaveClass("selected");
+  });
+});

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

@@ -1,38 +1,111 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+
+// AdvancedSearchBuilder is a pure forwarding component: it renders an
+// AdvancedSearchFilterInput and an AdvancedSearchFilterViewer and threads their
+// callbacks up to the builder's handlers, prefixed with the builder `name`. Mock
+// both children to markers that capture the props they receive, so those
+// forwarding closures can be exercised directly — including `onMove`, which is
+// otherwise only reachable through a real react-dnd drag that jsdom can't perform.
+let inputProps: any;
+let viewerProps: any;
+jest.mock("../../../src/components/AdvancedSearchFilterInput", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    inputProps = props;
+    return <div data-testid="filter-input" data-name={props.name} />;
+  },
+}));
+jest.mock("../../../src/components/AdvancedSearchFilterViewer", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    viewerProps = props;
+    return (
+      <div
+        data-testid="filter-viewer"
+        data-read-only={String(props.readOnly)}
+      />
+    );
+  },
+}));
+
 import AdvancedSearchBuilder from "../../../src/components/AdvancedSearchBuilder";
 
 describe("AdvancedSearchBuilder", () => {
-  it("renders a placeholder and help text when the publication date filter is selected", async () => {
-    userEvent.setup();
+  const query = { id: "0", key: "genre", value: "Horror" };
 
-    const query = {
-      id: "0",
-      key: "genre",
-      value: "Horror",
+  const renderBuilder = (overrides: Record<string, unknown> = {}) => {
+    const handlers = {
+      addQuery: jest.fn(),
+      updateClearFiltersFlag: jest.fn(),
+      updateQueryBoolean: jest.fn(),
+      moveQuery: jest.fn(),
+      removeQuery: jest.fn(),
+      selectQuery: jest.fn(),
     };
-
     render(
       <AdvancedSearchBuilder
-        isOwner={true}
-        name="search"
-        query={query}
+        isOwner
+        name="include"
+        query={query as any}
         selectedQueryId="0"
+        {...handlers}
+        {...overrides}
       />
     );
+    return handlers;
+  };
+
+  beforeEach(() => {
+    inputProps = undefined;
+    viewerProps = undefined;
+  });
+
+  it("renders the filter input and the viewer", () => {
+    renderBuilder();
+
+    expect(screen.getByTestId("filter-input")).toHaveAttribute(
+      "data-name",
+      "include"
+    );
+    expect(screen.getByTestId("filter-viewer")).toBeInTheDocument();
+    expect(viewerProps.query).toBe(query);
+    expect(viewerProps.selectedQueryId).toBe("0");
+  });
+
+  it("hides the filter input and marks the viewer read-only when not the owner", () => {
+    renderBuilder({ isOwner: false });
 
-    await userEvent.selectOptions(
-      screen.getByRole("combobox", { name: "filter field key" }),
-      screen.getByRole("option", { name: "Publication Date" })
+    expect(screen.queryByTestId("filter-input")).not.toBeInTheDocument();
+    expect(screen.getByTestId("filter-viewer")).toHaveAttribute(
+      "data-read-only",
+      "true"
     );
+  });
+
+  it("forwards the input's onAdd and clear-filters callbacks with the builder name", () => {
+    const { addQuery, updateClearFiltersFlag } = renderBuilder();
+
+    const newQuery = { key: "title", value: "The Shining" };
+    inputProps.onAdd(newQuery);
+    inputProps.onClearFiltersFlagChange(true);
+
+    expect(addQuery).toHaveBeenCalledWith("include", newQuery);
+    expect(updateClearFiltersFlag).toHaveBeenCalledWith("include", true);
+  });
+
+  it("forwards the viewer's callbacks to their handlers with the builder name", () => {
+    const { updateQueryBoolean, moveQuery, removeQuery, selectQuery } =
+      renderBuilder();
 
-    const filterValueField = screen.getByRole("textbox", {
-      name: "filter value",
-    });
+    viewerProps.onBooleanChange("2", "or");
+    viewerProps.onMove("2", "33");
+    viewerProps.onRemove("2");
+    viewerProps.onSelect("2");
 
-    expect(filterValueField).toHaveAttribute("placeholder", "YYYY-MM-DD");
-    expect(filterValueField).toHaveAccessibleDescription(/publication date/i);
-    expect(filterValueField).toHaveAccessibleDescription(/YYYY-MM-DD/i);
+    expect(updateQueryBoolean).toHaveBeenCalledWith("include", "2", "or");
+    expect(moveQuery).toHaveBeenCalledWith("include", "2", "33");
+    expect(removeQuery).toHaveBeenCalledWith("include", "2");
+    expect(selectQuery).toHaveBeenCalledWith("include", "2");
   });
 });

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

@@ -0,0 +1,142 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import AdvancedSearchFilter from "../../../src/components/AdvancedSearchFilter";
+
+describe("AdvancedSearchFilter", () => {
+  let onBooleanChange;
+  let onMove;
+  let onSelect;
+  let onRemove;
+
+  const renderFilter = (props) =>
+    render(
+      <DndProvider backend={HTML5Backend}>
+        <AdvancedSearchFilter
+          onBooleanChange={onBooleanChange}
+          onMove={onMove}
+          onSelect={onSelect}
+          onRemove={onRemove}
+          {...props}
+        />
+      </DndProvider>
+    );
+
+  beforeEach(() => {
+    onBooleanChange = jest.fn();
+    onMove = jest.fn();
+    onSelect = jest.fn();
+    onRemove = jest.fn();
+  });
+
+  it("should render an AdvancedSearchBooleanFilter if the query is a boolean AND", () => {
+    const query = {
+      id: "90",
+      and: [
+        {
+          id: "91",
+          key: "title",
+          value: "foo",
+        },
+        {
+          id: "92",
+          key: "title",
+          value: "bar",
+        },
+      ],
+    };
+
+    const { container } = renderFilter({ query, selectedQueryId: "90" });
+
+    // The boolean filter is the only thing with a select (the operator picker),
+    // and it renders one value filter per child.
+    const select = screen.getByRole("combobox");
+    expect(select).toHaveValue("and");
+    expect(
+      container.querySelectorAll(".advanced-search-value-filter")
+    ).toHaveLength(2);
+    expect(screen.getByText("Title foo")).toBeInTheDocument();
+    expect(screen.getByText("Title bar")).toBeInTheDocument();
+
+    // selectedQueryId matches the boolean query, so it is selected.
+    expect(
+      container.querySelector(".advanced-search-boolean-filter")
+    ).toHaveClass("selected");
+  });
+
+  it("should render an AdvancedSearchBooleanFilter if the query is a boolean OR", () => {
+    const query = {
+      id: "90",
+      or: [
+        {
+          id: "91",
+          key: "title",
+          value: "foo",
+        },
+        {
+          id: "92",
+          key: "title",
+          value: "bar",
+        },
+      ],
+    };
+
+    renderFilter({ query, readOnly: true, selectedQueryId: "90" });
+
+    const select = screen.getByRole("combobox");
+    expect(select).toHaveValue("or");
+    // readOnly disables the operator select and removes all remove buttons.
+    expect(select).toBeDisabled();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should render an AdvancedSearchValueFilter if the query is a not a boolean", () => {
+    const query = {
+      id: "91",
+      key: "title",
+      value: "foo",
+    };
+
+    renderFilter({
+      query,
+      readOnly: true,
+      selectedQueryId: "90",
+    });
+
+    // A value filter has no operator select; readOnly removes its remove button.
+    expect(screen.getByText("Title foo")).toBeInTheDocument();
+    expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should not select the AdvancedSearchValueFilter when selectedQueryId does not match the query id", () => {
+    const query = {
+      id: "91",
+      key: "title",
+      value: "foo",
+    };
+
+    // Not readOnly, so selection is driven purely by the id comparison:
+    // selectedQueryId ("90") does not match the query id ("91").
+    const { container } = renderFilter({ query, selectedQueryId: "90" });
+
+    expect(
+      container.querySelector(".advanced-search-value-filter")
+    ).not.toHaveClass("selected");
+  });
+
+  it("should select the AdvancedSearchValueFilter if the query is a not a boolean and selectedQueryId is the id of the query", () => {
+    const query = {
+      id: "91",
+      key: "title",
+      value: "foo",
+    };
+
+    const { container } = renderFilter({ query, selectedQueryId: "91" });
+
+    expect(
+      container.querySelector(".advanced-search-value-filter")
+    ).toHaveClass("selected");
+  });
+});