@thepalaceproject/circulation-admin 1.43.0-post.1 → 1.43.0-post.11

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Autocomplete from "../../../src/components/Autocomplete";
+
+describe("Autocomplete", () => {
+  const autocompleteValues = ["a", "b", "c"];
+
+  const renderAutocomplete = (ref?: React.Ref<Autocomplete>) =>
+    render(
+      <Autocomplete
+        ref={ref}
+        autocompleteValues={autocompleteValues}
+        disabled={false}
+        name="test"
+        label="Test"
+        value="b"
+      />
+    );
+
+  describe("rendering", () => {
+    it("shows input", () => {
+      renderAutocomplete();
+
+      expect(screen.getByText("Test")).toBeInTheDocument();
+      // An <input> with a `list` attribute has the implicit role "combobox".
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("type", "text");
+      expect(input).not.toBeDisabled();
+      expect(input).toHaveAttribute("name", "test");
+      expect(input).toHaveValue("b");
+      expect(input).toHaveAttribute("list", "test-autocomplete-list");
+    });
+
+    it("shows autocomplete list", () => {
+      const { container } = renderAutocomplete();
+
+      const list = container.querySelector("datalist#test-autocomplete-list");
+      expect(list).toBeInTheDocument();
+      const options = list.querySelectorAll("option");
+      expect(options).toHaveLength(3);
+      expect(options[0]).toHaveAttribute("value", "a");
+      expect(options[1]).toHaveAttribute("value", "b");
+      expect(options[2]).toHaveAttribute("value", "c");
+    });
+  });
+
+  describe("behavior", () => {
+    it("returns value", async () => {
+      const user = userEvent.setup();
+      // getValue() is the imperative API ProtocolFormField/LanguageField call
+      // via a ref in production, so exercise it through a real ref here.
+      const ref = React.createRef<Autocomplete>();
+      renderAutocomplete(ref);
+
+      expect(ref.current.getValue()).toBe("b");
+
+      const input = screen.getByRole("combobox");
+      await user.clear(input);
+      await user.type(input, "test value");
+
+      expect(input).toHaveValue("test value");
+      expect(ref.current.getValue()).toBe("test value");
+    });
+  });
+});

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

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+
+import BookDetails from "../../../src/components/BookDetails";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+const book: BookData = {
+  id: "urn:librarysimplified.org/terms/id/3M%20ID/crrmnr9",
+  url: "http://circulation.librarysimplified.org/works/3M/crrmnr9",
+  title: "The Mayan Secrets",
+  authors: ["Clive Cussler", "Thomas Perry"],
+  contributors: ["contributor 1"],
+  summary:
+    "<b>Sam and Remi Fargo race for treasure—and survival—in this lightning-paced new adventure from #1<i> New York Times</i> bestselling author Clive Cussler.</b><br /><br />Husband-and-wife team Sam and Remi Fargo are in Mexico when they come upon a remarkable discovery—the mummified remainsof a man clutching an ancient sealed pot. Within the pot is a Mayan book larger than any known before.<br /><br />The book contains astonishing information about the Mayans, their cities, and about mankind itself. The secrets are so powerful that some people would do anything to possess them—as the Fargos are about to find out. Many men and women are going to die for that book.",
+  imageUrl: "https://dlotdqc6pnwqb.cloudfront.net/3M/crrmnr9/cover.jpg",
+  borrowUrl: "borrow url",
+  openAccessLinks: [{ url: "secrets.epub", type: "application/epub+zip" }],
+  publisher: "Penguin Publishing Group",
+  published: "February 29, 2016",
+  categories: ["Children", "10-12", "Fiction", "Adventure", "Fantasy"],
+  raw: {
+    category: [
+      {
+        $: {
+          scheme: { value: "http://schema.org/audience" },
+          label: { value: "Children" },
+        },
+      },
+      {
+        $: {
+          scheme: { value: "http://schema.org/typicalAgeRange" },
+          label: { value: "10-12" },
+        },
+      },
+      {
+        $: {
+          scheme: { value: "http://librarysimplified.org/terms/fiction/" },
+          label: { value: "Fiction" },
+        },
+      },
+      {
+        $: {
+          scheme: {
+            value: "http://librarysimplified.org/terms/genres/Simplified/",
+          },
+          label: { value: "Adventure" },
+        },
+      },
+      {
+        $: {
+          scheme: {
+            value: "http://librarysimplified.org/terms/genres/Simplified/",
+          },
+          label: { value: "Fantasy" },
+        },
+      },
+    ],
+    "bibframe:distribution": [
+      {
+        $: {
+          "bibframe:ProviderName": {
+            value: "Overdrive",
+          },
+        },
+      },
+    ],
+    link: [
+      {
+        $: {
+          rel: { value: "issues" },
+          href: { value: "http://example.com/report" },
+        },
+      },
+      {
+        $: {
+          rel: { value: "http://librarysimplified.org/terms/rel/revoke" },
+          href: { value: "http://example.com/revoke" },
+        },
+      },
+    ],
+  },
+};
+
+describe("BookDetails", () => {
+  const updateBook = jest.fn();
+
+  it("shows audience and target age", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const audience = container.querySelector(".audience");
+    expect(audience).toBeInTheDocument();
+    expect(audience).toHaveTextContent("Audience: Children (age 10-12)");
+  });
+
+  it("shows categories", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const categories = container.querySelector(".categories");
+    expect(categories).toBeInTheDocument();
+    expect(categories).toHaveTextContent("Categories: Adventure, Fantasy");
+  });
+
+  it("doesn't show categories when there aren't any", () => {
+    const bookCopy: BookData = {
+      ...book,
+      raw: { category: [], link: [] },
+    };
+    const { container } = render(
+      <BookDetails book={bookCopy} updateBook={updateBook} />
+    );
+    expect(container.querySelector(".categories")).not.toBeInTheDocument();
+  });
+
+  it("shows distributor", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const distributor = container.querySelector(".distributed-by");
+    expect(distributor).toBeInTheDocument();
+    expect(distributor).toHaveTextContent("Distributed By: Overdrive");
+  });
+
+  it("doesn't render any circulation link content", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const circulationLinks = container.querySelector(".circulation-links");
+    expect(circulationLinks).toBeInTheDocument();
+    expect(circulationLinks).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+
+import buildStore from "../../../src/store";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+// BookDetailsTabContainer is a connected TabContainer that mounts every one of its
+// tab panels on render (the metadata editor, classifications, cover, and lists
+// editors), each of which fetches over the network on mount. That machinery is
+// incidental to what BookDetailsContainer composes, so mock it to a marker that
+// echoes the props it receives and renders the book child it is handed.
+jest.mock("../../../src/components/BookDetailsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-details-tab-container"
+      data-book-url={props.bookUrl}
+      data-collection-url={props.collectionUrl}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+      data-has-library={String(!!props.library)}
+      data-has-refresh-catalog={String(!!props.refreshCatalog)}
+    >
+      {props.children}
+    </div>
+  ),
+}));
+
+import BookDetailsContainer from "../../../src/components/BookDetailsContainer";
+import BookDetails from "../../../src/components/BookDetails";
+
+// BookDetailsContainer reads its configuration from the legacy React context that
+// the OPDS web client supplies in production. `renderWithProviders` does not supply
+// the `library` (nor `tab`) keys it reads, so wrap it in a small legacy context
+// provider that hands it everything it needs.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    editorStore: PropTypes.object,
+    csrfToken: PropTypes.string,
+    tab: PropTypes.string,
+    library: PropTypes.func,
+    admin: PropTypes.object,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const bookData: BookData = {
+  id: "book id",
+  url: "book url",
+  title: "book title",
+  raw: { category: [], link: [] },
+};
+
+describe("BookDetailsContainer", () => {
+  let store;
+  let context;
+  let refreshCatalog;
+
+  beforeEach(() => {
+    store = buildStore();
+    refreshCatalog = jest.fn();
+    context = {
+      editorStore: store,
+      csrfToken: "token",
+      library: jest.fn(),
+      admin: { isLibraryManager: () => true },
+    };
+  });
+
+  const renderContainer = () =>
+    render(
+      <LegacyContextProvider context={context}>
+        <BookDetailsContainer
+          book={bookData}
+          bookUrl="book url"
+          collectionUrl="collection url"
+          refreshCatalog={refreshCatalog}
+        >
+          <BookDetails book={bookData} updateBook={jest.fn()} />
+        </BookDetailsContainer>
+      </LegacyContextProvider>
+    );
+
+  it("renders BookDetails with its child's props", () => {
+    renderContainer();
+    // The container recreates the real BookDetails from the child element's props,
+    // so the book it was handed shows up (its title is rendered as the heading).
+    expect(
+      screen.getByRole("heading", { name: "book title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a tab container with initial tab", () => {
+    renderContainer();
+    const tabContainer = screen.getByTestId("book-details-tab-container");
+    expect(tabContainer).toBeInTheDocument();
+    expect(tabContainer).toHaveAttribute("data-book-url", "book url");
+    expect(tabContainer).toHaveAttribute(
+      "data-collection-url",
+      "collection url"
+    );
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The library function, redux store, and refreshCatalog callback are forwarded
+    // from context/props; they are not serializable to the DOM, so assert they were
+    // passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+    expect(tabContainer).toHaveAttribute("data-has-library", "true");
+    expect(tabContainer).toHaveAttribute("data-has-refresh-catalog", "true");
+  });
+});