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

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

@@ -0,0 +1,259 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ConnectedComplaints, {
+  Complaints,
+} from "../../../src/components/Complaints";
+import { renderWithProviders } from "../testUtils/withProviders";
+
+const bookData = {
+  id: "id",
+  title: "test title",
+  issuesLink: {
+    href: "issues url",
+    rel: "issues",
+  },
+};
+
+const complaintsData = {
+  "http://librarysimplified.org/terms/problem/test-type": 5,
+  "http://librarysimplified.org/terms/problem/other-type": 3,
+  "http://librarysimplified.org/terms/problem/last-type": 1,
+};
+
+// The unconnected `Complaints` takes its data + dispatch functions as props, so
+// a bare `render` (no store) is enough for the rendering/behavior assertions.
+// One separate test below renders the connected default export through the real
+// providers to cover the connect() wiring (mapStateToProps/mapDispatchToProps).
+const renderComplaints = (
+  props: Partial<React.ComponentProps<typeof Complaints>> = {}
+) =>
+  render(
+    <Complaints
+      csrfToken="token"
+      bookUrl="book url"
+      book={bookData}
+      complaints={complaintsData}
+      fetchComplaints={jest.fn()}
+      postComplaint={jest.fn()}
+      refreshCatalog={jest.fn()}
+      {...props}
+    />
+  );
+
+describe("Complaints", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("rendering", () => {
+    it("shows the book title", () => {
+      renderComplaints();
+      expect(
+        screen.getByRole("heading", { name: "test title" })
+      ).toBeInTheDocument();
+    });
+
+    it("shows complaints with their counts", () => {
+      const { container } = renderComplaints();
+      const types = Array.from(
+        container.querySelectorAll(".complaint-type")
+      ).map((el) => el.textContent);
+      const counts = Array.from(
+        container.querySelectorAll(".complaint-count")
+      ).map((el) => parseInt(el.textContent || "", 10));
+      expect(types).toStrictEqual(["Test type", "Other type", "Last type"]);
+      expect(counts).toStrictEqual([5, 3, 1]);
+    });
+
+    it("shows simplified complaint types", () => {
+      const { container } = renderComplaints();
+      const types = Array.from(
+        container.querySelectorAll(".complaint-type")
+      ).map((el) => el.textContent);
+      expect(types).toStrictEqual(["Test type", "Other type", "Last type"]);
+    });
+
+    it("shows an unrecognized complaint type unchanged", () => {
+      // A type that does not match the /terms/problem/ pattern is rendered as-is.
+      const { container } = renderComplaints({
+        complaints: { "custom-complaint": 2 },
+      });
+      const types = Array.from(
+        container.querySelectorAll(".complaint-type")
+      ).map((el) => el.textContent);
+      expect(types).toStrictEqual(["custom-complaint"]);
+    });
+
+    it("shows an enabled resolve button for each complaint type", () => {
+      renderComplaints();
+      const buttons = screen.getAllByRole("button", { name: "Resolve" });
+      expect(buttons).toHaveLength(Object.keys(complaintsData).length);
+      buttons.forEach((button) => expect(button).not.toBeDisabled());
+    });
+
+    it("shows an enabled complaint form when the book has an issues link", () => {
+      const { container } = renderComplaints();
+      // The ComplaintForm is only rendered when `book.issuesLink` exists, so its
+      // presence (with an enabled select) reflects that the form was wired up.
+      expect(screen.getByText("Add Complaint")).toBeInTheDocument();
+      const select = container.querySelector("select") as HTMLSelectElement;
+      expect(select).toBeInTheDocument();
+      expect(select).not.toBeDisabled();
+    });
+
+    it("shows a fetch error and re-fetches when trying again", async () => {
+      const user = userEvent.setup();
+      const fetchComplaints = jest.fn();
+      const fetchError = { status: 401, response: "test", url: "test url" };
+      const { container } = render(
+        <Complaints
+          csrfToken="token"
+          bookUrl="book url"
+          book={{ id: "id", title: "test book" }}
+          fetchError={fetchError}
+          fetchComplaints={fetchComplaints}
+          postComplaint={jest.fn()}
+          refreshCatalog={jest.fn()}
+        />
+      );
+
+      // The error alert is rendered from the fetchError prop.
+      expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+      // fetchComplaints is called once on mount (bookUrl is set).
+      expect(fetchComplaints).toHaveBeenCalledTimes(1);
+
+      await user.click(screen.getByRole("button", { name: "Try again" }));
+
+      expect(fetchComplaints).toHaveBeenCalledTimes(2);
+      expect(fetchComplaints.mock.calls[1][0]).toBe("book url/complaints");
+    });
+  });
+
+  describe("behavior", () => {
+    const singleComplaint = {
+      "http://librarysimplified.org/terms/problem/test-type": 2,
+    };
+    const bookUrl = "http://example.com/works/fakeid";
+
+    it("fetches complaints on mount", () => {
+      const fetchComplaints = jest.fn();
+      render(
+        <Complaints
+          csrfToken="token"
+          book={{ id: "id", title: "test book" }}
+          bookUrl={bookUrl}
+          complaints={singleComplaint}
+          fetchComplaints={fetchComplaints}
+          refreshCatalog={jest.fn()}
+          resolveComplaints={jest.fn().mockResolvedValue(undefined)}
+        />
+      );
+
+      expect(fetchComplaints).toHaveBeenCalledTimes(1);
+      expect(fetchComplaints.mock.calls[0][0]).toBe(
+        "http://example.com/admin/works/fakeid/complaints"
+      );
+    });
+
+    it("resolves a complaint type when its resolve button is clicked", async () => {
+      const user = userEvent.setup();
+      jest.spyOn(window, "confirm").mockReturnValue(true);
+      const resolveComplaints = jest.fn().mockResolvedValue(undefined);
+      render(
+        <Complaints
+          csrfToken="token"
+          book={{ id: "id", title: "test book" }}
+          bookUrl={bookUrl}
+          complaints={singleComplaint}
+          fetchComplaints={jest.fn()}
+          refreshCatalog={jest.fn()}
+          resolveComplaints={resolveComplaints}
+        />
+      );
+
+      await user.click(screen.getByRole("button", { name: "Resolve" }));
+
+      expect(resolveComplaints).toHaveBeenCalledTimes(1);
+      expect(resolveComplaints.mock.calls[0][0]).toBe(
+        "http://example.com/admin/works/fakeid/resolve_complaints"
+      );
+      // The FormData sent along carries the complaint type being resolved.
+      const submittedData = resolveComplaints.mock.calls[0][1];
+      expect(submittedData.get("type")).toBe(
+        "http://librarysimplified.org/terms/problem/test-type"
+      );
+    });
+
+    it("re-fetches complaints and refreshes the catalog after resolving", async () => {
+      const user = userEvent.setup();
+      jest.spyOn(window, "confirm").mockReturnValue(true);
+      const fetchComplaints = jest.fn();
+      const refreshCatalog = jest.fn();
+      const resolveComplaints = jest.fn().mockResolvedValue(undefined);
+      render(
+        <Complaints
+          csrfToken="token"
+          book={{ id: "id", title: "test book" }}
+          bookUrl={bookUrl}
+          complaints={singleComplaint}
+          fetchComplaints={fetchComplaints}
+          refreshCatalog={refreshCatalog}
+          resolveComplaints={resolveComplaints}
+        />
+      );
+
+      await user.click(screen.getByRole("button", { name: "Resolve" }));
+
+      await waitFor(() => expect(refreshCatalog).toHaveBeenCalledTimes(1));
+      expect(resolveComplaints).toHaveBeenCalledTimes(1);
+      // Once on mount, and again as part of the post-resolve refresh.
+      expect(fetchComplaints).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("connect() wiring", () => {
+    it("renders the connected default export, mapping state and dispatch", async () => {
+      const fetchSpy = jest.spyOn(globalThis, "fetch").mockResolvedValue(
+        new Response(JSON.stringify({ complaints: {} }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        })
+      );
+
+      const { container } = renderWithProviders(
+        <ConnectedComplaints
+          bookUrl="http://example.com/works/fakeid"
+          book={{ id: "id", title: "connected book" }}
+          csrfToken="token"
+          refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        />
+      );
+
+      // Own prop flows through the connected component.
+      expect(
+        screen.getByRole("heading", { name: "connected book" })
+      ).toBeInTheDocument();
+
+      // mapDispatchToProps.fetchComplaints ran on mount and hit the network.
+      await waitFor(() => expect(fetchSpy).toHaveBeenCalled());
+      expect(fetchSpy.mock.calls[0][0]).toBe(
+        "http://example.com/admin/works/fakeid/complaints"
+      );
+
+      // Let the request/load cycle settle (isFetching true -> false), which also
+      // flushes the pending fetch so it cannot reject during teardown.
+      await waitFor(() =>
+        expect(
+          container.querySelector(".updating-loader")
+        ).not.toBeInTheDocument()
+      );
+
+      // mapStateToProps: no complaints in the store -> "None found." is shown.
+      expect(screen.getByText("None found.")).toBeInTheDocument();
+
+      jest.restoreAllMocks();
+    });
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// ConfigTabContainer mounts the connected configuration sections (Libraries,
+// Collections, Individual Admins, ...) which fetch over the network on mount. That
+// is incidental to what ConfigPage composes — the page's job is to hand the tab
+// container the params and context it needs — so mock it to a marker that echoes
+// the props it received.
+jest.mock("../../../src/components/ConfigTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="config-tab-container"
+      data-tab={props.tab}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import ConfigPage from "../../../src/components/ConfigPage";
+
+describe("ConfigPage", () => {
+  const params = {
+    tab: "libraries",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows a tab container with tab from params", () => {
+    renderWithProviders(<ConfigPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const tabContainer = screen.getByTestId("config-tab-container");
+    expect(tabContainer).toHaveAttribute("data-tab", "libraries");
+    expect(tabContainer).toHaveAttribute("data-edit-or-create", "edit");
+    expect(tabContainer).toHaveAttribute("data-identifier", "identifier");
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,196 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+import Admin from "../../../src/models/Admin";
+
+// Every configuration tab panel is a connected component that fetches on mount.
+// This container's behavior is the tab SET and tab SWITCHING, not the panels'
+// internals, so mock each panel to a marker echoing the props the container is
+// responsible for threading into it (csrfToken / editOrCreate / identifier).
+const panelMock = (testId: string) => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid={testId}
+      data-csrf-token={props.csrfToken}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+    />
+  ),
+});
+
+jest.mock("../../../src/components/Libraries", () => panelMock("libraries"));
+jest.mock("../../../src/components/Collections", () =>
+  panelMock("collections")
+);
+jest.mock("../../../src/components/IndividualAdmins", () =>
+  panelMock("individual-admins")
+);
+jest.mock("../../../src/components/PatronAuthServices", () =>
+  panelMock("patron-auth-services")
+);
+jest.mock("../../../src/components/MetadataServices", () =>
+  panelMock("metadata-services")
+);
+jest.mock("../../../src/components/CatalogServices", () =>
+  panelMock("catalog-services")
+);
+jest.mock("../../../src/components/DiscoveryServices", () =>
+  panelMock("discovery-services")
+);
+jest.mock("../../../src/components/SitewideAnnouncements", () =>
+  panelMock("sitewide-announcements")
+);
+
+import ConfigTabContainer from "../../../src/components/ConfigTabContainer";
+
+// ConfigTabContainer reads `router`, `pathFor`, and `admin` 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,
+    admin: PropTypes.object,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+describe("ConfigTabContainer", () => {
+  const systemAdmin = new Admin([{ role: "system" }]);
+  const libraryManagerA = new Admin([{ role: "manager", library: "a" }]);
+  const sitewideLibrarian = new Admin([{ role: "librarian-all" }]);
+
+  const renderWithAdmin = (admin: Admin, push: jest.Mock = jest.fn()) => {
+    const context = { router: { push }, pathFor: jest.fn(), admin };
+    const result = render(
+      <LegacyContextProvider context={context}>
+        <ConfigTabContainer
+          tab={null}
+          csrfToken="token"
+          store={buildStore()}
+          editOrCreate="edit"
+          identifier="identifier"
+        />
+      </LegacyContextProvider>
+    );
+    return { ...result, push };
+  };
+
+  const expectPanelProps = (testId: string) => {
+    const panel = screen.getByTestId(testId);
+    expect(panel).toHaveAttribute("data-csrf-token", "token");
+    expect(panel).toHaveAttribute("data-edit-or-create", "edit");
+    expect(panel).toHaveAttribute("data-identifier", "identifier");
+  };
+
+  describe("for system admin", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(systemAdmin);
+      for (const name of [
+        "Libraries",
+        "Admins",
+        "Collections",
+        "Patron Authentication",
+        "Metadata",
+        "External Catalogs",
+        "Discovery",
+        "Sitewide Announcements",
+      ]) {
+        expect(screen.getByRole("link", { name })).toBeInTheDocument();
+      }
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(systemAdmin);
+      for (const testId of [
+        "libraries",
+        "individual-admins",
+        "collections",
+        "patron-auth-services",
+        "metadata-services",
+        "catalog-services",
+        "discovery-services",
+        "sitewide-announcements",
+      ]) {
+        expectPanelProps(testId);
+      }
+    });
+
+    it("uses router to navigate when tab is clicked", async () => {
+      const { push } = renderWithAdmin(systemAdmin);
+      await userEvent.click(screen.getByRole("link", { name: "Collections" }));
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenCalledWith("/admin/web/config/collections");
+    });
+  });
+
+  describe("for library manager", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(libraryManagerA);
+      expect(
+        screen.getByRole("link", { name: "Libraries" })
+      ).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: "Admins" })).toBeInTheDocument();
+      for (const name of [
+        "Collections",
+        "Patron Authentication",
+        "Metadata",
+        "External Catalogs",
+      ]) {
+        expect(screen.queryByRole("link", { name })).not.toBeInTheDocument();
+      }
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(libraryManagerA);
+      expectPanelProps("libraries");
+      expectPanelProps("individual-admins");
+      for (const testId of [
+        "collections",
+        "patron-auth-services",
+        "metadata-services",
+        "catalog-services",
+        "discovery-services",
+        "sitewide-announcements",
+      ]) {
+        expect(screen.queryByTestId(testId)).not.toBeInTheDocument();
+      }
+    });
+  });
+
+  describe("for librarian", () => {
+    it("shows tabs", () => {
+      const { container } = renderWithAdmin(sitewideLibrarian);
+      const links = container.querySelectorAll("ul.nav-tabs a");
+      expect(links).toHaveLength(1);
+      expect(
+        screen.getByRole("link", { name: "Libraries" })
+      ).toBeInTheDocument();
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(sitewideLibrarian);
+      expectPanelProps("libraries");
+      for (const testId of [
+        "individual-admins",
+        "collections",
+        "patron-auth-services",
+        "metadata-services",
+        "catalog-services",
+        "discovery-services",
+        "sitewide-announcements",
+      ]) {
+        expect(screen.queryByTestId(testId)).not.toBeInTheDocument();
+      }
+    });
+  });
+});

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

@@ -0,0 +1,138 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+
+import ContextProvider from "../../../src/components/ContextProvider";
+import Admin from "../../../src/models/Admin";
+import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+import { ConfigurationSettings } from "../../../src/interfaces";
+
+// Reads everything ContextProvider puts on the legacy React context — the real
+// contract the app's pages consume — so we can assert on it without reaching for
+// the component instance.
+let captured: any;
+class Capture extends React.Component {
+  static contextTypes = {
+    editorStore: PropTypes.object,
+    csrfToken: PropTypes.string,
+    settingUp: PropTypes.bool,
+    admin: PropTypes.object,
+    featureFlags: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  render() {
+    captured = this.context;
+    return <div>child rendered</div>;
+  }
+}
+
+const renderWithConfig = (config: Partial<ConfigurationSettings>) =>
+  render(
+    <ContextProvider config={config as ConfigurationSettings}>
+      <Capture />
+    </ContextProvider>
+  );
+
+describe("ContextProvider", () => {
+  beforeEach(() => {
+    captured = undefined;
+  });
+
+  it("provides child context", () => {
+    renderWithConfig({
+      csrfToken: "token",
+      featureFlags: defaultFeatureFlags,
+      roles: [{ role: "system" }],
+      email: "email",
+    });
+
+    expect(captured.editorStore.getState().editor).toBeTruthy();
+    expect(captured.editorStore.getState().catalog).toBeTruthy();
+    expect(captured.csrfToken).toBe("token");
+    expect(captured.settingUp).toBeFalsy();
+    expect(captured.admin instanceof Admin).toBe(true);
+    expect(captured.admin.isSystemAdmin()).toBe(true);
+    expect(captured.admin.email).toBe("email");
+  });
+
+  it("saves the enableAutoList feature flag to the store", () => {
+    renderWithConfig({
+      csrfToken: "token",
+      featureFlags: { enableAutoList: true },
+    });
+
+    expect(
+      captured.editorStore.getState().editor.customListEditor
+        .isAutoUpdateEnabled
+    ).toBe(true);
+  });
+
+  it("renders its child", () => {
+    renderWithConfig({ csrfToken: "token", featureFlags: {} });
+    expect(screen.getByText("child rendered")).toBeInTheDocument();
+  });
+
+  it("passes pathFor down through context", () => {
+    renderWithConfig({ csrfToken: "token", featureFlags: {} });
+    expect(typeof captured.pathFor).toBe("function");
+  });
+
+  describe("pathFor", () => {
+    // prepareCollectionUrl / prepareBookUrl strip only `document.location.origin`,
+    // so using the real jsdom origin as the host yields the same encoded output the
+    // legacy test asserted (it forced the origin to example.com via jsdom.reconfigure,
+    // which the unit test environment does not provide). These calls also exercise
+    // prepareCollectionUrl and prepareBookUrl transitively.
+    const host = window.location.origin;
+    const collectionUrl = `${host}/groups/eng/Adult%20Fiction`;
+    const bookUrl = `${host}/library/works/Axis%20360/Axis%20360%20ID/0016201449`;
+    const preparedCollection = "groups%2Feng%2FAdult%2520Fiction";
+    const preparedBook =
+      "library%2FAxis%2520360%2FAxis%2520360%2520ID%2F0016201449";
+
+    beforeEach(() => {
+      renderWithConfig({ csrfToken: "token", featureFlags: {} });
+    });
+
+    it("returns a path with collection, book, and tab", () => {
+      expect(captured.pathFor(collectionUrl, bookUrl, "tab")).toBe(
+        `/admin/web/collection/${preparedCollection}/book/${preparedBook}/tab/tab`
+      );
+    });
+
+    it("returns a path with collection and book", () => {
+      expect(captured.pathFor(collectionUrl, bookUrl, null)).toBe(
+        `/admin/web/collection/${preparedCollection}/book/${preparedBook}`
+      );
+    });
+
+    it("returns a path with only a collection", () => {
+      expect(captured.pathFor(collectionUrl, null, null)).toBe(
+        `/admin/web/collection/${preparedCollection}`
+      );
+    });
+
+    it("returns a path with only a book", () => {
+      expect(captured.pathFor(null, bookUrl, null)).toBe(
+        `/admin/web/book/${preparedBook}`
+      );
+    });
+
+    it("returns a path with a book and tab", () => {
+      expect(captured.pathFor(null, bookUrl, "tab")).toBe(
+        `/admin/web/book/${preparedBook}/tab/tab`
+      );
+    });
+
+    it("returns the base path with no collection, book, or tab", () => {
+      expect(captured.pathFor(null, null, null)).toBe("/admin/web");
+    });
+
+    it("leaves a book url unchanged when it does not match the works pattern", () => {
+      // prepareBookUrl returns the url as-is when the /works/ regexp misses.
+      expect(captured.pathFor(null, "not-a-works-url", null)).toBe(
+        "/admin/web/book/not-a-works-url"
+      );
+    });
+  });
+});