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

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

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Announcement from "../../../src/components/Announcement";
+
+describe("Announcement", () => {
+  let stubDelete: jest.Mock;
+  let stubEdit: jest.Mock;
+
+  beforeEach(() => {
+    stubDelete = jest.fn();
+    stubEdit = jest.fn();
+  });
+
+  const renderAnnouncement = (
+    overrides: Partial<React.ComponentProps<typeof Announcement>> = {}
+  ) =>
+    render(
+      <Announcement
+        content="test"
+        start="2020-05-12"
+        finish="2020-05-28"
+        id="1"
+        delete={stubDelete}
+        edit={stubEdit}
+        {...overrides}
+      />
+    );
+
+  it("renders the content and dates", () => {
+    const { container } = renderAnnouncement();
+
+    expect(
+      container.querySelector("section.announcement-info")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".dates")).toHaveTextContent(
+      "05/12/2020 – 05/28/2020"
+    );
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+
+  it("renders an edit button", async () => {
+    const user = userEvent.setup();
+    renderAnnouncement();
+
+    const editButton = screen.getByRole("button", { name: "Edit" });
+    await user.click(editButton);
+
+    expect(stubEdit).toHaveBeenCalledTimes(1);
+    expect(stubEdit).toHaveBeenCalledWith("1");
+  });
+
+  it("renders a delete button", async () => {
+    const user = userEvent.setup();
+    renderAnnouncement();
+
+    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    await user.click(deleteButton);
+
+    expect(stubDelete).toHaveBeenCalledTimes(1);
+    expect(stubDelete).toHaveBeenCalledWith("1");
+  });
+
+  it("formats dates", () => {
+    // The dates are stored as year-month-day but displayed as month/day/year.
+    const { container } = renderAnnouncement({
+      start: "2020-03-14",
+      finish: "2021-12-25",
+    });
+
+    expect(container.querySelector(".dates")).toHaveTextContent(
+      "03/14/2020 – 12/25/2021"
+    );
+  });
+});

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

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import AnnouncementForm from "../../../src/components/AnnouncementForm";
+
+// 66 characters — within the 15-350 valid range.
+const CONTENT =
+  "Here is some sample content which comes out to over 15 characters.";
+
+const getTextarea = () => screen.getByRole("textbox") as HTMLTextAreaElement;
+const getDateInputs = (container: HTMLElement) =>
+  Array.from(
+    container.querySelectorAll<HTMLInputElement>('input[type="date"]')
+  );
+const getCounter = () => screen.getByText(/Current length:/);
+
+// Enter valid content and a start/finish date.
+const fillOutForm = async (
+  user: ReturnType<typeof userEvent.setup>,
+  container: HTMLElement
+) => {
+  await user.type(getTextarea(), CONTENT);
+  const [start, finish] = getDateInputs(container);
+  // Date inputs are read via a ref, so `fireEvent.change` (set value + dispatch)
+  // reliably sets the value.
+  fireEvent.change(start, { target: { value: "2020-06-01" } });
+  fireEvent.change(finish, { target: { value: "2020-07-01" } });
+};
+
+describe("AnnouncementForm", () => {
+  let add: jest.Mock;
+  beforeEach(() => {
+    add = jest.fn();
+  });
+
+  it("renders the input fields", () => {
+    const { container } = render(<AnnouncementForm add={add} />);
+
+    // Content field: a textarea carrying the 15/350 length constraints.
+    const textarea = getTextarea();
+    expect(textarea.tagName).toBe("TEXTAREA");
+    expect(textarea).toHaveAttribute("minlength", "15");
+    expect(textarea).toHaveAttribute("maxlength", "350");
+    expect(
+      screen.getByText("New Announcement Text (15-350 characters)")
+    ).toBeInTheDocument();
+    expect(screen.getByText("(Current length: 0/350)")).toBeInTheDocument();
+
+    // Two date fields, each with its label and description.
+    const dates = getDateInputs(container);
+    expect(dates).toHaveLength(2);
+    // EditableInput prepends "(Optional) " to each description, so match the
+    // full sentence as a substring rather than the whole text content.
+    expect(screen.getByText("Start Date")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /If no start date is chosen, the default start date is today's date\./
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByText("End Date")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /If no expiration date is chosen, the default expiration date is 2 months from the start date\./
+      )
+    ).toBeInTheDocument();
+  });
+
+  // The other tests only compare the date fields against whatever they rendered
+  // with, so they would all still pass if the defaults came out blank. Pin the
+  // clock and assert the actual values.
+  it("prefills the date fields with today and two months from today", () => {
+    jest.useFakeTimers().setSystemTime(new Date(2026, 2, 15));
+    try {
+      const { container } = render(<AnnouncementForm add={add} />);
+
+      const [start, finish] = getDateInputs(container);
+      expect(start.value).toBe("2026-03-15");
+      expect(finish.value).toBe("2026-05-15");
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it("renders the buttons", () => {
+    render(<AnnouncementForm add={add} />);
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+  });
+
+  it("keeps track of whether the content is too short or too long", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<AnnouncementForm add={add} />);
+
+    // Empty content: 0/350, flagged as the wrong length, Add disabled.
+    expect(getCounter()).toHaveTextContent("(Current length: 0/350)");
+    expect(getCounter().parentElement).toHaveClass("wrong-length");
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+
+    // Valid content: length flag cleared and Add enabled.
+    await fillOutForm(user, container);
+    expect(getCounter()).toHaveTextContent("(Current length: 66/350)");
+    expect(getCounter().parentElement).not.toHaveClass("wrong-length");
+    expect(screen.getByRole("button", { name: "Add" })).not.toBeDisabled();
+
+    // Content at the 350-character cap is flagged as too long again.
+    const longString =
+      "Here's some extremely/gratuitously long content.  The point of the content is just to get up to 350 characters so that I can test whether the class name will change.  I realize even as I am typing this that it probably would have been a better idea to do it with filler text; oh well...?  Anyway, I have now written the most boring announcement EVER.";
+    fireEvent.change(getTextarea(), { target: { value: longString } });
+    expect(getCounter()).toHaveTextContent("(Current length: 350/350)");
+    expect(getCounter().parentElement).toHaveClass("wrong-length");
+  });
+
+  it("adds a new announcement", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<AnnouncementForm add={add} />);
+    await fillOutForm(user, container);
+
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(add.mock.calls[0][0].content).toBe(CONTENT);
+    expect(add.mock.calls[0][0].start).toBe("2020-06-01");
+    expect(add.mock.calls[0][0].finish).toBe("2020-07-01");
+  });
+
+  it("cancels adding a new announcement", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<AnnouncementForm add={add} />);
+    const [start0, finish0] = getDateInputs(container);
+    const defaultStart = start0.value;
+    const defaultFinish = finish0.value;
+
+    await fillOutForm(user, container);
+    expect(getTextarea()).toHaveValue(CONTENT);
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    // Cancelling a brand-new announcement adds nothing and restores the
+    // empty content field and the default dates.
+    expect(add).not.toHaveBeenCalled();
+    expect(getTextarea()).toHaveValue("");
+    expect(getCounter()).toHaveTextContent("(Current length: 0/350)");
+    const [start1, finish1] = getDateInputs(container);
+    expect(start1.value).toBe(defaultStart);
+    expect(finish1.value).toBe(defaultFinish);
+  });
+
+  it("edits an existing announcement", async () => {
+    const user = userEvent.setup();
+    const { container, rerender } = render(<AnnouncementForm add={add} />);
+    const [start0, finish0] = getDateInputs(container);
+    const defaultStart = start0.value;
+    const defaultFinish = finish0.value;
+
+    // Supplying an existing announcement's props switches the form to edit mode.
+    rerender(
+      <AnnouncementForm
+        add={add}
+        content={CONTENT}
+        start="07/01/2020"
+        finish="08/01/2020"
+      />
+    );
+
+    // The form is populated with the existing announcement (dates reformatted).
+    expect(getTextarea()).toHaveValue(CONTENT);
+    const [start1, finish1] = getDateInputs(container);
+    expect(start1.value).toBe("2020-07-01");
+    expect(finish1.value).toBe("2020-08-01");
+
+    // Edit the content and save it.
+    fireEvent.change(getTextarea(), {
+      target: { value: "Here is an edited version of the content" },
+    });
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(add.mock.calls[0][0].content).toBe(
+      "Here is an edited version of the content"
+    );
+
+    // The form resets to an empty content field and the default dates.
+    expect(getTextarea()).toHaveValue("");
+    const [start2, finish2] = getDateInputs(container);
+    expect(start2.value).toBe(defaultStart);
+    expect(finish2.value).toBe(defaultFinish);
+  });
+
+  it("cancels editing an existing announcement", async () => {
+    const user = userEvent.setup();
+    const { container, rerender } = render(<AnnouncementForm add={add} />);
+    const [start0, finish0] = getDateInputs(container);
+    const defaultStart = start0.value;
+    const defaultFinish = finish0.value;
+
+    rerender(
+      <AnnouncementForm
+        add={add}
+        content={CONTENT}
+        start="07/01/2020"
+        finish="08/01/2020"
+      />
+    );
+
+    expect(getTextarea()).toHaveValue(CONTENT);
+    const [start1, finish1] = getDateInputs(container);
+    expect(start1.value).toBe("2020-07-01");
+    expect(finish1.value).toBe("2020-08-01");
+
+    fireEvent.change(getTextarea(), {
+      target: { value: "Here is an edited version of the content" },
+    });
+    // Cancelling while editing re-submits the (edited) announcement rather than
+    // discarding it — unlike cancelling a brand-new one.
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(add.mock.calls[0][0].content).toBe(
+      "Here is an edited version of the content"
+    );
+
+    expect(getTextarea()).toHaveValue("");
+    const [start2, finish2] = getDateInputs(container);
+    expect(start2.value).toBe(defaultStart);
+    expect(finish2.value).toBe(defaultFinish);
+  });
+});