@thepalaceproject/circulation-admin 1.43.0-post.9 → 1.44.0-post.10

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

@@ -0,0 +1,352 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import BookEditForm from "../../../src/components/BookEditForm";
+import {
+  BookData,
+  RolesData,
+  MediaData,
+  LanguagesData,
+} from "../../../src/interfaces";
+installFormDataShim();
+
+describe("BookEditForm", () => {
+  const roles: RolesData = {
+    aut: "Author",
+    nar: "Narrator",
+  };
+
+  const media: MediaData = {
+    "http://schema.org/AudioObject": "Audio",
+    "http://schema.org/Book": "Book",
+  };
+
+  const languages: LanguagesData = {
+    eng: ["English"],
+    spa: ["Spanish", "Castilian"],
+  };
+
+  const bookData: BookData = {
+    id: "id",
+    title: "title",
+    subtitle: "subtitle",
+    authors: [{ name: "An Author", role: "aut" }],
+    contributors: [
+      { name: "A Narrator", role: "nar" },
+      { name: "Another Narrator", role: "nar" },
+    ],
+    fiction: true,
+    audience: "Young Adult",
+    targetAgeRange: ["12", "16"],
+    summary: "summary",
+    series: "series",
+    seriesPosition: 3,
+    medium: "http://schema.org/AudioObject",
+    language: "eng",
+    publisher: "publisher",
+    imprint: "imprint",
+    issued: "2017-04-03",
+    rating: 4,
+    editLink: {
+      href: "href",
+      rel: "edit",
+    },
+  };
+
+  type Props = React.ComponentProps<typeof BookEditForm>;
+
+  const makeProps = (overrides: Partial<Props> = {}): Props => ({
+    ...(bookData as Props),
+    roles,
+    media,
+    languages,
+    disabled: false,
+    refresh: jest.fn(),
+    editBook: jest.fn().mockResolvedValue(undefined),
+    ...overrides,
+  });
+
+  const renderForm = (overrides: Partial<Props> = {}) => {
+    const props = makeProps(overrides);
+    const result = render(<BookEditForm {...props} />);
+    const rerender = (nextOverrides: Partial<Props>) =>
+      result.rerender(<BookEditForm {...makeProps(nextOverrides)} />);
+    return { ...result, rerender, props };
+  };
+
+  const inputsByName = (container: HTMLElement, name: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLInputElement>(`input[name="${name}"]`)
+    );
+  const selectsByName = (container: HTMLElement, name: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLSelectElement>(`select[name="${name}"]`)
+    );
+
+  describe("rendering", () => {
+    it("shows editable input with title", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(container.querySelector('input[name="title"]')).toHaveValue(
+        "title"
+      );
+    });
+
+    it("shows editable input with subtitle", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Subtitle")).toBeInTheDocument();
+      expect(container.querySelector('input[name="subtitle"]')).toHaveValue(
+        "subtitle"
+      );
+    });
+
+    it("shows authors and contributors", () => {
+      const { container } = renderForm();
+
+      const names = inputsByName(container, "contributor-name");
+      const contributorRoles = selectsByName(container, "contributor-role");
+      expect(names).toHaveLength(4);
+      expect(contributorRoles).toHaveLength(4);
+
+      expect(names[0]).toHaveValue("An Author");
+      expect(contributorRoles[0]).toHaveValue("Author");
+      expect(names[1]).toHaveValue("A Narrator");
+      expect(contributorRoles[1]).toHaveValue("Narrator");
+      expect(names[2]).toHaveValue("Another Narrator");
+      expect(contributorRoles[2]).toHaveValue("Narrator");
+
+      // The last inputs are for adding a new contributor.
+      expect(names[3]).toHaveValue("");
+      expect(contributorRoles[3]).toHaveValue("Author");
+      expect(
+        container.querySelector("button.add-contributor")
+      ).toBeInTheDocument();
+
+      // Existing authors and contributors are removable.
+      expect(
+        container.querySelectorAll(".with-remove-button .remove-btn")
+      ).toHaveLength(3);
+
+      // All role inputs have the same options.
+      [contributorRoles[1], contributorRoles[3]].forEach((select) => {
+        const options = within(select).getAllByRole("option");
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveValue("Author");
+        expect(options[1]).toHaveValue("Narrator");
+      });
+    });
+
+    it("shows editable input with series", () => {
+      const { container } = renderForm();
+      expect(container.querySelector('input[name="series"]')).toHaveValue(
+        "series"
+      );
+    });
+
+    it("shows editable input with series position", () => {
+      const { container } = renderForm();
+      expect(
+        container.querySelector('input[name="series_position"]')
+      ).toHaveValue("3");
+    });
+
+    it("shows editable input with medium", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Medium")).toBeInTheDocument();
+      expect(container.querySelector('select[name="medium"]')).toHaveValue(
+        "Audio"
+      );
+    });
+
+    it("shows a language field", () => {
+      const { container, rerender } = renderForm();
+      expect(screen.getByText("Language")).toBeInTheDocument();
+      expect(container.querySelector('input[name="language"]')).toHaveValue(
+        "English"
+      );
+
+      rerender({ language: "fre" });
+      expect(container.querySelector('input[name="language"]')).toHaveValue(
+        "fre"
+      );
+    });
+
+    it("shows editable input with publisher", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Publisher")).toBeInTheDocument();
+      expect(container.querySelector('input[name="publisher"]')).toHaveValue(
+        "publisher"
+      );
+    });
+
+    it("shows editable input with imprint", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Imprint")).toBeInTheDocument();
+      expect(container.querySelector('input[name="imprint"]')).toHaveValue(
+        "imprint"
+      );
+    });
+
+    it("shows editable input with publication date", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Publication Date")).toBeInTheDocument();
+      expect(container.querySelector('input[name="issued"]')).toHaveValue(
+        "2017-04-03"
+      );
+    });
+
+    it("shows editable input with rating", () => {
+      const { container } = renderForm();
+      expect(screen.getByText(/Rating/)).toBeInTheDocument();
+      const rating = container.querySelector<HTMLInputElement>(
+        'input[name="rating"]'
+      );
+      expect(rating).toHaveValue(4);
+    });
+
+    it("shows editable textarea with summary", () => {
+      const { container } = renderForm();
+      const editor = container.querySelector<HTMLElement>(".editor");
+      expect(within(editor).getByText("Summary")).toBeInTheDocument();
+      expect(editor.querySelector(".DraftEditor-root")).toHaveTextContent(
+        "summary"
+      );
+    });
+  });
+
+  it("removes a contributor", async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    let removeButtons = screen.getAllByRole("button", { name: "Delete" });
+    expect(removeButtons).toHaveLength(3);
+
+    // Remove the first narrator (index 1: An Author, A Narrator, Another Narrator).
+    await user.click(removeButtons[1]);
+
+    removeButtons = screen.getAllByRole("button", { name: "Delete" });
+    expect(removeButtons).toHaveLength(2);
+
+    const names = inputsByName(container, "contributor-name");
+    const contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(3);
+    expect(contributorRoles).toHaveLength(3);
+    expect(names[0]).toHaveValue("An Author");
+    expect(contributorRoles[0]).toHaveValue("Author");
+    expect(names[1]).toHaveValue("Another Narrator");
+    expect(contributorRoles[1]).toHaveValue("Narrator");
+    expect(names[2]).toHaveValue("");
+    expect(contributorRoles[2]).toHaveValue("Author");
+  });
+
+  it("adds a contributor", async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    let names = inputsByName(container, "contributor-name");
+    let contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(4);
+    expect(contributorRoles).toHaveLength(4);
+
+    // Fill in the empty "add" name field (the last one); its role defaults to
+    // Author. Typing enables the Add button.
+    await user.type(names[3], "New Author");
+    await user.click(container.querySelector("button.add-contributor"));
+
+    names = inputsByName(container, "contributor-name");
+    contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(5);
+    expect(contributorRoles).toHaveLength(5);
+
+    expect(names[0]).toHaveValue("An Author");
+    expect(contributorRoles[0]).toHaveValue("Author");
+    expect(names[1]).toHaveValue("A Narrator");
+    expect(contributorRoles[1]).toHaveValue("Narrator");
+    expect(names[2]).toHaveValue("Another Narrator");
+    expect(contributorRoles[2]).toHaveValue("Narrator");
+    expect(names[3]).toHaveValue("New Author");
+    expect(contributorRoles[3]).toHaveValue("Author");
+    expect(names[4]).toHaveValue("");
+    expect(contributorRoles[4]).toHaveValue("Author");
+  });
+
+  it("calls editBook on submit", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    renderForm({ editBook });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(editBook).toHaveBeenCalledTimes(1);
+    const [url, data] = editBook.mock.calls[0];
+    expect(url).toBe("href");
+    expect(data.get("title")).toBe(bookData.title);
+    expect(data.get("subtitle")).toBe(bookData.subtitle);
+
+    // The last contributor field is the empty one for adding a new contributor.
+    // If the user had filled it in without clicking "Add", it would still be
+    // submitted.
+    expect(data.getAll("contributor-name")).toStrictEqual([
+      "An Author",
+      "A Narrator",
+      "Another Narrator",
+      "",
+    ]);
+    expect(data.getAll("contributor-role")).toStrictEqual([
+      "Author",
+      "Narrator",
+      "Narrator",
+      "Author",
+    ]);
+
+    expect(data.get("series")).toBe(bookData.series);
+    expect(data.get("series_position")).toBe(String(bookData.seriesPosition));
+    expect(data.get("medium")).toBe("Audio");
+    expect(data.get("language")).toBe("English");
+    expect(data.get("publisher")).toBe(bookData.publisher);
+    expect(data.get("imprint")).toBe(bookData.imprint);
+    expect(data.get("issued")).toBe(bookData.issued);
+    expect(data.get("rating")).toBe("4");
+    expect(data.get("summary")).toContain(bookData.summary);
+  });
+
+  it("refreshes book after editing", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    const refresh = jest.fn().mockResolvedValue(undefined);
+    renderForm({ editBook, refresh });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
+  });
+
+  it("only adds updated summary content if it's not empty", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    const refresh = jest.fn().mockResolvedValue(undefined);
+    // Since we are adding an empty string, there should be no `summary` value
+    // in the FormData object that gets passed to the `editBook` function.
+    renderForm({
+      editBook,
+      refresh,
+      summary: "<p></p>",
+      editLink: { href: "test-url", rel: "something" },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(editBook).toHaveBeenCalledTimes(1));
+    expect(editBook.mock.calls[0][1].get("summary")).toBeNull();
+  });
+
+  it("disables all inputs", () => {
+    const { container } = renderForm({ disabled: true });
+
+    container
+      .querySelectorAll("input, select")
+      .forEach((input) => expect(input).toBeDisabled());
+  });
+});

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

@@ -7,7 +7,6 @@ import {
   PER_LIBRARY_UNSUPPRESS_REL,
 } from "../../../src/features/book/bookEditorSlice";
 import { BookDetailsEditor } from "../../../src/components/BookDetailsEditor";
-import { expect } from "chai";
 import { store } from "../../../src/store";
 import * as fetchMock from "fetch-mock-jest";
 
@@ -93,8 +92,8 @@ describe("BookDetails", () => {
     const hideButton = queryByRole("button", { name: "Hide" });
     const restoreButton = queryByRole("button", { name: "Restore" });
 
-    expect(hideButton).to.be.null;
-    expect(restoreButton).to.be.null;
+    expect(hideButton).toBeNull();
+    expect(restoreButton).toBeNull();
   });
 
   it("don't show restore button if not a library's admin", () => {
@@ -110,8 +109,8 @@ describe("BookDetails", () => {
     const hideButton = queryByRole("button", { name: "Hide" });
     const restoreButton = queryByRole("button", { name: "Restore" });
 
-    expect(hideButton).to.be.null;
-    expect(restoreButton).to.be.null;
+    expect(hideButton).toBeNull();
+    expect(restoreButton).toBeNull();
   });
 
   it("uses modal for suppress book confirmation", async () => {
@@ -149,8 +148,8 @@ describe("BookDetails", () => {
     await user.click(cancelButton);
     confirmButton = queryByRole("button", { name: "Suppress Availability" });
     cancelButton = queryByRole("button", { name: "Cancel" });
-    expect(confirmButton).to.be.null;
-    expect(cancelButton).to.be.null;
+    expect(confirmButton).toBeNull();
+    expect(cancelButton).toBeNull();
 
     // Clicking `Hide` again should show the modal again.
     await user.click(hideButton);
@@ -163,15 +162,15 @@ describe("BookDetails", () => {
     getByRole("button", { name: "Dismiss" });
 
     // Check that the API was invoked.
-    expect(suppressBook.mock.calls.length).to.equal(1);
-    expect(suppressBook.mock.calls[0][0]).to.equal("/suppress/href");
+    expect(suppressBook.mock.calls.length).toBe(1);
+    expect(suppressBook.mock.calls[0][0]).toBe("/suppress/href");
     const fetchCalls = fetchMock.calls();
-    expect(fetchCalls.length).to.equal(1);
+    expect(fetchCalls.length).toBe(1);
     const fetchCall = fetchCalls[0];
     const fetchOptions = fetchCalls[0][1];
-    expect(fetchCall[0]).to.equal("/suppress/href");
-    expect(fetchOptions["headers"]["X-CSRF-Token"]).to.contain("token");
-    expect(fetchOptions["method"]).to.equal("POST");
+    expect(fetchCall[0]).toBe("/suppress/href");
+    expect(fetchOptions["headers"]["X-CSRF-Token"]).toContain("token");
+    expect(fetchOptions["method"]).toBe("POST");
   });
   it("uses modal for unsuppress book confirmation", async () => {
     // Configure standard constructors so that RTK Query works in tests with FetchMockJest
@@ -213,8 +212,8 @@ describe("BookDetails", () => {
     await user.click(cancelButton);
     confirmButton = queryByRole("button", { name: "Restore Availability" });
     cancelButton = queryByRole("button", { name: "Cancel" });
-    expect(confirmButton).to.be.null;
-    expect(cancelButton).to.be.null;
+    expect(confirmButton).toBeNull();
+    expect(cancelButton).toBeNull();
 
     // Clicking `Restore` again should show the modal again.
     await user.click(restoreButton);
@@ -227,14 +226,14 @@ describe("BookDetails", () => {
     getByRole("button", { name: "Dismiss" });
 
     // Check that the API was invoked.
-    expect(unsuppressBook.mock.calls.length).to.equal(1);
-    expect(unsuppressBook.mock.calls[0][0]).to.equal("/unsuppress/href");
+    expect(unsuppressBook.mock.calls.length).toBe(1);
+    expect(unsuppressBook.mock.calls[0][0]).toBe("/unsuppress/href");
     const fetchCalls = fetchMock.calls();
-    expect(fetchCalls.length).to.equal(1);
+    expect(fetchCalls.length).toBe(1);
     const fetchCall = fetchCalls[0];
     const fetchOptions = fetchCalls[0][1];
-    expect(fetchCall[0]).to.equal("/unsuppress/href");
-    expect(fetchOptions["headers"]["X-CSRF-Token"]).to.contain("token");
-    expect(fetchOptions["method"]).to.equal("DELETE");
+    expect(fetchCall[0]).toBe("/unsuppress/href");
+    expect(fetchOptions["headers"]["X-CSRF-Token"]).toContain("token");
+    expect(fetchOptions["method"]).toBe("DELETE");
   });
 });

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

@@ -0,0 +1,158 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import title from "../../../src/utils/title";
+
+// CatalogPage does `require("@thepalaceproject/web-opds-client")` and mounts the OPDS
+// Web Client, a heavy third-party render target that fetches on mount. Replace it
+// with a marker that echoes the props CatalogPage hands it and the legacy
+// `tab`/`library` child context CatalogPage supplies (read via `contextTypes`), so
+// we can assert the wiring without the real catalog.
+jest.mock("@thepalaceproject/web-opds-client", () => {
+  const React = require("react");
+  const PropTypes = require("prop-types");
+  const OPDSCatalogMock = (props, context) => (
+    <div
+      data-testid="opds-catalog"
+      data-collection-url={props.collectionUrl}
+      data-book-url={props.bookUrl}
+      data-tab={context.tab}
+      data-library={context.library && context.library()}
+      data-header-name={props.Header && props.Header.name}
+      data-book-details-container-name={
+        props.BookDetailsContainer && props.BookDetailsContainer.name
+      }
+      data-has-compute-breadcrumbs={String(!!props.computeBreadcrumbs)}
+      data-title-book={
+        props.pageTitleTemplate && props.pageTitleTemplate("Collection", "Book")
+      }
+      data-title-collection={
+        props.pageTitleTemplate && props.pageTitleTemplate("Collection", null)
+      }
+    />
+  );
+  OPDSCatalogMock.contextTypes = {
+    tab: PropTypes.string,
+    library: PropTypes.func,
+  };
+  return OPDSCatalogMock;
+});
+
+// When there is no library, CatalogPage renders WelcomePage, which mounts the real
+// Header — that needs react-router v3 context and fetches on mount. Mock Header to a
+// marker so the WelcomePage path stays self-contained.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: function Header() {
+    return <div data-testid="header" />;
+  },
+}));
+
+import CatalogPage from "../../../src/components/CatalogPage";
+import Header from "../../../src/components/Header";
+import BookDetailsContainer from "../../../src/components/BookDetailsContainer";
+
+// The unit env has no `global.jsdom`, so compute the expected URLs from the real
+// origin.
+const origin = window.location.origin;
+
+describe("CatalogPage", () => {
+  const baseParams = {
+    collectionUrl: "library/collectionurl",
+    bookUrl: "library/bookurl",
+    tab: "tab",
+  };
+
+  it("renders the OPDS catalog with expanded collection and book URLs", () => {
+    renderWithProviders(<CatalogPage params={baseParams} />);
+
+    const catalog = screen.getByTestId("opds-catalog");
+    expect(catalog).toHaveAttribute(
+      "data-collection-url",
+      `${origin}/library/collectionurl`
+    );
+    expect(catalog).toHaveAttribute(
+      "data-book-url",
+      `${origin}/library/works/bookurl`
+    );
+  });
+
+  it("forwards the admin header, book details container, breadcrumbs, and page-title template", () => {
+    renderWithProviders(<CatalogPage params={baseParams} />);
+
+    const catalog = screen.getByTestId("opds-catalog");
+    expect(catalog).toHaveAttribute("data-header-name", Header.name);
+    expect(catalog).toHaveAttribute(
+      "data-book-details-container-name",
+      BookDetailsContainer.name
+    );
+    expect(catalog).toHaveAttribute("data-has-compute-breadcrumbs", "true");
+    // pageTitleTemplate prefers the book title over the collection title.
+    expect(catalog).toHaveAttribute("data-title-book", title("Book"));
+    expect(catalog).toHaveAttribute(
+      "data-title-collection",
+      title("Collection")
+    );
+  });
+
+  it("expands a collection URL that already contains a query string", () => {
+    renderWithProviders(
+      <CatalogPage
+        params={{
+          ...baseParams,
+          collectionUrl: "library/collectionurl?samplequery=test",
+        }}
+      />
+    );
+
+    expect(screen.getByTestId("opds-catalog")).toHaveAttribute(
+      "data-collection-url",
+      `${origin}/library/collectionurl?samplequery=test`
+    );
+  });
+
+  it("puts the tab into the child context", () => {
+    renderWithProviders(<CatalogPage params={baseParams} />);
+    expect(screen.getByTestId("opds-catalog")).toHaveAttribute(
+      "data-tab",
+      "tab"
+    );
+  });
+
+  it("derives the child-context library from the collection URL", () => {
+    renderWithProviders(<CatalogPage params={baseParams} />);
+    expect(screen.getByTestId("opds-catalog")).toHaveAttribute(
+      "data-library",
+      "library"
+    );
+  });
+
+  it("derives the child-context library from the book URL when there is no collection URL", () => {
+    renderWithProviders(
+      <CatalogPage params={{ ...baseParams, collectionUrl: null }} />
+    );
+    expect(screen.getByTestId("opds-catalog")).toHaveAttribute(
+      "data-library",
+      "library"
+    );
+  });
+
+  it("renders the welcome page when there is no library", () => {
+    renderWithProviders(
+      <CatalogPage params={{ collectionUrl: null, bookUrl: null, tab: null }} />
+    );
+
+    expect(screen.queryByTestId("opds-catalog")).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/Welcome to the Circulation Admin Interface!/)
+    ).toBeInTheDocument();
+  });
+
+  it("renders the footer", () => {
+    const { container } = renderWithProviders(
+      <CatalogPage params={baseParams} />
+    );
+    expect(container.querySelector("footer")).toBeInTheDocument();
+  });
+});

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

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { screen, within } from "@testing-library/react";
-import { CatalogServices } from "../../../src/components/CatalogServices";
+import CatalogServicesConnected, {
+  CatalogServices,
+} from "../../../src/components/CatalogServices";
 import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 
 describe("CatalogServices", () => {
@@ -61,3 +65,36 @@ describe("CatalogServices", () => {
     );
   });
 });
+
+describe("CatalogServices - connected wiring", () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it("wires mapStateToProps/mapDispatchToProps and renders the fetched list", async () => {
+    jest.spyOn(globalThis, "fetch").mockImplementation(
+      async () =>
+        new Response(
+          JSON.stringify({
+            catalog_services: [
+              { id: 2, protocol: "test protocol", name: "Test Catalog" },
+            ],
+            protocols: [{ name: "test protocol", label: "TP", settings: [] }],
+          }),
+          { status: 200, headers: { "Content-Type": "application/json" } }
+        )
+    );
+    const store = buildStore();
+
+    renderWithProviders(<CatalogServicesConnected csrfToken="token" />, {
+      reduxProviderProps: { store },
+      appConfigSettings: { roles: [{ role: "system" }] },
+    });
+
+    // The edit link only appears once the on-mount fetch resolves and
+    // mapStateToProps feeds the fetched service back in as props.
+    const editLink = await screen.findByRole("link", { name: /edit/i });
+    expect(editLink).toHaveAttribute(
+      "href",
+      "/admin/web/config/catalogServices/edit/2"
+    );
+  });
+});