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

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

@@ -0,0 +1,275 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+import {
+  PER_LIBRARY_SUPPRESS_REL,
+  PER_LIBRARY_UNSUPPRESS_REL,
+} from "../../../src/features/book/bookEditorSlice";
+
+// BookEditForm is a heavy child; the legacy enzyme tests only shallow-rendered
+// it and asserted the props it received. Mock it to a marker that surfaces those
+// props as data attributes so the same facts can be asserted against real DOM.
+jest.mock("../../../src/components/BookEditForm", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-edit-form"
+      data-title={props.title}
+      data-roles={JSON.stringify(props.roles ?? null)}
+      data-media={JSON.stringify(props.media ?? null)}
+      data-languages={JSON.stringify(props.languages ?? null)}
+    />
+  ),
+}));
+
+import BookDetailsEditor, {
+  BookDetailsEditor as UnconnectedBookDetailsEditor,
+} from "../../../src/components/BookDetailsEditor";
+
+// The connected component derives bookData from OPDS parsing of a fetch, which is
+// impractical to synthesize; render the unconnected class with injected props for
+// the render-behavior tests (as the legacy enzyme tests did), and cover the
+// connect wiring with the dedicated connected test below.
+const renderEditor = (overrides: Record<string, unknown> = {}) => {
+  const props = {
+    bookUrl: "url",
+    csrfToken: "token",
+    canSuppress: true,
+    bookAdminUrl: "admin url",
+    bookData: undefined,
+    roles: undefined,
+    media: undefined,
+    languages: undefined,
+    isFetching: false,
+    fetchError: undefined,
+    editError: undefined,
+    refreshCatalog: jest.fn().mockResolvedValue(undefined),
+    fetchBookData: jest.fn(),
+    fetchRoles: jest.fn(),
+    fetchMedia: jest.fn(),
+    fetchLanguages: jest.fn(),
+    postBookData: jest.fn(),
+    suppressBook: jest.fn(),
+    unsuppressBook: jest.fn(),
+    ...overrides,
+  };
+  const result = render(<UnconnectedBookDetailsEditor {...(props as any)} />);
+  return { props, ...result };
+};
+
+describe("BookDetailsEditor", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("loads admin book url, roles, languages, and media on mount", () => {
+    const { props } = renderEditor({ bookUrl: "works/1234" });
+
+    expect(props.fetchBookData).toHaveBeenCalledTimes(1);
+    expect(props.fetchBookData).toHaveBeenCalledWith("admin/works/1234");
+    expect(props.fetchRoles).toHaveBeenCalledTimes(1);
+    expect(props.fetchMedia).toHaveBeenCalledTimes(1);
+    expect(props.fetchLanguages).toHaveBeenCalledTimes(1);
+  });
+
+  it("loads admin book url when given a new book url", () => {
+    const { props, rerender } = renderEditor({ bookUrl: "works/1234" });
+    rerender(
+      <UnconnectedBookDetailsEditor {...(props as any)} bookUrl="works/5555" />
+    );
+
+    expect(props.fetchBookData).toHaveBeenCalledTimes(2);
+    expect((props.fetchBookData as jest.Mock).mock.calls[1][0]).toBe(
+      "admin/works/5555"
+    );
+  });
+
+  it("shows the title", () => {
+    renderEditor({ bookData: { id: "id", title: "title" } });
+    expect(
+      screen.getByRole("heading", { level: 2, name: "title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a Hide button for a per-library suppress link", () => {
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        suppressPerLibraryLink: { href: "href", rel: PER_LIBRARY_SUPPRESS_REL },
+      },
+    });
+    expect(screen.getByRole("button", { name: "Hide" })).toBeInTheDocument();
+  });
+
+  it("shows a Restore button in the visibility banner for a per-library unsuppress link", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        unsuppressPerLibraryLink: {
+          href: "href",
+          rel: PER_LIBRARY_UNSUPPRESS_REL,
+        },
+        visibilityStatus: "manually-suppressed",
+      },
+    });
+    expect(container.querySelector(".visibility-status")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Restore" })).toBeInTheDocument();
+  });
+
+  it("shows the restore banner when an unsuppress link exists without a visibilityStatus", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        unsuppressPerLibraryLink: {
+          href: "href",
+          rel: PER_LIBRARY_UNSUPPRESS_REL,
+        },
+      },
+    });
+    expect(
+      container.querySelector(".visibility-status-manually-suppressed")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Restore" })).toBeInTheDocument();
+  });
+
+  it("shows the manually-suppressed banner without a restore button when there is no unsuppress link", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        visibilityStatus: "manually-suppressed",
+      },
+    });
+    const banner = container.querySelector(
+      ".visibility-status-manually-suppressed"
+    );
+    expect(banner).toBeInTheDocument();
+    expect(banner.textContent).toContain(
+      "manually hidden by a library staff member"
+    );
+    expect(
+      screen.queryByRole("button", { name: "Restore" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the policy-filtered banner without a restore button", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        visibilityStatus: "policy-filtered",
+      },
+    });
+    const banner = container.querySelector(
+      ".visibility-status-policy-filtered"
+    );
+    expect(banner).toBeInTheDocument();
+    expect(banner.textContent).toContain("library content filtering");
+    expect(
+      screen.queryByRole("button", { name: "Restore" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows a Refresh Metadata button for a refresh link", () => {
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        refreshLink: {
+          href: "href",
+          rel: "http://librarysimplified/terms/rel/refresh",
+        },
+      },
+    });
+    expect(
+      screen.getByRole("button", { name: "Refresh Metadata" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a fetch error message and no edit form", () => {
+    renderEditor({
+      bookData: { id: "id", title: "title" },
+      fetchError: { status: 500, response: "response", url: "" },
+    });
+    expect(screen.getByText(/Error: response/)).toBeInTheDocument();
+    expect(screen.queryByTestId("book-edit-form")).not.toBeInTheDocument();
+  });
+
+  it("shows an edit error message together with the edit form", () => {
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        editLink: {
+          href: "href",
+          rel: "http://librarysimplified.org/terms/rel/edit",
+        },
+      },
+      editError: { status: 500, response: "response", url: "" },
+    });
+    expect(screen.getByTestId("book-edit-form")).toBeInTheDocument();
+    expect(screen.getByText(/Error: response/)).toBeInTheDocument();
+  });
+
+  it("shows the book edit form with roles, media, and languages", () => {
+    const roles = { aut: "Author", nar: "Narrator" };
+    const media = {
+      "http://schema.org/AudioObject": "Audio",
+      "http://schema.org/Book": "Book",
+    };
+    const languages = { eng: ["English"], spa: ["Spanish", "Castilian"] };
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        editLink: {
+          href: "href",
+          rel: "http://librarysimplified.org/terms/rel/edit",
+        },
+      },
+      roles,
+      media,
+      languages,
+    });
+
+    const form = screen.getByTestId("book-edit-form");
+    expect(form).toHaveAttribute("data-title", "title");
+    expect(JSON.parse(form.getAttribute("data-roles"))).toStrictEqual(roles);
+    expect(JSON.parse(form.getAttribute("data-media"))).toStrictEqual(media);
+    expect(JSON.parse(form.getAttribute("data-languages"))).toStrictEqual(
+      languages
+    );
+  });
+
+  it("wires up the connected default export (mapStateToProps / mapDispatchToProps)", async () => {
+    // Stub fetch so mounting the connected panel does not hit the network. The
+    // roles/media/languages endpoints return JSON; the book endpoint returns a
+    // non-OPDS body so getBookData rejects (handled) and surfaces a fetch error.
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => new Response("{}", { status: 200 }));
+
+    const store = buildStore();
+    renderWithProviders(
+      <BookDetailsEditor
+        store={store}
+        bookUrl="works/1234"
+        csrfToken="token"
+        canSuppress={true}
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+      />,
+      { reduxProviderProps: { store } }
+    );
+
+    // getBookData's OPDS parse fails on the non-OPDS body, so mapStateToProps
+    // feeds the resulting fetch error back in and the panel renders an error.
+    expect(
+      await screen.findByText(/Failed to parse OPDS data/)
+    ).toBeInTheDocument();
+  });
+});

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