@thepalaceproject/circulation-admin 1.43.0-post.7 → 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/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");
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// ConfigTabContainer mounts the connected configuration sections (Libraries,
+// Collections, Individual Admins, ...) which fetch over the network on mount. That
+// is incidental to what ConfigPage composes — the page's job is to hand the tab
+// container the params and context it needs — so mock it to a marker that echoes
+// the props it received.
+jest.mock("../../../src/components/ConfigTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="config-tab-container"
+      data-tab={props.tab}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import ConfigPage from "../../../src/components/ConfigPage";
+
+describe("ConfigPage", () => {
+  const params = {
+    tab: "libraries",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows a tab container with tab from params", () => {
+    renderWithProviders(<ConfigPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const tabContainer = screen.getByTestId("config-tab-container");
+    expect(tabContainer).toHaveAttribute("data-tab", "libraries");
+    expect(tabContainer).toHaveAttribute("data-edit-or-create", "edit");
+    expect(tabContainer).toHaveAttribute("data-identifier", "identifier");
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// CustomLists is a connected component that fetches lists, collections, libraries,
+// and languages over the network on mount. That is incidental to what
+// CustomListPage composes — the page's job is to hand the editor the params and
+// context it needs — so mock it to a marker that echoes the props it received.
+jest.mock("../../../src/components/CustomLists", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists"
+      data-library={props.library}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import CustomListPage from "../../../src/components/CustomListPage";
+
+describe("CustomListPage", () => {
+  const params = {
+    library: "library",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows custom lists with info from params", () => {
+    renderWithProviders(<CustomListPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const customLists = screen.getByTestId("custom-lists");
+    expect(customLists).toHaveAttribute("data-library", "library");
+    expect(customLists).toHaveAttribute("data-edit-or-create", "edit");
+    expect(customLists).toHaveAttribute("data-identifier", "identifier");
+    expect(customLists).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(customLists).toHaveAttribute("data-has-store", "true");
+  });
+});