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

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