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

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

@@ -0,0 +1,237 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { Provider } from "react-redux";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+import { getBookData } from "../../../src/features/book/bookEditorSlice";
+
+// Each tab panel is a connected component that fetches over the network on mount.
+// This container's behavior is the tab SET, tab SWITCHING, and clearing book data,
+// not the panels' internals, so mock each panel to a marker echoing the props the
+// container is responsible for threading into it.
+jest.mock("../../../src/components/BookDetailsEditor", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-details-editor"
+      data-csrf-token={props.csrfToken}
+      data-book-url={props.bookUrl}
+    />
+  ),
+}));
+jest.mock("../../../src/components/Classifications", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="classifications" data-book-url={props.bookUrl} />
+  ),
+}));
+jest.mock("../../../src/components/CustomListsForBook", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists-for-book"
+      data-book-url={props.bookUrl}
+      data-library={props.library}
+    />
+  ),
+}));
+jest.mock("../../../src/components/BookCoverEditor", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="book-cover-editor" data-book-url={props.bookUrl} />
+  ),
+}));
+
+import BookDetailsTabContainerConnected, {
+  BookDetailsTabContainer,
+} from "../../../src/components/BookDetailsTabContainer";
+
+// The container reads `router` and `pathFor` from the legacy React context the
+// app supplies in production. Wrap it in a small provider that hands it those.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    router: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const TEST_BOOK_URL = "book url";
+const TEST_COLLECTION_URL = "collection url";
+
+describe("BookDetailsTabContainer", () => {
+  const pathFor = (collectionUrl: string, bookUrl: string, tab?: string) =>
+    `${collectionUrl}::${bookUrl}::${tab}`;
+
+  type Overrides = {
+    bookData?: any;
+    bookUrl?: string;
+    clearBook?: jest.Mock;
+    push?: jest.Mock;
+  };
+
+  const renderContainer = (overrides: Overrides = {}) => {
+    const push = overrides.push || jest.fn();
+    const clearBook = overrides.clearBook || jest.fn();
+    const context = { router: { push }, pathFor };
+    // One store for the lifetime of the render: a fresh one per element() call
+    // would hand the panels a new store identity on every rerender.
+    const store = buildStore();
+    const element = (bookUrl: string, bookData: any) => (
+      <LegacyContextProvider context={context}>
+        <BookDetailsTabContainer
+          bookUrl={bookUrl}
+          collectionUrl={TEST_COLLECTION_URL}
+          csrfToken="token"
+          refreshCatalog={jest.fn()}
+          store={store}
+          library={() => "library"}
+          canSuppress={true}
+          complaintsCount={0}
+          bookData={bookData}
+          clearBook={clearBook}
+          tab={null}
+        >
+          <div className="bookDetails">Moby Dick</div>
+        </BookDetailsTabContainer>
+      </LegacyContextProvider>
+    );
+    const result = render(
+      element(overrides.bookUrl ?? TEST_BOOK_URL, overrides.bookData ?? null)
+    );
+    const rerenderWith = (bookUrl: string, bookData: any = null) =>
+      result.rerender(element(bookUrl, bookData));
+    return { ...result, push, clearBook, rerenderWith };
+  };
+
+  it("shows book details", () => {
+    renderContainer();
+    expect(screen.getByText("Moby Dick")).toBeInTheDocument();
+  });
+
+  it("shows details, edit, and classifications tabs", () => {
+    renderContainer();
+    for (const name of ["Details", "Edit", "Classifications"]) {
+      expect(screen.getByRole("link", { name })).toBeInTheDocument();
+    }
+  });
+
+  it("only shows cover tab when the book data has a change cover link", () => {
+    const { rerenderWith } = renderContainer();
+    expect(
+      screen.queryByRole("link", { name: "Cover" })
+    ).not.toBeInTheDocument();
+
+    rerenderWith(TEST_BOOK_URL, {
+      title: "title",
+      changeCoverLink: {
+        href: "/change-cover",
+        rel: "http://librarysimplified.org/terms/rel/change_cover",
+      },
+    });
+    expect(screen.getByRole("link", { name: "Cover" })).toBeInTheDocument();
+  });
+
+  it("shows editor", () => {
+    renderContainer();
+    const editor = screen.getByTestId("book-details-editor");
+    expect(editor).toHaveAttribute("data-csrf-token", "token");
+    expect(editor).toHaveAttribute("data-book-url", TEST_BOOK_URL);
+  });
+
+  it("shows classifications", () => {
+    renderContainer();
+    expect(screen.getByTestId("classifications")).toHaveAttribute(
+      "data-book-url",
+      TEST_BOOK_URL
+    );
+  });
+
+  it("shows lists", () => {
+    renderContainer();
+    const lists = screen.getByTestId("custom-lists-for-book");
+    expect(lists).toHaveAttribute("data-book-url", TEST_BOOK_URL);
+    expect(lists).toHaveAttribute("data-library", "library");
+  });
+
+  it("uses router to navigate when tab is clicked", async () => {
+    const { push } = renderContainer();
+    await userEvent.click(screen.getByRole("link", { name: "Edit" }));
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledWith(
+      pathFor(TEST_COLLECTION_URL, TEST_BOOK_URL, "edit")
+    );
+  });
+
+  it("clears book data when receiving new book url", () => {
+    const clearBook = jest.fn();
+    const { rerenderWith } = renderContainer({ clearBook });
+    rerenderWith("new book url");
+    expect(clearBook).toHaveBeenCalledTimes(1);
+  });
+
+  it("clears book data on unmount", () => {
+    const clearBook = jest.fn();
+    const { unmount } = renderContainer({ clearBook });
+    unmount();
+    expect(clearBook).toHaveBeenCalledTimes(1);
+  });
+
+  // Render the CONNECTED default export so mapStateToProps / mapDispatchToProps
+  // (which run only when the connected component mounts) are exercised.
+  const renderConnected = (store = buildStore()) =>
+    render(
+      <Provider store={store}>
+        <LegacyContextProvider
+          context={{ router: { push: jest.fn() }, pathFor }}
+        >
+          <BookDetailsTabContainerConnected
+            bookUrl={TEST_BOOK_URL}
+            collectionUrl={TEST_COLLECTION_URL}
+            csrfToken="token"
+            refreshCatalog={jest.fn()}
+            library={() => "library"}
+            canSuppress={true}
+            tab={null}
+          >
+            <div className="bookDetails">Moby Dick</div>
+          </BookDetailsTabContainerConnected>
+        </LegacyContextProvider>
+      </Provider>
+    );
+
+  it("wires up store and dispatch when connected", () => {
+    renderConnected();
+    expect(screen.getByRole("link", { name: "Details" })).toBeInTheDocument();
+    expect(screen.getByText("Moby Dick")).toBeInTheDocument();
+  });
+
+  it("takes book data from the store when connected", () => {
+    const store = buildStore();
+    store.dispatch(
+      getBookData.fulfilled(
+        {
+          title: "title",
+          changeCoverLink: {
+            href: "/change-cover",
+            rel: "http://librarysimplified.org/terms/rel/change_cover",
+          },
+        } as any,
+        "request-id",
+        { url: TEST_BOOK_URL } as any
+      )
+    );
+    renderConnected(store);
+    // The cover tab appears only when bookData carries a changeCoverLink, so it
+    // is the observable proof that mapStateToProps threaded the store's book
+    // data into the container.
+    expect(screen.getByRole("link", { name: "Cover" })).toBeInTheDocument();
+  });
+});