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

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

@@ -0,0 +1,143 @@
+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";
+
+// Both tab panels fetch on mount (ResetAdobeId is a connected component; Debug
+// Authentication uses react-query). They're incidental to a tab-navigation test,
+// so mock them to markers. ResetAdobeId echoes the csrfToken asserted below.
+jest.mock("../../../src/components/ResetAdobeId", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="reset-adobe-id" data-csrf-token={props.csrfToken} />
+  ),
+}));
+jest.mock("../../../src/components/DebugAuthentication", () => ({
+  __esModule: true,
+  default: () => <div data-testid="debug-authentication" />,
+}));
+
+import ManagePatronsTabContainer from "../../../src/components/ManagePatronsTabContainer";
+
+// ManagePatronsTabContainer reads `admin`, `router`, and `pathFor` 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("ManagePatronsTabContainer", () => {
+  const systemAdmin = new Admin([{ role: "system" }]);
+  const libraryManagerNYPL = new Admin([{ role: "manager", library: "NYPL" }]);
+  const libraryManagerA = new Admin([{ role: "manager", library: "a" }]);
+  const librarian = new Admin([{ role: "librarian", library: "NYPL" }]);
+
+  const renderWithAdmin = (admin: Admin, push: jest.Mock = jest.fn()) => {
+    const context = { router: { push }, pathFor: jest.fn(), admin };
+    const result = render(
+      <LegacyContextProvider context={context}>
+        <ManagePatronsTabContainer
+          tab={null}
+          csrfToken="token"
+          store={buildStore()}
+          library="NYPL"
+        />
+      </LegacyContextProvider>
+    );
+    return { ...result, push };
+  };
+
+  describe("for system admin", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(systemAdmin);
+      expect(
+        screen.getByRole("link", { name: "Reset Adobe ID" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("link", { name: "Debug Authentication" })
+      ).toBeInTheDocument();
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(systemAdmin);
+      expect(screen.getByTestId("reset-adobe-id")).toHaveAttribute(
+        "data-csrf-token",
+        "token"
+      );
+    });
+
+    it("uses router to navigate when tab is clicked", async () => {
+      const user = userEvent.setup();
+      const { push } = renderWithAdmin(systemAdmin);
+      await user.click(screen.getByRole("link", { name: "Reset Adobe ID" }));
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenCalledWith("/admin/web/patrons/NYPL/resetAdobeId");
+    });
+  });
+
+  describe("for right library manager", () => {
+    it("shows tabs", () => {
+      renderWithAdmin(libraryManagerNYPL);
+      expect(
+        screen.getByRole("link", { name: "Reset Adobe ID" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("link", { name: "Debug Authentication" })
+      ).toBeInTheDocument();
+    });
+
+    it("marks the current tab as active", () => {
+      const { container } = renderWithAdmin(libraryManagerNYPL);
+      const tabItems = container.querySelectorAll("ul.nav-tabs li");
+      expect(tabItems).toHaveLength(2);
+      expect(tabItems[0]).toHaveClass("active");
+    });
+
+    it("shows components", () => {
+      renderWithAdmin(libraryManagerNYPL);
+      expect(screen.getByTestId("reset-adobe-id")).toHaveAttribute(
+        "data-csrf-token",
+        "token"
+      );
+    });
+
+    it("uses router to navigate when tab is clicked", async () => {
+      const user = userEvent.setup();
+      const { push } = renderWithAdmin(libraryManagerNYPL);
+      await user.click(screen.getByRole("link", { name: "Reset Adobe ID" }));
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenCalledWith("/admin/web/patrons/NYPL/resetAdobeId");
+    });
+  });
+
+  describe("for wrong library manager", () => {
+    it("doesn't show tabs", () => {
+      renderWithAdmin(libraryManagerA);
+      expect(
+        screen.queryByRole("link", { name: "Reset Adobe ID" })
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("for librarian", () => {
+    it("doesn't show tabs", () => {
+      renderWithAdmin(librarian);
+      expect(
+        screen.queryByRole("link", { name: "Reset Adobe ID" })
+      ).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { screen, within } from "@testing-library/react";
+import { MetadataServices } from "../../../src/components/MetadataServices";
+import renderWithContext from "../testUtils/renderWithContext";
+import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+
+describe("MetadataServices", () => {
+  const data = {
+    metadata_services: [
+      {
+        id: 2,
+        protocol: "test protocol",
+        name: "sample name",
+        settings: {
+          test_setting: "test setting",
+        },
+        libraries: [{ short_name: "nypl" }],
+      },
+    ],
+    protocols: [
+      {
+        name: "test protocol",
+        label: "test protocol label",
+        sitewide: false,
+        settings: [],
+      },
+    ],
+    allLibraries: [
+      {
+        short_name: "nypl",
+      },
+    ],
+  };
+
+  const config = { csrfToken: "token", featureFlags: defaultFeatureFlags };
+
+  it("shows metadata service list", () => {
+    renderWithContext(
+      <MetadataServices
+        data={data}
+        fetchData={jest.fn()}
+        editItem={jest.fn().mockResolvedValue(undefined)}
+        csrfToken="token"
+        isFetching={false}
+      />,
+      config
+    );
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent("sample name: test protocol");
+
+    const editLink = within(items[0]).getByRole("link");
+    expect(editLink).toHaveAttribute(
+      "href",
+      "/admin/web/config/metadata/edit/2"
+    );
+  });
+});

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

@@ -612,7 +612,9 @@ describe("PatronBlockingRulesEditor", () => {
   });
 
   it("disables all editing inputs and buttons when disabled prop is true", () => {
-    renderEditor(<PatronBlockingRulesEditor value={existingRules} disabled={true} />);
+    renderEditor(
+      <PatronBlockingRulesEditor value={existingRules} disabled={true} />
+    );
 
     // The Help button stays enabled even in disabled mode (read-only affordance).
     const editingButtons = screen

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+
+import PatronInfo from "../../../src/components/PatronInfo";
+import { PatronData } from "../../../src/interfaces";
+
+const patrons: PatronData[] = [
+  {
+    authorization_expires: "",
+    username: "User Name",
+    personal_name: "Personal Name",
+    email_address: "user@email.com",
+    authorization_identifier: "1234",
+    authorization_identifiers: [""],
+    block_reason: "",
+    external_type: "",
+    fines: "",
+    permanent_id: "",
+  },
+  {
+    authorization_expires: "",
+    personal_name: "Personal Name2",
+    authorization_identifier: "5678",
+    authorization_identifiers: [""],
+    block_reason: "",
+    external_type: "",
+    fines: "",
+    permanent_id: "",
+  },
+];
+
+describe("PatronInfo", () => {
+  it("should display the patron's information", () => {
+    const { container } = render(<PatronInfo patron={patrons[0]} />);
+
+    const items = container.querySelectorAll("ul.patron-data-list > li");
+    expect(items).toHaveLength(4);
+    expect(items[0]).toHaveTextContent("Username:User Name");
+    expect(items[1]).toHaveTextContent("Personal Name:Personal Name");
+    expect(items[2]).toHaveTextContent("Email Address:user@email.com");
+    expect(items[3]).toHaveTextContent("Identifier:1234");
+  });
+
+  it("should update the patron's information if a new patron was searched and found", () => {
+    const { container, rerender } = render(<PatronInfo patron={patrons[0]} />);
+
+    rerender(<PatronInfo patron={patrons[1]} />);
+
+    const items = container.querySelectorAll("ul.patron-data-list > li");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent("Personal Name:Personal Name2");
+    expect(items[1]).toHaveTextContent("Identifier:5678");
+  });
+});

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { render, screen, fireEvent, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import ProtocolFormField from "../../../src/components/ProtocolFormField";
+import { MONOSPACE_FONT_STACK } from "../../../src/fonts";
 
 // NB: This file adds / duplicates existing tests from:
 // - `src/components/__tests__/ProtocolFormField-test.tsx`.
@@ -64,6 +65,41 @@ describe("ProtocolFormField — json type", () => {
   });
 });
 
+describe("ProtocolFormField — use_monospace_font", () => {
+  (
+    [
+      { id: "text-input", use_monospace_font: true, hasStyle: true },
+      {
+        id: "textarea",
+        type: "textarea",
+        use_monospace_font: true,
+        hasStyle: true,
+      },
+      { id: "absent", hasStyle: false },
+    ] as {
+      id: string;
+      type?: string;
+      use_monospace_font?: boolean;
+      hasStyle: boolean;
+    }[]
+  ).forEach(({ id, type, use_monospace_font, hasStyle }) => {
+    it(id, () => {
+      render(
+        <ProtocolFormField
+          setting={{ key: "f", label: "My Field", type, use_monospace_font }}
+          disabled={false}
+        />
+      );
+      const el = screen.getByLabelText("My Field");
+      if (hasStyle) {
+        expect(el).toHaveStyle({ fontFamily: MONOSPACE_FONT_STACK });
+      } else {
+        expect(el).not.toHaveStyle({ fontFamily: MONOSPACE_FONT_STACK });
+      }
+    });
+  });
+});
+
 describe("ProtocolFormField", () => {
   it("renders date-picker setting", async () => {
     const user = userEvent.setup();

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import SaveButton from "../../../src/components/SaveButton";
+
+describe("SaveButton", () => {
+  it("says 'Save' when given no text", () => {
+    render(<SaveButton disabled={false} submit={jest.fn()} />);
+
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+  });
+
+  it("displays the text it is given", () => {
+    render(
+      <SaveButton
+        disabled={false}
+        submit={jest.fn()}
+        text="some other string"
+      />
+    );
+
+    expect(
+      screen.getByRole("button", { name: "some other string" })
+    ).toBeInTheDocument();
+  });
+
+  it("submits when clicked", async () => {
+    const user = userEvent.setup();
+    const submit = jest.fn();
+    render(<SaveButton disabled={false} submit={submit} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(submit).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when disabled", async () => {
+    const user = userEvent.setup();
+    const submit = jest.fn();
+    render(<SaveButton disabled={true} submit={submit} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(submit).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,164 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import SelfTestResult from "../../../src/components/SelfTestResult";
+import { SelfTestsResult } from "../../../src/interfaces";
+
+const stringResult: SelfTestsResult = {
+  duration: 0,
+  end: "",
+  name: "Test Result",
+  result: "abc",
+  start: "",
+  success: true,
+};
+
+describe("SelfTestResult", () => {
+  it("displays a result with a string", () => {
+    const { container } = render(
+      <SelfTestResult result={stringResult} isFetching={false} />
+    );
+
+    expect(container.querySelector("li")).toHaveClass("success");
+
+    expect(screen.getByRole("heading", { level: 4 })).toHaveTextContent(
+      "Test Result"
+    );
+
+    const testResult = container.querySelector("pre");
+    expect(testResult).toHaveClass("result-description");
+    expect(testResult).toHaveTextContent("abc");
+
+    expect(screen.getByText("success: true")).toHaveClass(
+      "success-description"
+    );
+
+    // A single-line string result is not shown in a collapsible panel.
+    expect(container.querySelector(".panel")).not.toBeInTheDocument();
+  });
+
+  it("displays a result with a multi-line string", () => {
+    const longStringResult: SelfTestsResult = {
+      ...stringResult,
+      result: "abc \n def",
+    };
+    const { container } = render(
+      <SelfTestResult result={longStringResult} isFetching={false} />
+    );
+
+    const panel = container.querySelector(".panel");
+    expect(panel).toBeInTheDocument();
+    expect(panel).toHaveClass("panel-success");
+    expect(screen.getByText("Results")).toBeInTheDocument();
+
+    expect(container.querySelector("pre")?.textContent).toBe("abc \n def");
+  });
+
+  it("displays a result with an array", () => {
+    const arrayResult: SelfTestsResult = {
+      ...stringResult,
+      result: ["Thing 1", "Thing 2"],
+    };
+    const { container } = render(
+      <SelfTestResult result={arrayResult} isFetching={false} />
+    );
+
+    const panel = container.querySelector(".panel");
+    expect(panel).toBeInTheDocument();
+    expect(panel).toHaveClass("panel-success");
+    expect(screen.getByText("Results (2)")).toBeInTheDocument();
+
+    const items = container.querySelectorAll("ol li");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent("Thing 1");
+    expect(items[1]).toHaveTextContent("Thing 2");
+  });
+
+  it("displays a result with an empty array", () => {
+    const emptyArrayResult: SelfTestsResult = { ...stringResult, result: [] };
+    const { container } = render(
+      <SelfTestResult result={emptyArrayResult} isFetching={false} />
+    );
+
+    expect(container.querySelector(".panel")).not.toBeInTheDocument();
+    expect(
+      screen.getByText("The test ran successfully, but no results were found.")
+    ).toHaveClass("warning");
+  });
+
+  it("displays a result with an exception", () => {
+    const exceptionResult: SelfTestsResult = {
+      ...stringResult,
+      success: false,
+      exception: { class: "IntegrationException", message: "Problem!" },
+    };
+    const { container } = render(
+      <SelfTestResult result={exceptionResult} isFetching={false} />
+    );
+
+    expect(container.querySelector("li")).toHaveClass("failure");
+    expect(screen.getByText("success: false")).toHaveClass(
+      "success-description"
+    );
+    expect(screen.getByText("exception: Problem!")).toHaveClass(
+      "exception-description"
+    );
+  });
+
+  it("displays debug_message when present", () => {
+    const exceptionResult: SelfTestsResult = {
+      ...stringResult,
+      success: false,
+      exception: {
+        class: "IntegrationException",
+        debug_message: "debug message...",
+        message: "Problem!",
+      },
+    };
+    render(<SelfTestResult result={exceptionResult} isFetching={false} />);
+
+    expect(screen.getByText("debug: debug message...")).toHaveClass(
+      "debug-description"
+    );
+  });
+
+  it("does not display debug_message when it is empty", () => {
+    const exceptionResult: SelfTestsResult = {
+      ...stringResult,
+      success: false,
+      exception: {
+        class: "IntegrationException",
+        debug_message: "",
+        message: "Problem!",
+      },
+    };
+    const { container } = render(
+      <SelfTestResult result={exceptionResult} isFetching={false} />
+    );
+
+    expect(
+      container.querySelector(".exception-description")
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".debug-description")
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not display debug_message when it is absent", () => {
+    const exceptionResult: SelfTestsResult = {
+      ...stringResult,
+      success: false,
+      exception: { class: "IntegrationException", message: "Problem!" },
+    };
+    const { container } = render(
+      <SelfTestResult result={exceptionResult} isFetching={false} />
+    );
+
+    expect(
+      container.querySelector(".exception-description")
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".debug-description")
+    ).not.toBeInTheDocument();
+  });
+});