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

package/package.json

@@ -143,5 +143,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.43.0-post.8"
+  "version": "1.43.0-post.9"
 }

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

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

@@ -0,0 +1,212 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AdvancedSearchFilterInput from "../../../src/components/AdvancedSearchFilterInput";
+import {
+  fields,
+  operators,
+} from "../../../src/components/AdvancedSearchBuilder";
+
+describe("AdvancedSearchFilterInput", () => {
+  let onAdd;
+  let onClearFiltersFlagChange;
+
+  const renderInput = () =>
+    render(
+      <AdvancedSearchFilterInput
+        name="include"
+        onAdd={onAdd}
+        onClearFiltersFlagChange={onClearFiltersFlagChange}
+      />
+    );
+
+  const fieldKeySelect = () =>
+    screen.getByRole("combobox", { name: "filter field key" });
+  const operatorSelect = () =>
+    screen.getByRole("combobox", { name: "filter operator" });
+
+  beforeEach(() => {
+    onAdd = jest.fn();
+    onClearFiltersFlagChange = jest.fn();
+  });
+
+  it("should render select with field names for field selection", () => {
+    renderInput();
+
+    const options = within(fieldKeySelect()).getAllByRole("option");
+
+    expect(options).toHaveLength(fields.length);
+
+    fields.forEach((field, index) => {
+      expect(options[index]).toHaveValue(field.value);
+    });
+  });
+
+  it("should render a select with options for operator selection", () => {
+    renderInput();
+
+    const options = within(operatorSelect()).getAllByRole("option");
+
+    expect(options).toHaveLength(operators.length);
+
+    operators.forEach((op, index) => {
+      expect(options[index]).toHaveValue(op.value);
+    });
+  });
+
+  it("should restrict the operator selection, if the filter requests it", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    // Select the fiction field key.
+    await user.selectOptions(fieldKeySelect(), "fiction");
+
+    // Look up the fiction field operator values.
+    const fictionField = fields.find((element) => element.value === "fiction");
+    const options = within(operatorSelect()).getAllByRole("option");
+
+    // And make sure the number of options is correct.
+    expect(options).toHaveLength(fictionField.operators.length);
+    options.forEach((option, index) => {
+      expect(option).toHaveValue(fictionField.operators[index]);
+    });
+  });
+
+  it("should use the currently selected operator when changing filters", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    const fictionField = fields.find((element) => element.value === "fiction");
+
+    await user.selectOptions(operatorSelect(), "regex");
+
+    // Select data source/Distributor as the filter key.
+    await user.selectOptions(fieldKeySelect(), "data_source");
+    expect(operatorSelect()).toHaveValue("regex");
+
+    // But the "regex" operator is not supported by the "fiction" field,
+    // so we switch to fiction's first available operator.
+    await user.selectOptions(fieldKeySelect(), "fiction");
+    expect(operatorSelect()).toHaveValue(fictionField.operators[0]);
+
+    // Since data source/distributor supports fiction's first operator,
+    // we'll continue to use it when changing back to that field.
+    await user.selectOptions(fieldKeySelect(), "data_source");
+    expect(operatorSelect()).toHaveValue(fictionField.operators[0]);
+  });
+
+  it("should render a text input for value entry", () => {
+    renderInput();
+
+    expect(
+      screen.getByRole("textbox", { name: "filter value" })
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("combobox", { name: "filter value" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("surfaces the field's placeholder and help text for the publication date field", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    // "publication date" is the only field that defines a placeholder and
+    // helpText; selecting it surfaces both on the value input (as its
+    // placeholder and accessible description). This is the sole coverage for
+    // those two props of AdvancedSearchFilterInput.
+    await user.selectOptions(fieldKeySelect(), "published");
+
+    const valueInput = screen.getByRole("textbox", { name: "filter value" });
+    expect(valueInput).toHaveAttribute("placeholder", "YYYY-MM-DD");
+    expect(valueInput).toHaveAccessibleDescription(/publication date/i);
+    expect(valueInput).toHaveAccessibleDescription(/YYYY-MM-DD/i);
+  });
+
+  it("should render a select for value selection, if the filter requests it", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    await user.selectOptions(fieldKeySelect(), "fiction");
+
+    expect(
+      screen.getByRole("combobox", { name: "filter value" })
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("textbox", { name: "filter value" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("should clear the current value when changing the filter", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    const valueInput = screen.getByRole("textbox", { name: "filter value" });
+
+    await user.type(valueInput, "ABC");
+
+    await user.selectOptions(fieldKeySelect(), "data_source");
+
+    expect(screen.getByRole("textbox", { name: "filter value" })).toHaveValue(
+      ""
+    );
+  });
+
+  it("should render an Add Filter button", () => {
+    renderInput();
+
+    const buttons = screen.getAllByRole("button");
+
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]).toHaveTextContent("Add filter");
+  });
+
+  it("should disable the Add Filter button when the value is blank", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    const valueInput = screen.getByRole("textbox", { name: "filter value" });
+
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeDisabled();
+
+    await user.type(valueInput, "   ");
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeDisabled();
+
+    await user.clear(valueInput);
+    await user.type(valueInput, "hello");
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeEnabled();
+  });
+
+  it("should call onAdd when the Add Filter button is clicked", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    const valueInput = screen.getByRole("textbox", { name: "filter value" });
+
+    await user.type(valueInput, "hello");
+    await user.click(screen.getByRole("button", { name: "Add filter" }));
+
+    expect(onAdd).toHaveBeenCalledTimes(1);
+    expect(onAdd).toHaveBeenCalledWith({
+      key: "genre",
+      op: "eq",
+      value: "hello",
+    });
+  });
+
+  it("should trim whitespace from the value", async () => {
+    const user = userEvent.setup();
+    renderInput();
+
+    const valueInput = screen.getByRole("textbox", { name: "filter value" });
+
+    await user.type(valueInput, "  hello  ");
+    await user.click(screen.getByRole("button", { name: "Add filter" }));
+
+    expect(onAdd).toHaveBeenCalledTimes(1);
+    expect(onAdd).toHaveBeenCalledWith({
+      key: "genre",
+      op: "eq",
+      value: "hello",
+    });
+  });
+});

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

@@ -0,0 +1,52 @@
+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 AdvancedSearchFilterViewer from "../../../src/components/AdvancedSearchFilterViewer";
+
+describe("AdvancedSearchFilterViewer", () => {
+  let onBooleanChange;
+  let onMove;
+  let onSelect;
+  let onRemove;
+  let query;
+
+  beforeEach(() => {
+    onBooleanChange = jest.fn();
+    onMove = jest.fn();
+    onSelect = jest.fn();
+    onRemove = jest.fn();
+
+    query = {
+      id: "0",
+      key: "genre",
+      value: "Horror",
+    };
+  });
+
+  it("should render an AdvancedSearchFilter", () => {
+    const { container } = render(
+      <DndProvider backend={HTML5Backend}>
+        <AdvancedSearchFilterViewer
+          query={query}
+          readOnly={false}
+          selectedQueryId="0"
+          onBooleanChange={onBooleanChange}
+          onMove={onMove}
+          onSelect={onSelect}
+          onRemove={onRemove}
+        />
+      </DndProvider>
+    );
+
+    // The viewer wraps its filter in a tree container and passes the query through,
+    // so the value filter renders inside it.
+    expect(screen.getByRole("tree")).toBeInTheDocument();
+    expect(screen.getByText("Genre Horror")).toBeInTheDocument();
+
+    // readOnly is false and selectedQueryId matches the query id, so it is selected.
+    expect(
+      container.querySelector(".advanced-search-value-filter")
+    ).toHaveClass("selected");
+  });
+});