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

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

@@ -1,19 +1,18 @@
 import * as React from "react";
-import { fireEvent } from "@testing-library/react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Collections } from "../../../src/components/Collections";
+import CollectionsConnected from "../../../src/components/Collections";
 import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
 import {
   CollectionsData,
   ConfigurationSettings,
 } from "../../../src/interfaces";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 
-// NB: This adds tests to the already existing tests in:
-// - `src/components/__tests__/Collections-test.tsx`.
-//
-// Those tests should eventually be migrated here and
-// adapted to the Jest/React Testing Library paradigm.
-
 describe("Collections - associated library disclosure", () => {
   // ── Shared fixtures ───────────────────────────────────────────────────────
 
@@ -219,3 +218,332 @@ describe("Collections - associated library disclosure", () => {
     );
   });
 });
+
+// These exercise behavior the disclosure tests above do not: the connect()
+// wiring (mapStateToProps / mapDispatchToProps, which only run when the CONNECTED
+// default export mounts), the marked-for-deletion list item, the
+// confirm-before-disassociating-libraries behavior, the
+// getChildContext().registerLibrary closure, the on-mount registrations fetch,
+// and the delete flow.
+
+describe("Collections - connected wiring, deletion, and registration", () => {
+  const allLibraries = [
+    { short_name: "nypl", name: "NYPL", uuid: "uuid-nypl" },
+  ];
+
+  const sysAdminConfig: Partial<ConfigurationSettings> = {
+    csrfToken: "",
+    featureFlags: defaultFeatureFlags,
+    roles: [{ role: "system" }],
+  };
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("connected default export", () => {
+    // A loaded `libraries` slice persists through the on-mount collections fetch
+    // (the libraries reducer ignores that action), so mapStateToProps takes its
+    // `data.allLibraries` branch on every render.
+    const loadedLibrariesState = {
+      data: { libraries: allLibraries },
+      isFetching: false,
+      isEditing: false,
+      fetchError: null,
+      formError: null,
+      isLoaded: true,
+      responseBody: null,
+      successMessage: null,
+    };
+
+    const stubFetch = (body: unknown) =>
+      jest.spyOn(globalThis, "fetch").mockImplementation(
+        async () =>
+          new Response(JSON.stringify(body), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          })
+      );
+
+    it("wires mapStateToProps/mapDispatchToProps and marks a collection for deletion", async () => {
+      const listData = {
+        collections: [
+          { id: 2, protocol: "test protocol", name: "ODL" },
+          {
+            id: 3,
+            protocol: "test protocol",
+            name: "Enki",
+            marked_for_deletion: true,
+          },
+        ],
+        protocols: [{ name: "test protocol", label: "TP", settings: [] }],
+      };
+      stubFetch(listData);
+      const store = buildStore({
+        editor: { libraries: loadedLibrariesState },
+      } as any);
+
+      const { container } = renderWithProviders(
+        <CollectionsConnected csrfToken="token" />,
+        {
+          reduxProviderProps: { store },
+          appConfigSettings: sysAdminConfig,
+        }
+      );
+
+      // The list appears once the connected component's on-mount fetch resolves
+      // and mapStateToProps feeds the fetched data back in as props.
+      expect(
+        await screen.findByRole("heading", { level: 3, name: "ODL" })
+      ).toBeInTheDocument();
+
+      // The non-deleted collection has edit and delete controls.
+      const editLink = container.querySelector("a.edit-item");
+      expect(editLink.getAttribute("href")).toBe(
+        "/admin/web/config/collections/edit/2"
+      );
+
+      // The deleted collection renders a special item with no edit/delete
+      // controls and an explanatory message.
+      const deleted = container.querySelector(".deleted-collection");
+      expect(deleted).not.toBeNull();
+      expect(deleted).toHaveTextContent("Enki");
+      expect(deleted).toHaveTextContent(/cannot be edited/);
+      expect(deleted.querySelector("a.edit-item")).toBeNull();
+      expect(deleted.querySelector("button.delete-item")).toBeNull();
+    });
+  });
+
+  describe("edit mode: registration and additional content", () => {
+    // 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();
+    it("fetches registrations on mount, renders task controls, and registers a library on click", async () => {
+      const user = userEvent.setup();
+      const registerLibrary = jest.fn().mockResolvedValue(undefined);
+      const fetchLibraryRegistrations = jest.fn().mockResolvedValue(undefined);
+      renderWithContext(
+        <Collections
+          data={
+            {
+              collections: [
+                {
+                  id: 7,
+                  protocol: "OPDS Import",
+                  name: "An OPDS Collection",
+                  libraries: [],
+                },
+              ],
+              protocols: [
+                {
+                  name: "OPDS Import",
+                  supports_registration: true,
+                  supports_import: true,
+                  settings: [],
+                  library_settings: [],
+                },
+              ],
+              allLibraries,
+            } as any
+          }
+          editOrCreate="edit"
+          identifier="7"
+          fetchData={jest.fn()}
+          editItem={jest.fn().mockResolvedValue(undefined)}
+          deleteItem={jest.fn().mockResolvedValue(undefined)}
+          registerLibrary={registerLibrary}
+          fetchLibraryRegistrations={fetchLibraryRegistrations}
+          importCollection={jest.fn().mockResolvedValue(undefined)}
+          reapCollection={jest.fn().mockResolvedValue(undefined)}
+          csrfToken="token"
+          isFetching={false}
+        />,
+        sysAdminConfig
+      );
+
+      // componentDidMount fetches the registrations once. (CollectionEditForm's
+      // renderAdditionalContent also runs here, since the edited collection has
+      // an id, injecting the import/reap task panels into the form.)
+      expect(fetchLibraryRegistrations).toHaveBeenCalledTimes(1);
+
+      // Registering a library goes through getChildContext().registerLibrary.
+      expect(registerLibrary).not.toHaveBeenCalled();
+      await user.click(screen.getByRole("button", { name: "Register" }));
+
+      expect(registerLibrary).toHaveBeenCalledTimes(1);
+      const formData = registerLibrary.mock.calls[0][0];
+      expect(formData.get("library_short_name")).toBe("nypl");
+      expect(formData.get("collection_id")).toBe("7");
+
+      // After a successful registration, the child context refetches.
+      await waitFor(() =>
+        expect(fetchLibraryRegistrations).toHaveBeenCalledTimes(2)
+      );
+    });
+  });
+
+  describe("confirm before disassociating libraries", () => {
+    const initialLibraries = [
+      { short_name: "palace", name: "Palace" },
+      { short_name: "another-library", name: "Another Library" },
+    ];
+
+    const renderEditForm = (
+      libraries: Array<{ short_name: string }>,
+      libraryMeta: Array<{ short_name: string; name?: string }>
+    ) =>
+      renderWithContext(
+        <Collections
+          data={
+            {
+              collections: [
+                {
+                  id: 7,
+                  protocol: "OPDS Import",
+                  name: "An OPDS Collection",
+                  libraries,
+                },
+              ],
+              protocols: [
+                { name: "OPDS Import", settings: [], library_settings: [] },
+              ],
+              allLibraries: libraryMeta,
+            } as any
+          }
+          editOrCreate="edit"
+          identifier="7"
+          fetchData={jest.fn()}
+          editItem={jest.fn().mockResolvedValue(undefined)}
+          deleteItem={jest.fn().mockResolvedValue(undefined)}
+          registerLibrary={jest.fn().mockResolvedValue(undefined)}
+          importCollection={jest.fn().mockResolvedValue(undefined)}
+          reapCollection={jest.fn().mockResolvedValue(undefined)}
+          csrfToken="token"
+          isFetching={false}
+        />,
+        sysAdminConfig
+      );
+
+    it("removes the library when the confirmation is accepted", () => {
+      const confirmSpy = jest.spyOn(window, "confirm").mockReturnValue(true);
+      const { container } = renderEditForm(
+        [...initialLibraries],
+        [...initialLibraries]
+      );
+
+      // One remove button per associated library.
+      expect(container.querySelectorAll("button.remove-btn")).toHaveLength(2);
+
+      fireEvent.click(container.querySelectorAll("button.remove-btn")[0]);
+
+      // The prompt names the (full) library being removed.
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      expect(confirmSpy.mock.calls[0][0]).toBe(
+        'Disassociating library "Palace" from this collection will ' +
+          "remove all loans and holds for its patrons. Do you wish to continue?"
+      );
+
+      // The association (and its remove button) is gone.
+      expect(container.querySelectorAll("button.remove-btn")).toHaveLength(1);
+    });
+
+    it("keeps the library when the confirmation is canceled", () => {
+      jest.spyOn(window, "confirm").mockReturnValue(false);
+      const { container } = renderEditForm(
+        [...initialLibraries],
+        [...initialLibraries]
+      );
+
+      expect(container.querySelectorAll("button.remove-btn")).toHaveLength(2);
+      fireEvent.click(container.querySelectorAll("button.remove-btn")[0]);
+      // Nothing was removed.
+      expect(container.querySelectorAll("button.remove-btn")).toHaveLength(2);
+    });
+
+    it("uses the library short_name in the prompt when the full name is unavailable", () => {
+      const confirmSpy = jest.spyOn(window, "confirm").mockReturnValue(false);
+      // The library is not present in allLibraries, so getLibrary() returns null.
+      const { container } = renderEditForm([{ short_name: "orphan" }], []);
+
+      fireEvent.click(container.querySelector("button.remove-btn"));
+
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      expect(confirmSpy.mock.calls[0][0]).toBe(
+        'Disassociating library "orphan" from this collection will ' +
+          "remove all loans and holds for its patrons. Do you wish to continue?"
+      );
+    });
+  });
+
+  describe("create mode", () => {
+    it("renders the create form without import/reap task panels", () => {
+      // In create mode there is no saved collection, so CollectionEditForm's
+      // renderAdditionalContent short-circuits and injects no task panels.
+      renderWithContext(
+        <Collections
+          data={
+            {
+              collections: [],
+              protocols: [
+                { name: "OPDS Import", settings: [], library_settings: [] },
+              ],
+              allLibraries,
+            } as any
+          }
+          editOrCreate="create"
+          fetchData={jest.fn()}
+          editItem={jest.fn().mockResolvedValue(undefined)}
+          deleteItem={jest.fn().mockResolvedValue(undefined)}
+          registerLibrary={jest.fn().mockResolvedValue(undefined)}
+          importCollection={jest.fn().mockResolvedValue(undefined)}
+          reapCollection={jest.fn().mockResolvedValue(undefined)}
+          csrfToken="token"
+          isFetching={false}
+        />,
+        sysAdminConfig
+      );
+
+      expect(
+        screen.getByRole("heading", { name: "Create a new collection" })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("deletion", () => {
+    it("deletes a collection and refetches after confirmation", async () => {
+      const deleteItem = jest.fn().mockResolvedValue(undefined);
+      const fetchData = jest.fn();
+      const confirmSpy = jest.spyOn(window, "confirm").mockReturnValue(true);
+
+      const { container } = renderWithContext(
+        <Collections
+          data={
+            {
+              collections: [{ id: 1, protocol: "p", name: "My Collection" }],
+              protocols: [],
+              allLibraries,
+            } as any
+          }
+          fetchData={fetchData}
+          editItem={jest.fn().mockResolvedValue(undefined)}
+          deleteItem={deleteItem}
+          registerLibrary={jest.fn().mockResolvedValue(undefined)}
+          importCollection={jest.fn().mockResolvedValue(undefined)}
+          reapCollection={jest.fn().mockResolvedValue(undefined)}
+          csrfToken="token"
+          isFetching={false}
+        />,
+        sysAdminConfig
+      );
+
+      fireEvent.click(container.querySelector("button.delete-item"));
+
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+      await waitFor(() => expect(deleteItem).toHaveBeenCalledWith(1));
+      // fetchData is called once on mount; the post-delete refetch is the second
+      // call, so assert the count rather than mere invocation.
+      await waitFor(() => expect(fetchData).toHaveBeenCalledTimes(2));
+    });
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ColorPicker from "../../../src/components/ColorPicker";
+
+describe("ColorPicker", () => {
+  const setting = {
+    key: "key",
+    label: "label",
+  };
+
+  it("should show the compact picker", () => {
+    const { container } = render(
+      <ColorPicker setting={setting} value="#123456" />
+    );
+
+    // The react-color CompactPicker renders a `.compact-picker` container whose
+    // hex field reflects the color it was given.
+    expect(container.querySelector(".compact-picker")).toBeInTheDocument();
+    expect(screen.getByLabelText("hex")).toHaveValue("#123456");
+  });
+
+  it("should have a hidden input with the value", () => {
+    const { container } = render(
+      <ColorPicker setting={setting} value="#123456" />
+    );
+
+    const input = container.querySelector<HTMLInputElement>(
+      'input[type="hidden"]'
+    );
+    expect(input).toHaveAttribute("name", "key");
+    expect(input).toHaveValue("#123456");
+  });
+
+  it("should change the value", async () => {
+    const user = userEvent.setup();
+    // getValue() is the imperative API ProtocolFormField calls via a ref in
+    // production, so exercise it through a real ref here.
+    const ref = React.createRef<ColorPicker>();
+    const { container } = render(
+      <ColorPicker ref={ref} setting={setting} value="#123456" />
+    );
+    const hiddenInput = container.querySelector<HTMLInputElement>(
+      'input[type="hidden"]'
+    );
+
+    expect(ref.current.getValue()).toBe("#123456");
+    expect(hiddenInput).toHaveValue("#123456");
+
+    // Clicking a palette swatch fires the picker's onChangeComplete, which
+    // updates the component's value (react-color debounces that callback).
+    await user.click(screen.getByTitle("#FE9200"));
+
+    await waitFor(() => expect(ref.current.getValue()).toBe("#fe9200"));
+    expect(hiddenInput).toHaveValue("#fe9200");
+  });
+});

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

@@ -0,0 +1,171 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ComplaintForm from "../../../src/components/ComplaintForm";
+installFormDataShim();
+
+// ComplaintForm's default export is a plain (unconnected) class component, so a
+// bare `render` is sufficient — no providers/store/context are required.
+const renderForm = (
+  props: Partial<React.ComponentProps<typeof ComplaintForm>> = {}
+) =>
+  render(
+    <ComplaintForm
+      disabled={false}
+      complaintUrl="complaint url"
+      postComplaint={jest.fn().mockResolvedValue(undefined)}
+      refreshComplaints={jest.fn()}
+      {...props}
+    />
+  );
+
+const getSelect = (container: HTMLElement) =>
+  container.querySelector("select") as HTMLSelectElement;
+
+describe("ComplaintForm", () => {
+  describe("rendering", () => {
+    it("shows a select field with a default value", () => {
+      const { container } = renderForm();
+      const select = getSelect(container);
+      expect(select).toBeInTheDocument();
+      expect(select).not.toBeDisabled();
+      expect(screen.getAllByRole("option")[0]).toHaveTextContent(
+        "Complaint type"
+      );
+    });
+
+    it("shows complaint type options", () => {
+      renderForm();
+      const values = screen
+        .getAllByRole("option")
+        .map((option) => (option as HTMLOptionElement).value);
+      expect(values).toStrictEqual([
+        "",
+        "cannot-issue-loan",
+        "cannot-render",
+        "wrong-title",
+        "wrong-author",
+        "wrong-audience",
+        "cannot-fulfill-loan",
+        "bad-description",
+        "cannot-return",
+        "bad-cover-image",
+        "wrong-medium",
+        "wrong-age-range",
+        "wrong-genre",
+      ]);
+    });
+
+    it("formats complaint type options", () => {
+      renderForm();
+      const texts = screen
+        .getAllByRole("option")
+        .map((option) => option.textContent);
+      expect(texts).toStrictEqual([
+        "Complaint type",
+        "Cannot issue loan",
+        "Cannot render",
+        "Wrong title",
+        "Wrong author",
+        "Wrong audience",
+        "Cannot fulfill loan",
+        "Bad description",
+        "Cannot return",
+        "Bad cover image",
+        "Wrong medium",
+        "Wrong age range",
+        "Wrong genre",
+      ]);
+    });
+
+    it("shows a submit button", () => {
+      renderForm();
+      expect(
+        screen.getByRole("button", { name: "Submit" })
+      ).toBeInTheDocument();
+    });
+
+    it("disables the select and submit button when disabled", () => {
+      const { container } = renderForm({ disabled: true });
+      expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+      expect(getSelect(container)).toBeDisabled();
+    });
+  });
+
+  describe("behavior", () => {
+    it("posts complaints", async () => {
+      const user = userEvent.setup();
+      const postComplaint = jest.fn().mockResolvedValue(undefined);
+      const { container } = renderForm({ postComplaint });
+
+      await user.selectOptions(getSelect(container), "bad-description");
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(postComplaint).toHaveBeenCalledTimes(1);
+      expect(postComplaint.mock.calls[0][0]).toBe("complaint url");
+      expect(postComplaint.mock.calls[0][1].type).toBe(
+        "http://librarysimplified.org/terms/problem/bad-description"
+      );
+    });
+
+    it("refreshes complaints after a successful post", async () => {
+      const user = userEvent.setup();
+      const refreshComplaints = jest.fn();
+      const { container } = renderForm({
+        postComplaint: jest.fn().mockResolvedValue(undefined),
+        refreshComplaints,
+      });
+
+      await user.selectOptions(getSelect(container), "bad-description");
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      await waitFor(() => expect(refreshComplaints).toHaveBeenCalledTimes(1));
+    });
+
+    it("clears the selected complaint type after a successful post", async () => {
+      const user = userEvent.setup();
+      const { container } = renderForm({
+        postComplaint: jest.fn().mockResolvedValue(undefined),
+      });
+
+      const select = getSelect(container);
+      await user.selectOptions(select, "bad-description");
+      expect(select).toHaveValue("bad-description");
+
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      await waitFor(() => expect(getSelect(container)).toHaveValue(""));
+    });
+
+    it("displays an error if no type is selected", async () => {
+      const user = userEvent.setup();
+      const postComplaint = jest.fn().mockResolvedValue(undefined);
+      renderForm({ postComplaint });
+
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(
+        await screen.findByText("You must select a complaint type!")
+      ).toBeInTheDocument();
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "You must select a complaint type!"
+      );
+      expect(postComplaint).not.toHaveBeenCalled();
+    });
+
+    it("shows an error message if the post fails", async () => {
+      const user = userEvent.setup();
+      const postComplaint = jest.fn().mockRejectedValue(new Error("nope"));
+      const { container } = renderForm({ postComplaint });
+
+      await user.selectOptions(getSelect(container), "bad-description");
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(
+        await screen.findByText("Couldn't post complaint.")
+      ).toBeInTheDocument();
+    });
+  });
+});