@thepalaceproject/circulation-admin 1.43.0-post.15 → 1.43.0-post.17

package/tests/jest/components/DiscoveryServices.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 { DiscoveryServices } from "../../../src/components/DiscoveryServices";
+import DiscoveryServicesConnected from "../../../src/components/DiscoveryServices";
 import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
 import {
   ConfigurationSettings,
   DiscoveryServicesData,
 } from "../../../src/interfaces";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 
-// NB: This adds tests to the already existing tests in:
-// - `src/components/__tests__/DiscoveryServices-test.tsx`.
-//
-// Those tests should eventually be migrated here and
-// adapted to the Jest/React Testing Library paradigm.
-
 describe("DiscoveryServices - registered library disclosure", () => {
   // ── Shared fixtures ───────────────────────────────────────────────────────
 
@@ -543,3 +542,151 @@ describe("DiscoveryServices - registered library disclosure", () => {
     expect(container.querySelectorAll(".associated-items")).toHaveLength(0);
   });
 });
+
+// These exercise behavior the disclosure tests above do not: the connect()
+// wiring (mapStateToProps / mapDispatchToProps, which only run when the CONNECTED
+// default export mounts) and the getChildContext().registerLibrary closure
+// (which only runs when a library is registered from the edit form).
+
+describe("DiscoveryServices - connected wiring and registration", () => {
+  const allLibraries = [
+    { short_name: "nypl", name: "NYPL", uuid: "uuid-nypl" },
+  ];
+
+  const sysAdminConfig: Partial<ConfigurationSettings> = {
+    csrfToken: "",
+    featureFlags: defaultFeatureFlags,
+    roles: [{ role: "system" }],
+  };
+
+  // A loaded `libraries` slice persists through the on-mount discovery fetches
+  // (the libraries reducer ignores those actions), 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,
+  };
+
+  /**
+   * Stub `fetch` so the panel's on-mount fetches resolve with `body`. A fresh
+   * Response per call avoids "body already used" when several fetches run.
+   */
+  const stubFetch = (body: unknown) =>
+    jest.spyOn(globalThis, "fetch").mockImplementation(
+      async () =>
+        new Response(JSON.stringify(body), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        })
+    );
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("connected default export", () => {
+    it("wires mapStateToProps/mapDispatchToProps: fetches on mount and renders the list", async () => {
+      const listData = {
+        discovery_services: [
+          { id: 2, protocol: "test protocol", name: "Test Discovery" },
+        ],
+        protocols: [{ name: "test protocol", label: "TP", settings: [] }],
+      };
+      stubFetch(listData);
+      // A fresh store, preloaded with a loaded libraries slice, isolates this
+      // test and exercises mapStateToProps' allLibraries branch.
+      const store = buildStore({
+        editor: { libraries: loadedLibrariesState },
+      } as any);
+
+      const { container } = renderWithProviders(
+        <DiscoveryServicesConnected csrfToken="token" />,
+        { reduxProviderProps: { store } }
+      );
+
+      // 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: "Test Discovery" })
+      ).toBeInTheDocument();
+
+      const editLink = container.querySelector("a.edit-item");
+      expect(editLink).not.toBeNull();
+      expect(editLink.getAttribute("href")).toBe(
+        "/admin/web/config/discovery/edit/2"
+      );
+    });
+  });
+
+  describe("registerLibrary child context (edit mode)", () => {
+    // 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();
+    const renderEditMode = (
+      registerLibrary: jest.Mock,
+      fetchLibraryRegistrations: jest.Mock
+    ) =>
+      renderWithContext(
+        <DiscoveryServices
+          data={
+            {
+              discovery_services: [
+                { id: "2", protocol: "test protocol", name: "Test Discovery" },
+              ],
+              protocols: [
+                {
+                  name: "test protocol",
+                  supports_registration: true,
+                  settings: [],
+                  library_settings: [],
+                },
+              ],
+              allLibraries,
+            } as any
+          }
+          editOrCreate="edit"
+          identifier="2"
+          fetchData={jest.fn()}
+          editItem={jest.fn().mockResolvedValue(undefined)}
+          deleteItem={jest.fn().mockResolvedValue(undefined)}
+          registerLibrary={registerLibrary}
+          fetchLibraryRegistrations={fetchLibraryRegistrations}
+          csrfToken="token"
+          isFetching={false}
+        />,
+        sysAdminConfig
+      );
+
+    it("fetches library registrations on mount, and registers a library (building the right FormData) and refetches on click", async () => {
+      const user = userEvent.setup();
+      const registerLibrary = jest.fn().mockResolvedValue(undefined);
+      const fetchLibraryRegistrations = jest.fn().mockResolvedValue(undefined);
+      renderEditMode(registerLibrary, fetchLibraryRegistrations);
+
+      // getChildContext supplies registerLibrary to the edit form; the edit form
+      // surfaces a "Register" button for each library.
+      expect(fetchLibraryRegistrations).toHaveBeenCalledTimes(1);
+      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("integration_id")).toBe("2");
+      expect(formData.get("registration_stage")).toBe("testing");
+
+      // After a successful registration, the child context refetches.
+      await waitFor(() =>
+        expect(fetchLibraryRegistrations).toHaveBeenCalledTimes(2)
+      );
+    });
+  });
+});

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import EditableInput from "../../../src/components/EditableInput";
 
 describe("EditableInput", () => {
@@ -62,3 +63,251 @@ describe("EditableInput", () => {
     expect(textboxes[5]).toHaveAccessibleDescription("");
   });
 });
+
+// Value/change handling, the prop-sync in componentWillReceiveProps, and the
+// imperative ref API (getValue/getChecked/setValue/clear) that parents like
+// ProtocolFormField use.
+describe("EditableInput - value, change, and imperative API", () => {
+  it("updates as the user types and reports the value via getValue()", async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput ref={ref} label="Field" value="" onChange={onChange} />
+    );
+
+    const input = screen.getByRole("textbox", { name: "Field" });
+    await user.type(input, "hello");
+
+    expect(input).toHaveValue("hello");
+    expect(ref.current?.getValue()).toBe("hello");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("toggles a checkbox and reports it via getChecked()", async () => {
+    const user = userEvent.setup();
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput ref={ref} type="checkbox" label="Check" checked={false} />
+    );
+
+    const box = screen.getByRole("checkbox", { name: "Check" });
+    await user.click(box);
+
+    expect(box).toBeChecked();
+    expect(ref.current?.getChecked()).toBe(true);
+  });
+
+  it("does not fire onChange when readOnly", () => {
+    const onChange = jest.fn();
+    render(<EditableInput label="RO" value="x" readOnly onChange={onChange} />);
+
+    // `userEvent.type` honors the DOM's read-only semantics and never dispatches
+    // a change event, so it would never reach handleChange. Dispatch directly, so
+    // the component's own readOnly guard is what stops onChange.
+    fireEvent.change(screen.getByRole("textbox", { name: "RO" }), {
+      target: { value: "y" },
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("syncs its value when the value prop changes", () => {
+    const { rerender } = render(<EditableInput label="F" value="a" />);
+    const input = screen.getByRole("textbox", { name: "F" });
+    expect(input).toHaveValue("a");
+
+    rerender(<EditableInput label="F" value="b" />);
+    expect(input).toHaveValue("b");
+  });
+
+  it("syncs its checked state when the checked prop changes", () => {
+    const { rerender } = render(
+      <EditableInput type="checkbox" label="C" checked={false} />
+    );
+    const box = screen.getByRole("checkbox", { name: "C" });
+    expect(box).not.toBeChecked();
+
+    rerender(<EditableInput type="checkbox" label="C" checked={true} />);
+    expect(box).toBeChecked();
+  });
+
+  it("setValue and clear update the value imperatively", () => {
+    const ref = React.createRef<EditableInput>();
+    render(<EditableInput ref={ref} label="F" value="a" />);
+    const input = screen.getByRole("textbox", { name: "F" });
+
+    act(() => ref.current?.setValue("z"));
+    expect(input).toHaveValue("z");
+
+    act(() => ref.current?.clear());
+    expect(input).toHaveValue("");
+  });
+
+  it("clear also resets a checked box", () => {
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput ref={ref} type="checkbox" label="C" checked={true} />
+    );
+    const box = screen.getByRole("checkbox", { name: "C" });
+    expect(box).toBeChecked();
+
+    act(() => ref.current?.clear());
+    expect(box).not.toBeChecked();
+  });
+
+  // A falsy-but-valid value must survive: this is what defaultValueIfMissing
+  // guards, and what a naive `props.value || ""` would silently break.
+  it("keeps a zero value rather than falling back to the empty default", () => {
+    const { rerender } = render(<EditableInput label="F" value={0} />);
+    const input = screen.getByRole("textbox", { name: "F" });
+    expect(input).toHaveValue("0");
+
+    rerender(<EditableInput label="F" value="a" />);
+    expect(input).toHaveValue("a");
+
+    rerender(<EditableInput label="F" value={0} />);
+    expect(input).toHaveValue("0");
+  });
+});
+
+describe("EditableInput - labels, children, and pass-through props", () => {
+  it("labels a radio input and toggles it", async () => {
+    const user = userEvent.setup();
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput
+        ref={ref}
+        type="radio"
+        label="Radio label"
+        name="r"
+        checked={false}
+      />
+    );
+
+    const radio = screen.getByRole("radio", { name: "Radio label" });
+    expect(radio).not.toBeChecked();
+
+    await user.click(radio);
+
+    expect(radio).toBeChecked();
+    expect(ref.current?.getChecked()).toBe(true);
+  });
+
+  it("renders children into the element", () => {
+    render(
+      <EditableInput elementType="select" label="S" name="s" value="b">
+        <option value="a">option a</option>
+        <option value="b">option b</option>
+      </EditableInput>
+    );
+
+    const select = screen.getByRole("combobox", { name: "S" });
+    expect(select).toHaveValue("b");
+    expect(
+      Array.from(select.querySelectorAll("option")).map((o) => o.textContent)
+    ).toEqual(["option a", "option b"]);
+  });
+
+  it("forwards the disabled prop to the element", () => {
+    render(<EditableInput label="F" name="name" disabled={true} value="v" />);
+    expect(screen.getByRole("textbox", { name: "F" })).toBeDisabled();
+  });
+
+  // renderDescription uses dangerouslySetInnerHTML, and callers pass markup.
+  it("renders the description as HTML", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        optionalText={false}
+        description="<p>description</p>"
+      />
+    );
+
+    const description = container.querySelector(".description");
+    expect(description.innerHTML).toContain("<p>description</p>");
+  });
+
+  it("shows extra content in an add-on wrapper only when supplied", () => {
+    const { container, rerender } = render(
+      <EditableInput label="F" name="name" value="v" />
+    );
+    expect(container.querySelector(".with-add-on")).toBeNull();
+
+    rerender(
+      <EditableInput
+        label="F"
+        name="name"
+        value="v"
+        extraContent={<span>Extra content!</span>}
+      />
+    );
+
+    const extra = container.querySelector(".with-add-on");
+    expect(extra).not.toBeNull();
+    expect(extra).toHaveTextContent("Extra content!");
+  });
+});
+
+// The error styling is a compound predicate:
+//   clientError || (error && error.status >= 400 && !value && required)
+describe("EditableInput - error styling", () => {
+  const formGroup = (container: HTMLElement) =>
+    container.querySelector(".form-group");
+
+  it("applies no error class by default", () => {
+    const { container } = render(
+      <EditableInput label="F" name="name" value="initial value" />
+    );
+    expect(formGroup(container)).not.toHaveClass("field-error");
+  });
+
+  it("applies the error class on a client error", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        value="initial value"
+        clientError={true}
+      />
+    );
+    expect(formGroup(container)).toHaveClass("field-error");
+  });
+
+  it("applies the error class for a blank required field after a server error", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        error={{ status: 400, response: "", url: "" }}
+        required={true}
+      />
+    );
+    expect(formGroup(container)).toHaveClass("field-error");
+  });
+
+  it("does not apply the error class when the required field has a value", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        value="a value"
+        error={{ status: 400, response: "", url: "" }}
+        required={true}
+      />
+    );
+    expect(formGroup(container)).not.toHaveClass("field-error");
+  });
+
+  it("does not apply the error class for a server error on an optional field", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        error={{ status: 400, response: "", url: "" }}
+        required={false}
+      />
+    );
+    expect(formGroup(container)).not.toHaveClass("field-error");
+  });
+});