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

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

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { DiscoveryServicesData } from "../../../src/interfaces";
+import ServiceWithRegistrationsEditForm from "../../../src/components/ServiceWithRegistrationsEditForm";
+
+// `ServiceWithRegistrationsEditForm` is generic/abstract over its data type;
+// the legacy test subclassed it to bind the discovery-services data type.
+class DiscoveryServiceEditForm extends ServiceWithRegistrationsEditForm<DiscoveryServicesData> {}
+
+const serviceData = {
+  id: 1,
+  protocol: "protocol 1",
+};
+const protocolsData = [
+  {
+    name: "protocol 1",
+    label: "protocol 1 label",
+    supports_registration: true,
+    settings: [],
+    library_settings: [],
+  },
+];
+const allLibraries = [
+  { short_name: "nypl", name: "New York Public Library" },
+  { short_name: "bpl", name: "Brooklyn Public Library" },
+  { short_name: "qpl", name: "Queens Public Library" },
+];
+const libraryRegistrationsData = [
+  {
+    id: 1,
+    libraries: [
+      { short_name: "nypl", status: "success", stage: "production" },
+      { short_name: "bpl", status: "failure", stage: "testing" },
+    ],
+  },
+];
+const servicesData: any = {
+  discovery_services: [serviceData],
+  protocols: protocolsData,
+  allLibraries: allLibraries,
+  libraryRegistrations: libraryRegistrationsData,
+};
+
+const renderForm = (save = jest.fn()) =>
+  render(
+    <DiscoveryServiceEditForm
+      disabled={false}
+      data={servicesData}
+      item={serviceData as any}
+      save={save}
+      urlBase="url base"
+      listDataKey="discovery_services"
+    />
+  );
+
+describe("ServiceWithRegistrationsEditForm", () => {
+  it("renders the underlying service edit form fields", () => {
+    renderForm();
+
+    // The base ServiceEditForm (via `super.render()`) contributes the Name text
+    // field and the Required Fields section.
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Required Fields" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders a registration section reflecting each library's status", () => {
+    renderForm();
+
+    // The registration UI only renders when the protocol supports registration
+    // and the data carries libraries — i.e. those props flowed to LibraryRegistration.
+    expect(
+      screen.getByRole("heading", { name: "Register libraries" })
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("link", { name: "New York Public Library" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Brooklyn Public Library" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Queens Public Library" })
+    ).toBeInTheDocument();
+
+    // Statuses come from `data.libraryRegistrations`.
+    expect(screen.getByText("Registered")).toHaveClass("bg-success");
+    expect(screen.getByText("Registration failed")).toHaveClass("bg-danger");
+    expect(screen.getByText("Not registered")).toHaveClass("bg-warning");
+  });
+
+  it("enables the per-library registration actions when not disabled", () => {
+    renderForm();
+
+    // `disabled={false}` flows through to each registration button.
+    const updateButton = screen.getByRole("button", {
+      name: "Update registration",
+    });
+    const retryButton = screen.getByRole("button", {
+      name: "Retry registration",
+    });
+    const registerButton = screen.getByRole("button", { name: "Register" });
+
+    expect(updateButton).not.toBeDisabled();
+    expect(retryButton).not.toBeDisabled();
+    expect(registerButton).not.toBeDisabled();
+  });
+});

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import SetupPage from "../../../src/components/SetupPage";
+
+describe("SetupPage", () => {
+  beforeEach(() => {
+    // SetupPage renders the connected IndividualAdmins list, which fetches the
+    // admin list on mount. Stub fetch so mounting does not hit the network.
+    jest.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ individualAdmins: [] }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      })
+    );
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the individual-admins setup (create) form", async () => {
+    renderWithProviders(<SetupPage />);
+
+    // SetupPage wires IndividualAdmins with settingUp + editOrCreate="create".
+    // That combination renders the "Welcome!" heading and the
+    // "Set up your system admin account" create-form heading; their presence in
+    // the real DOM proves the child received those props (the original shallow
+    // test asserted the props directly). No identifier is passed, so there is no
+    // per-item "Edit ..." heading — only the create form shows.
+    expect(
+      await screen.findByRole("heading", { name: "Welcome!" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        name: "Set up your system admin account",
+      })
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import SingleStatListItem, {
+  SingleStatListItemProps,
+} from "../../../src/components/SingleStatListItem";
+
+describe("SingleStatListItem", () => {
+  const statWithTooltip: SingleStatListItemProps = {
+    label: "Number of Widgets",
+    value: 357892,
+    tooltip: "Total Widget Count",
+  };
+  const humanReadableValue = "357.9k";
+  const formattedValue = "357,892";
+
+  it("renders a top-level <li>, with or without a tooltip", () => {
+    const { container, rerender } = render(
+      <SingleStatListItem {...statWithTooltip} />
+    );
+    expect(container.firstElementChild?.tagName).toBe("LI");
+    expect(container.firstElementChild).toHaveClass("single-stat");
+
+    // Without a tooltip the <li> is still the top-level element.
+    rerender(
+      <SingleStatListItem
+        label={statWithTooltip.label}
+        value={statWithTooltip.value}
+      />
+    );
+    expect(container.firstElementChild?.tagName).toBe("LI");
+    expect(container.firstElementChild).toHaveClass("single-stat");
+  });
+
+  it("shows a tooltip wrapping the value and label when one is provided", () => {
+    const { container } = render(<SingleStatListItem {...statWithTooltip} />);
+
+    const tooltip = container.querySelector('[data-toggle="tooltip"]');
+    expect(tooltip).not.toBeNull();
+
+    const title = tooltip?.getAttribute("title") ?? "";
+    expect(title).toContain(statWithTooltip.tooltip);
+    expect(title).toContain(formattedValue);
+
+    // When there's a tooltip, it wraps the (rounded) value and the label.
+    expect(tooltip).toHaveTextContent(humanReadableValue);
+    expect(tooltip).toHaveTextContent(statWithTooltip.label);
+  });
+
+  it("omits the tooltip when none is provided, showing value and label directly", () => {
+    const { container } = render(
+      <SingleStatListItem
+        label={statWithTooltip.label}
+        value={statWithTooltip.value}
+      />
+    );
+
+    expect(container.querySelector('[data-toggle="tooltip"]')).toBeNull();
+    expect(screen.getByText(humanReadableValue)).toBeInTheDocument();
+    expect(screen.getByText(statWithTooltip.label)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { installFormDataShim, FormDataShim } from "../testUtils/formDataShim";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised. The panel fetches its announcements on mount; the fetched data
+// flows back in through the Redux store.
+import SitewideAnnouncements from "../../../src/components/SitewideAnnouncements";
+
+const data = {
+  announcements: [
+    {
+      id: "dcf036d9-106b-426c-838f-ce7c57d53801",
+      content: "There is nothing to see here.",
+      start: "2022-08-31",
+      finish: "2022-10-31",
+    },
+  ],
+  settings: [
+    {
+      category: "Announcements",
+      description: "Announcements will be displayed to authenticated patrons.",
+      key: "global_announcements",
+      label: "Scheduled announcements",
+      level: 3,
+      type: "announcements",
+    },
+  ],
+};
+installFormDataShim();
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+const renderConnected = (
+  element: React.ReactElement,
+  appConfigSettings: Record<string, unknown> = {}
+) =>
+  renderWithProviders(element, {
+    reduxProviderProps: { store: buildStore() },
+    appConfigSettings,
+  });
+
+describe("SitewideAnnouncements", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders a form containing the announcements section", async () => {
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => jsonResponse(data));
+    const { container } = renderConnected(
+      <SitewideAnnouncements csrfToken="token" />
+    );
+
+    // Once the on-mount fetch resolves, the form renders with the announcement
+    // supplied through the store (proving the AnnouncementsSection received the
+    // data as its value).
+    expect(
+      await screen.findByText("There is nothing to see here.")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Scheduled Announcements:")).toBeInTheDocument();
+    expect(container.querySelector("form")).toBeInTheDocument();
+  });
+
+  it("renders a loading indicator instead of a form while data is loading", () => {
+    // A never-resolving fetch keeps the panel in its fetching state.
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(() => new Promise(() => {}));
+    const { container } = renderConnected(
+      <SitewideAnnouncements csrfToken="token" />
+    );
+
+    expect(container.querySelector(".loading")).toBeInTheDocument();
+    expect(container.querySelector("form")).not.toBeInTheDocument();
+  });
+
+  it("submits the announcements to editItem when the form is submitted", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (_url, opts?: RequestInit) => {
+        if (opts?.method === "POST") {
+          return new Response("success", { status: 200 });
+        }
+        return jsonResponse(data);
+      });
+
+    // System admin so the settings' required permission level is satisfied and
+    // the submit button is enabled.
+    renderConnected(<SitewideAnnouncements csrfToken="token" />, {
+      roles: [{ role: "system" }],
+    });
+
+    await screen.findByText("There is nothing to see here.");
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    // The submit dispatches editSitewideAnnouncements, which POSTs the form.
+    await waitFor(() => {
+      const postCall = fetchSpy.mock.calls.find(
+        ([, opts]) => (opts as RequestInit)?.method === "POST"
+      );
+      expect(postCall).toBeDefined();
+    });
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    const body = (postCall[1] as RequestInit).body as unknown as FormDataShim;
+    expect(JSON.parse(body.get("announcements"))).toStrictEqual(
+      data.announcements
+    );
+  });
+
+  it("disables the submit button when the admin lacks the required permission level", async () => {
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => jsonResponse(data));
+    // No roles => admin level 1, below the settings' required level of 3.
+    renderConnected(<SitewideAnnouncements csrfToken="token" />);
+
+    await screen.findByText("There is nothing to see here.");
+    expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+  });
+});

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

@@ -28,13 +28,6 @@ const normalizedData = normalizeStatistics(statisticsApiResponseData);
 global.ResizeObserver = require("resize-observer-polyfill");
 
 describe("Dashboard Statistics", () => {
-  // NB: This adds test to the already existing tests in:
-  // - `src/components/__tests__/LibraryStats-test.tsx`.
-  // - `src/components/__tests__/SingleStatListItem-test.tsx`.
-  //
-  // Those tests should eventually be migrated here and
-  // adapted to the Jest/React Testing Library paradigm.
-
   // Configure standard constructors so that RTK Query works in tests with FetchMockJest
   Object.assign(fetchMock.config, {
     fetch,
@@ -382,14 +375,10 @@ describe("Dashboard Statistics", () => {
             roles,
             quicksightPagePath: fakeQuickSightHref,
           };
-          const {
-            container,
-            getByRole,
-            queryByRole,
-            queryByText,
-          } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
-            appConfigSettings,
-          });
+          const { container, getByRole, queryByRole, queryByText } =
+            renderWithProviders(<Stats library={sampleLibraryKey} />, {
+              appConfigSettings,
+            });
 
           // We should always render a Usage reports group when a library is specified.
           getByRole("heading", {

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {
+  TabContainer,
+  TabContainerProps,
+} from "../../../src/components/TabContainer";
+
+describe("TabContainer", () => {
+  let handleSelectSpy: jest.Mock;
+
+  // A concrete subclass of the abstract TabContainer, mirroring the legacy test's
+  // MockTabContainer: it supplies two trivial tabs and records the selected tab
+  // key when handleSelect runs.
+  class MockTabContainer extends TabContainer<TabContainerProps> {
+    handleSelect(event) {
+      handleSelectSpy(event.target.dataset.tabkey);
+    }
+    tabs() {
+      return {
+        tab1: <div className="tab1" />,
+        tab2: <div className="tab2" />,
+      };
+    }
+  }
+
+  const renderContainer = (tab: string = null) =>
+    render(
+      <MockTabContainer tab={tab} csrfToken="token">
+        <div className="test-child">Moby Dick</div>
+      </MockTabContainer>
+    );
+
+  beforeEach(() => {
+    handleSelectSpy = jest.fn();
+  });
+
+  it("shows nav tabs", () => {
+    const { container } = renderContainer();
+    const items = container.querySelectorAll("ul.nav-tabs li");
+    const linkTexts = Array.from(items).map((li) => li.textContent);
+    expect(linkTexts).toContain("Tab1");
+    expect(linkTexts).toContain("Tab2");
+    expect(items[0]).toHaveClass("active");
+    expect(items[1]).not.toHaveClass("active");
+  });
+
+  it("shows default tab content", () => {
+    const { container } = renderContainer();
+    expect(container.querySelector("#tab1")).toHaveStyle({ display: "block" });
+    expect(container.querySelector("#tab2")).toHaveStyle({ display: "none" });
+  });
+
+  it("shows tab content from tab in props", () => {
+    const { container } = renderContainer("tab2");
+    expect(container.querySelector("#tab1")).toHaveStyle({ display: "none" });
+    expect(container.querySelector("#tab2")).toHaveStyle({ display: "block" });
+  });
+
+  it("uses handleSelect to navigate when tab is clicked", async () => {
+    const user = userEvent.setup();
+    renderContainer();
+    await user.click(screen.getByRole("link", { name: "Tab2" }));
+    expect(handleSelectSpy).toHaveBeenCalledTimes(1);
+    expect(handleSelectSpy).toHaveBeenCalledWith("tab2");
+  });
+});

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

@@ -0,0 +1,218 @@
+import * as React from "react";
+import { render, screen, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import TextWithEditMode from "../../../src/components/TextWithEditMode";
+
+describe("TextWithEditMode", () => {
+  it("renders text", () => {
+    const { rerender } = render(
+      <TextWithEditMode
+        text="test"
+        placeholder="editable thing"
+        aria-label="label"
+      />
+    );
+    expect(screen.getByText("test")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Edit editable thing/ })
+    ).toBeInTheDocument();
+
+    rerender(
+      <TextWithEditMode
+        text="other text"
+        placeholder="editable thing"
+        aria-label="label"
+      />
+    );
+    expect(screen.queryByText("test")).not.toBeInTheDocument();
+    expect(screen.getByText("other text")).toBeInTheDocument();
+  });
+
+  it("starts in edit mode if there's no text", () => {
+    render(
+      <TextWithEditMode placeholder="editable thing" aria-label="label" />
+    );
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("placeholder", "editable thing");
+    expect(input).toHaveValue("");
+    expect(
+      screen.getByRole("button", { name: /Save editable thing/ })
+    ).toBeInTheDocument();
+  });
+
+  it("switches to edit mode", async () => {
+    const user = userEvent.setup();
+    render(
+      <TextWithEditMode
+        text="test"
+        placeholder="editable thing"
+        aria-label="label"
+      />
+    );
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole("button", { name: /Edit editable thing/ })
+    );
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("placeholder", "editable thing");
+    expect(input).toHaveValue("test");
+    expect(screen.getByRole("button", { name: /Save/ })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /Edit/ })
+    ).not.toBeInTheDocument();
+  });
+
+  it("switches out of edit mode", async () => {
+    const user = userEvent.setup();
+    const onUpdate = jest.fn();
+    render(
+      <TextWithEditMode
+        placeholder="editable thing"
+        onUpdate={onUpdate}
+        aria-label="label"
+      />
+    );
+    // Type the new value into the field; the component reads the real input
+    // value back through its ref on save (no prototype stubbing).
+    await user.type(screen.getByRole("textbox"), "new value");
+    await user.click(
+      screen.getByRole("button", { name: /Save editable thing/ })
+    );
+
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledWith("new value");
+    expect(screen.getByText("new value")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Edit/ })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /Save/ })
+    ).not.toBeInTheDocument();
+  });
+
+  it("gets text via the ref API", async () => {
+    const user = userEvent.setup();
+    // In display mode, getText() returns the current text.
+    const displayRef = React.createRef<TextWithEditMode>();
+    const { unmount } = render(
+      <TextWithEditMode
+        text="test"
+        placeholder="editable thing"
+        aria-label="label"
+        ref={displayRef}
+      />
+    );
+    expect(displayRef.current!.getText()).toBe("test");
+    unmount();
+
+    // From edit mode, getText() returns the current input value and exits edit mode.
+    const editRef = React.createRef<TextWithEditMode>();
+    render(
+      <TextWithEditMode
+        placeholder="editable thing"
+        aria-label="label"
+        ref={editRef}
+      />
+    );
+    await user.type(screen.getByRole("textbox"), "new value");
+    let value = "";
+    act(() => {
+      value = editRef.current!.getText();
+    });
+    expect(value).toBe("new value");
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+  });
+
+  it("resets via the ref API", async () => {
+    const user = userEvent.setup();
+    const onUpdate = jest.fn();
+
+    // With no text prop, reset() returns to a blank edit mode.
+    const blankRef = React.createRef<TextWithEditMode>();
+    const { unmount } = render(
+      <TextWithEditMode
+        placeholder="editable thing"
+        onUpdate={onUpdate}
+        aria-label="label"
+        ref={blankRef}
+      />
+    );
+    await user.type(screen.getByRole("textbox"), "new value");
+    await user.click(
+      screen.getByRole("button", { name: /Save editable thing/ })
+    );
+    expect(screen.getByText("new value")).toBeInTheDocument();
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      blankRef.current!.reset();
+    });
+    expect(screen.queryByText("new value")).not.toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+    expect(onUpdate).toHaveBeenCalledTimes(2);
+    expect(onUpdate.mock.calls[1][0]).toBeUndefined();
+    unmount();
+
+    // With a text prop, reset() returns to displaying that text.
+    const textRef = React.createRef<TextWithEditMode>();
+    render(
+      <TextWithEditMode
+        text="test"
+        placeholder="editable thing"
+        onUpdate={onUpdate}
+        aria-label="label"
+        ref={textRef}
+      />
+    );
+    await user.click(
+      screen.getByRole("button", { name: /Edit editable thing/ })
+    );
+    const input = screen.getByRole("textbox");
+    await user.clear(input);
+    await user.type(input, "new value");
+    await user.click(
+      screen.getByRole("button", { name: /Save editable thing/ })
+    );
+    expect(screen.queryByText("test")).not.toBeInTheDocument();
+    expect(screen.getByText("new value")).toBeInTheDocument();
+    expect(onUpdate).toHaveBeenCalledTimes(3);
+
+    act(() => {
+      textRef.current!.reset();
+    });
+    expect(screen.queryByText("new value")).not.toBeInTheDocument();
+    expect(screen.getByText("test")).toBeInTheDocument();
+    expect(onUpdate).toHaveBeenCalledTimes(4);
+    expect(onUpdate.mock.calls[3][0]).toBe("test");
+  });
+
+  it("optionally disables the save button if the text is blank", async () => {
+    const user = userEvent.setup();
+    render(
+      <TextWithEditMode
+        placeholder="editable thing"
+        aria-label="label"
+        disableIfBlank
+      />
+    );
+    const saveButton = screen.getByRole("button", {
+      name: /Save editable thing/,
+    });
+    expect(saveButton).toBeDisabled();
+
+    await user.type(screen.getByRole("textbox"), "test");
+    expect(saveButton).toBeEnabled();
+  });
+
+  it("updates the displayed value as the user types", async () => {
+    const user = userEvent.setup();
+    render(
+      <TextWithEditMode placeholder="editable thing" aria-label="label" />
+    );
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveValue("");
+    await user.type(input, "test");
+    expect(input).toHaveValue("test");
+  });
+});