@thepalaceproject/circulation-admin 1.43.0-post.14 → 1.43.0-post.16

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");
+  });
+});

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

@@ -0,0 +1,421 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+
+import { Header } from "../../../src/components/Header";
+import HeaderWithStore from "../../../src/components/Header";
+import Admin from "../../../src/models/Admin";
+import title from "../../../src/utils/title";
+import buildStore from "../../../src/store";
+
+// Render react-router's Link as a marker `<div>` so we can read its target
+// (`data-to`) and text without a real Router in context. (A bare `<a>` without an
+// href would fail jsx-a11y, so use a div.)
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to} className={props.className}>
+      {props.children}
+    </div>
+  ),
+}));
+
+// Header reads `library`, `router`, and `admin` from the legacy React context that
+// the OPDS web client supplies in production. Supply them via a small legacy
+// context provider (also carrying the `editorStore`/`csrfToken` the connected
+// default export needs).
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    library: PropTypes.func,
+    router: PropTypes.object,
+    admin: PropTypes.object,
+    editorStore: PropTypes.object,
+    csrfToken: PropTypes.string,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const makeRouter = () => ({
+  createHref: jest.fn(),
+  push: jest.fn(),
+  isActive: jest.fn(),
+  replace: jest.fn(),
+  go: jest.fn(),
+  goBack: jest.fn(),
+  goForward: jest.fn(),
+  setRouteLeaveHook: jest.fn(),
+  getCurrentLocation: jest.fn(),
+});
+
+const libraryManager = new Admin([{ role: "manager", library: "nypl" }]);
+const librarian = new Admin([{ role: "librarian", library: "nypl" }]);
+const systemAdmin = new Admin([{ role: "system", library: "nypl" }]);
+
+type RenderHeaderOptions = {
+  // Pass `null` to model an absent `library` in context (a destructuring default
+  // cannot distinguish an omitted key from an explicit `undefined`, so `null` is
+  // the sentinel for "no library selected"). Header treats null/undefined alike.
+  library?: (() => string) | null;
+  admin?: Admin;
+  router?: ReturnType<typeof makeRouter>;
+  props?: Record<string, unknown>;
+};
+
+const renderHeader = ({
+  library = () => "nypl",
+  admin = libraryManager,
+  router = makeRouter(),
+  props = {},
+}: RenderHeaderOptions = {}) =>
+  render(
+    <LegacyContextProvider context={{ library, admin, router }}>
+      <Header {...props} />
+    </LegacyContextProvider>
+  );
+
+describe("Header", () => {
+  describe("rendering", () => {
+    it("renders the site title as an h1", () => {
+      renderHeader();
+      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+        title()
+      );
+    });
+
+    it("shows the brand image", () => {
+      renderHeader();
+      expect(screen.getByAltText(title())).toBeInTheDocument();
+    });
+
+    it("shows no library dropdown when there are no libraries", () => {
+      renderHeader();
+      expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
+    });
+
+    it("shows a library dropdown listing the available libraries", () => {
+      const libraries = [
+        { short_name: "nypl", name: "NYPL" },
+        { short_name: "bpl" },
+      ];
+      renderHeader({ props: { libraries } });
+
+      const select = screen.getByRole("combobox");
+      expect(select).toHaveValue("nypl");
+
+      const options = within(select).getAllByRole("option");
+      expect(options).toHaveLength(2);
+      expect(options[0]).toHaveTextContent("NYPL");
+      expect(options[0]).toHaveValue("nypl");
+      expect(options[1]).toHaveTextContent("bpl");
+      expect(options[1]).toHaveValue("bpl");
+    });
+
+    it("reflects the selected library as the dropdown value", () => {
+      const libraries = [
+        { short_name: "nypl", name: "NYPL" },
+        { short_name: "bpl" },
+      ];
+      renderHeader({ library: () => "bpl", props: { libraries } });
+      expect(screen.getByRole("combobox")).toHaveValue("bpl");
+    });
+
+    it("prepends a 'Select a library' option when no library is selected", () => {
+      const libraries = [
+        { short_name: "nypl", name: "NYPL" },
+        { short_name: "bpl" },
+      ];
+      renderHeader({ library: null, props: { libraries } });
+
+      const options = within(screen.getByRole("combobox")).getAllByRole(
+        "option"
+      );
+      expect(options).toHaveLength(3);
+      expect(options[0]).toHaveTextContent("Select a library");
+      expect(options[1]).toHaveTextContent("NYPL");
+      expect(options[1]).toHaveValue("nypl");
+      expect(options[2]).toHaveTextContent("bpl");
+      expect(options[2]).toHaveValue("bpl");
+    });
+
+    it("shows the catalog nav links when a library is selected", () => {
+      const { container } = renderHeader();
+
+      const catalogLinks = container.querySelectorAll(
+        'a[href^="/admin/web/collection/"]'
+      );
+      expect(catalogLinks).toHaveLength(2);
+
+      const catalog = container.querySelector('a[href*="nypl%2Fgroups"]');
+      expect(catalog).toHaveTextContent("Catalog");
+      const hidden = container.querySelector(
+        'a[href*="nypl%2Fadmin%2Fsuppressed"]'
+      );
+      expect(hidden).toHaveTextContent("Hidden Books");
+    });
+
+    it("hides the catalog nav links when no library is selected", () => {
+      const { container } = renderHeader({ library: null });
+      expect(
+        container.querySelectorAll('a[href^="/admin/web/collection/"]')
+      ).toHaveLength(0);
+    });
+
+    it("shows dashboard, lists, lanes, and system configuration links for a library manager", () => {
+      renderHeader({ admin: libraryManager });
+
+      const links = screen.getAllByTestId("Link");
+      expect(links).toHaveLength(4);
+      expect(links[0]).toHaveTextContent("Dashboard");
+      expect(links[0]).toHaveAttribute("data-to", "/admin/web/dashboard/nypl");
+      expect(links[1]).toHaveTextContent("Lists");
+      expect(links[1]).toHaveAttribute("data-to", "/admin/web/lists/nypl");
+      expect(links[2]).toHaveTextContent("Lanes");
+      expect(links[2]).toHaveAttribute("data-to", "/admin/web/lanes/nypl");
+      expect(links[3]).toHaveTextContent("System Configuration");
+      expect(links[3]).toHaveAttribute("data-to", "/admin/web/config/");
+    });
+
+    it("shows only site-wide dashboard and system configuration links when no library is selected", () => {
+      renderHeader({ library: null, admin: libraryManager });
+
+      const links = screen.getAllByTestId("Link");
+      expect(links).toHaveLength(2);
+      expect(links[0]).toHaveTextContent("Dashboard");
+      expect(links[0]).toHaveAttribute("data-to", "/admin/web/dashboard/");
+      expect(links[1]).toHaveTextContent("System Configuration");
+      expect(links[1]).toHaveAttribute("data-to", "/admin/web/config/");
+    });
+
+    it("shows dashboard, lists, and system configuration links for a librarian", () => {
+      renderHeader({ admin: librarian });
+
+      const links = screen.getAllByTestId("Link");
+      expect(links).toHaveLength(3);
+      expect(links[0]).toHaveTextContent("Dashboard");
+      expect(links[0]).toHaveAttribute("data-to", "/admin/web/dashboard/nypl");
+      expect(links[1]).toHaveTextContent("Lists");
+      expect(links[1]).toHaveAttribute("data-to", "/admin/web/lists/nypl");
+      expect(links[2]).toHaveTextContent("System Configuration");
+      expect(links[2]).toHaveAttribute("data-to", "/admin/web/config/");
+    });
+
+    it("shows the account dropdown toggle when the admin has an email", () => {
+      const admin = new Admin(
+        [{ role: "librarian", library: "nypl" }],
+        "admin@nypl.org"
+      );
+      const { container } = renderHeader({ admin });
+
+      const toggle = container.querySelector("button.account-dropdown-toggle");
+      expect(toggle).toBeInTheDocument();
+      expect(toggle).toHaveTextContent("admin@nypl.org");
+    });
+
+    describe("patron manager display", () => {
+      it("does not show the Patrons link for a librarian", () => {
+        renderHeader({ admin: librarian });
+        const links = screen.getAllByTestId("Link");
+        expect(links).toHaveLength(3);
+        expect(links.some((link) => link.textContent === "Patrons")).toBe(
+          false
+        );
+      });
+
+      it("does not show the Patrons link for a library manager", () => {
+        renderHeader({ admin: libraryManager });
+        const links = screen.getAllByTestId("Link");
+        expect(links).toHaveLength(4);
+        expect(links.some((link) => link.textContent === "Patrons")).toBe(
+          false
+        );
+      });
+
+      it("shows the Patrons link for a system admin", () => {
+        renderHeader({ admin: systemAdmin });
+        const links = screen.getAllByTestId("Link");
+        expect(links).toHaveLength(6);
+        expect(links[3]).toHaveTextContent("Patrons");
+      });
+    });
+
+    describe("troubleshooting display", () => {
+      it("does not show the Troubleshooting link for a librarian", () => {
+        renderHeader({ admin: librarian });
+        const links = screen.getAllByTestId("Link");
+        expect(links).toHaveLength(3);
+        expect(
+          links.some((link) => link.textContent === "Troubleshooting")
+        ).toBe(false);
+      });
+
+      it("does not show the Troubleshooting link for a library manager", () => {
+        renderHeader({ admin: libraryManager });
+        const links = screen.getAllByTestId("Link");
+        expect(links).toHaveLength(4);
+        expect(
+          links.some((link) => link.textContent === "Troubleshooting")
+        ).toBe(false);
+      });
+
+      it("shows the Troubleshooting link for a system admin", () => {
+        renderHeader({ admin: systemAdmin });
+        const links = screen.getAllByTestId("Link");
+        expect(links).toHaveLength(6);
+        expect(links[5]).toHaveTextContent("Troubleshooting");
+      });
+    });
+  });
+
+  describe("behavior", () => {
+    it("fetches libraries on mount", () => {
+      const fetchLibraries = jest.fn();
+      renderHeader({ admin: libraryManager, props: { fetchLibraries } });
+      expect(fetchLibraries).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not fetch libraries on mount if a fetch is already in progress", () => {
+      const fetchLibraries = jest.fn();
+      renderHeader({
+        admin: libraryManager,
+        props: { fetchLibraries, isFetchingLibraries: true },
+      });
+      expect(fetchLibraries).not.toHaveBeenCalled();
+    });
+
+    it("navigates to the selected library's catalog when the dropdown changes", async () => {
+      const user = userEvent.setup();
+      const router = makeRouter();
+      const libraries = [
+        { short_name: "nypl", name: "NYPL" },
+        { short_name: "bpl" },
+      ];
+      renderHeader({ router, props: { libraries } });
+
+      await user.selectOptions(screen.getByRole("combobox"), "bpl");
+
+      expect(router.push).toHaveBeenCalledTimes(1);
+      expect(router.push).toHaveBeenCalledWith(
+        "/admin/web/collection/bpl%2Fgroups"
+      );
+    });
+
+    it("toggles the account dropdown open and closed", async () => {
+      const user = userEvent.setup();
+      const admin = new Admin(
+        [{ role: "librarian", library: "nypl" }],
+        "admin@nypl.org"
+      );
+      const { container } = renderHeader({ admin });
+
+      expect(
+        container.querySelector("ul.dropdown-menu")
+      ).not.toBeInTheDocument();
+
+      const toggle = container.querySelector(
+        "button.account-dropdown-toggle"
+      ) as HTMLElement;
+      await user.click(toggle);
+
+      const menu = container.querySelector("ul.dropdown-menu") as HTMLElement;
+      expect(menu).toBeInTheDocument();
+      expect(menu.querySelectorAll("li")).toHaveLength(3);
+      expect(menu.querySelector("li.permissions")).toHaveTextContent(
+        "Logged in as a user"
+      );
+
+      // The change-password entry is a react-router Link (mocked to a marker div).
+      const changePassword = within(menu).getByTestId("Link");
+      expect(changePassword).toHaveTextContent("Change password");
+      expect(changePassword).toHaveAttribute("data-to", "/admin/web/account/");
+
+      // The sign-out entry is a real anchor.
+      const signOut = within(menu).getByRole("link", { name: "Sign out" });
+      expect(signOut).toHaveAttribute("href", "/admin/sign_out");
+
+      await user.click(toggle);
+      expect(
+        container.querySelector("ul.dropdown-menu")
+      ).not.toBeInTheDocument();
+    });
+
+    it("labels the permission level in the account dropdown", async () => {
+      const user = userEvent.setup();
+      const openDropdownPermissions = async (admin: Admin) => {
+        const { container, unmount } = renderHeader({ admin });
+        const toggle = container.querySelector(
+          "button.account-dropdown-toggle"
+        ) as HTMLElement;
+        await user.click(toggle);
+        const text = container.querySelector(
+          "ul.dropdown-menu li.permissions"
+        )?.textContent;
+        unmount();
+        return text;
+      };
+
+      expect(
+        await openDropdownPermissions(
+          new Admin([{ role: "system", library: "nypl" }], "admin@nypl.org")
+        )
+      ).toBe("Logged in as a system admin");
+      expect(
+        await openDropdownPermissions(
+          new Admin([{ role: "manager", library: "nypl" }], "admin@nypl.org")
+        )
+      ).toBe("Logged in as an administrator");
+      expect(
+        await openDropdownPermissions(
+          new Admin([{ role: "librarian", library: "nypl" }], "admin@nypl.org")
+        )
+      ).toBe("Logged in as a user");
+    });
+  });
+
+  describe("connected (default export)", () => {
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("wires libraries from the store and fetches them on mount", async () => {
+      // The connected default export reads `libraries`/`isFetchingLibraries` from
+      // the redux store and dispatches `fetchLibraries` on mount, which hits the
+      // network — stub fetch so mounting settles without a real request.
+      const fetchSpy = jest.spyOn(globalThis, "fetch").mockResolvedValue(
+        new Response(JSON.stringify({ libraries: [] }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        })
+      );
+      const store = buildStore();
+
+      render(
+        <Provider store={store}>
+          <LegacyContextProvider
+            context={{
+              editorStore: store,
+              csrfToken: "token",
+              library: () => "nypl",
+              admin: libraryManager,
+              router: makeRouter(),
+            }}
+          >
+            <HeaderWithStore />
+          </LegacyContextProvider>
+        </Provider>
+      );
+
+      expect(
+        await screen.findByRole("heading", { level: 1 })
+      ).toHaveTextContent(title());
+      await waitFor(() => expect(fetchSpy).toHaveBeenCalledTimes(1));
+      expect(fetchSpy.mock.calls[0][0]).toContain("/admin/libraries");
+    });
+  });
+});