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

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

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { screen, within } from "@testing-library/react";
+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", () => {
+  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"
+    );
+  });
+});
+
+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"
+    );
+  });
+});

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

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import ConnectedChangePasswordForm, {
+  ChangePasswordForm,
+} from "../../../src/components/ChangePasswordForm";
+// The reusable-components `Form` builds `new FormData(formElement)` on
+// submit, which the unit jsdom env's undici FormData rejects; install the
+// shared shim that reads the form's successful controls.
+installFormDataShim();
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+// Render the unconnected class so tests can pass a `changePassword` spy and
+// drive props directly. A separate test below renders the connected default
+// export to cover the connect wiring (mapStateToProps/mapDispatchToProps).
+const renderUnconnected = (
+  props: Partial<React.ComponentProps<typeof ChangePasswordForm>> = {}
+) =>
+  render(
+    <ChangePasswordForm
+      isFetching={false}
+      csrfToken="token"
+      changePassword={jest.fn().mockResolvedValue(undefined)}
+      {...props}
+    />
+  );
+
+const passwordInput = (container: HTMLElement) =>
+  container.querySelector('input[name="password"]') as HTMLInputElement;
+const confirmInput = (container: HTMLElement) =>
+  container.querySelector('input[name="confirm_password"]') as HTMLInputElement;
+
+describe("ChangePasswordForm", () => {
+  it("shows an error message when there is a fetch error", () => {
+    const { container, rerender } = renderUnconnected();
+    expect(container.querySelector(".alert-danger")).not.toBeInTheDocument();
+
+    rerender(
+      <ChangePasswordForm
+        isFetching={false}
+        csrfToken="token"
+        changePassword={jest.fn()}
+        fetchError={{ status: 500, response: "response", url: "" }}
+      />
+    );
+
+    expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+    expect(screen.getByText("Error: response")).toBeInTheDocument();
+  });
+
+  it("shows a loading indicator while fetching", () => {
+    const { rerender } = renderUnconnected({ isFetching: false });
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+
+    rerender(
+      <ChangePasswordForm
+        isFetching={true}
+        csrfToken="token"
+        changePassword={jest.fn()}
+      />
+    );
+
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+  });
+
+  it("renders the two labeled password inputs", () => {
+    const { container } = renderUnconnected();
+
+    expect(passwordInput(container)).toHaveAttribute("type", "password");
+    expect(confirmInput(container)).toHaveAttribute("type", "password");
+
+    const labels = container.querySelectorAll("label.control-label");
+    expect(labels[0]).toHaveTextContent("New Password");
+    expect(labels[1]).toHaveTextContent("Confirm New Password");
+  });
+
+  it("does not submit a blank form", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    renderUnconnected({ changePassword });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Fields cannot be blank.")).toBeInTheDocument();
+  });
+
+  // Rendered fresh, so the error message asserted below can only have come from
+  // this partial submit rather than lingering from an earlier blank one.
+  it("does not submit a partially blank form", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+    expect(screen.queryByText("Fields cannot be blank.")).toBeNull();
+
+    // Only the first field filled.
+    await user.type(passwordInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Fields cannot be blank.")).toBeInTheDocument();
+  });
+
+  it("does not submit when the passwords do not match", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "somethingElse");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Passwords do not match.")).toBeInTheDocument();
+  });
+
+  it("submits the new password and shows a success message", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).toHaveBeenCalledTimes(1);
+    const submittedData = changePassword.mock.calls[0][0];
+    expect(submittedData.get("password")).toBe("newPassword");
+    expect(submittedData.get("confirm_password")).toBe("newPassword");
+
+    expect(
+      await screen.findByText("Password changed successfully")
+    ).toBeInTheDocument();
+  });
+
+  it("dispatches the password change through the connected store", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = jest
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("ok", { status: 200 }));
+
+    const { container } = renderWithProviders(
+      <ConnectedChangePasswordForm csrfToken="token" />
+    );
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(
+      await screen.findByText("Password changed successfully")
+    ).toBeInTheDocument();
+    expect(fetchSpy).toHaveBeenCalledWith(
+      "/admin/change_password",
+      expect.objectContaining({ method: "POST" })
+    );
+  });
+});

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

@@ -0,0 +1,166 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+import genreData from "../fixtures/genreData";
+import classificationsData from "../fixtures/classificationsData";
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised. The genre tree and classifications are fetched on mount and fed
+// back in through the Redux store; `book` and `refreshCatalog` are own props.
+import Classifications, {
+  Classifications as UnconnectedClassifications,
+} from "../../../src/components/Classifications";
+
+// A `targetAgeRange` is required: ClassificationsForm reads it in bookChanged on
+// re-render (the legacy enzyme test used shallow, so the child never re-rendered).
+const bookData = {
+  title: "title",
+  fiction: true,
+  categories: ["Space Opera"],
+  targetAgeRange: [null, null],
+};
+const bookUrl = "works/1234";
+const classificationsUrl = "admin/works/1234/classifications";
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+// Resolves each fetch with the appropriate body based on the request URL/method.
+const stubFetch = () =>
+  jest
+    .spyOn(globalThis, "fetch")
+    .mockImplementation(async (url, opts?: RequestInit) => {
+      const u = String(url);
+      if (opts?.method === "POST") {
+        return new Response("success", { status: 200 });
+      }
+      if (u === "/admin/genres") {
+        return jsonResponse(genreData);
+      }
+      if (u.endsWith("/classifications")) {
+        return jsonResponse({ classifications: classificationsData });
+      }
+      // getBookData (OPDS) on refresh — non-OPDS body so it settles quietly.
+      return new Response("{}", { status: 200 });
+    });
+
+const renderConnected = (
+  overrides: Partial<{ refreshCatalog: () => Promise<any> }> = {}
+) => {
+  const store = buildStore();
+  const refreshCatalog =
+    overrides.refreshCatalog ?? jest.fn().mockResolvedValue(undefined);
+  const result = renderWithProviders(
+    <Classifications
+      store={store}
+      csrfToken="token"
+      bookUrl={bookUrl}
+      book={bookData as any}
+      refreshCatalog={refreshCatalog}
+    />,
+    { reduxProviderProps: { store } }
+  );
+  return { ...result, refreshCatalog };
+};
+
+describe("Classifications", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the book title", async () => {
+    stubFetch();
+    renderConnected();
+    expect(
+      await screen.findByRole("heading", { level: 2, name: "title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows the updating indicator while fetching", () => {
+    // A never-resolving fetch keeps the panel in its fetching state.
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(() => new Promise(() => {}));
+    const { container } = renderConnected();
+    expect(container.querySelector(".updating-loader")).toBeInTheDocument();
+  });
+
+  it("shows the classifications form and table once the data loads, and hides the updating indicator", async () => {
+    stubFetch();
+    const { container } = renderConnected();
+
+    // The form renders once the genre tree loads.
+    expect(
+      await screen.findByRole("button", { name: "Save" })
+    ).toBeInTheDocument();
+    // The table renders once the classifications load.
+    expect(
+      screen.getByRole("heading", { name: "Related Classifications" })
+    ).toBeInTheDocument();
+    // A sample classification from the fixture shows in the table.
+    expect(screen.getByText("FICTION / Ghost")).toBeInTheDocument();
+    // Fetching is done, so the updating indicator is gone.
+    expect(container.querySelector(".updating-loader")).not.toBeInTheDocument();
+  });
+
+  it("shows a fetch error", () => {
+    // A network failure on mount would reject the (uncaught) fetch promise and
+    // crash the worker, so drive the error through the prop that connect derives.
+    render(
+      <UnconnectedClassifications
+        store={buildStore() as any}
+        csrfToken="token"
+        bookUrl={bookUrl}
+        book={bookData as any}
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        bookAdminUrl="book admin url"
+        fetchError={{ status: 500, url: "url", response: "response" } as any}
+        fetchGenreTree={jest.fn()}
+        fetchClassifications={jest.fn()}
+        fetchBook={jest.fn()}
+        editClassifications={jest.fn().mockResolvedValue(undefined)}
+        genreTree={null}
+        classifications={null}
+        isFetching={false}
+      />
+    );
+    expect(screen.getByText(/Error: response/)).toBeInTheDocument();
+  });
+
+  it("fetches the genre tree and classifications on mount", async () => {
+    const fetchSpy = stubFetch();
+    renderConnected();
+    await screen.findByRole("button", { name: "Save" });
+
+    const urls = fetchSpy.mock.calls.map(([u]) => String(u));
+    expect(urls).toContain("/admin/genres");
+    expect(urls).toContain(classificationsUrl);
+  });
+
+  it("refreshes the book, classifications, and catalog after editing classifications", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch();
+    const { container, refreshCatalog } = renderConnected();
+
+    await screen.findByRole("button", { name: "Save" });
+
+    // The form requires an audience selection before it will submit.
+    await user.selectOptions(
+      container.querySelector('select[name="audience"]') as HTMLSelectElement,
+      "Adult"
+    );
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    // Editing POSTs the edit_classifications URL, then refreshes the catalog.
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalledTimes(1));
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/1234/edit_classifications");
+  });
+});