@thepalaceproject/circulation-admin 1.35.0 → 1.36.0-post.2

package/package.json

@@ -50,7 +50,7 @@
     "numeral": "^2.0.6",
     "opds-feed-parser": "0.0.17",
     "prop-types": "^15.7.2",
-    "qs": "^6.14.1",
+    "qs": "^6.14.2",
     "react": "^16.8.6",
     "react-beautiful-dnd": "^2.3.1",
     "react-bootstrap": "^0.32.4",
@@ -137,7 +137,7 @@
     "typedoc": "^0.27.9",
     "typescript": "^5.7.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.94.0",
+    "webpack": "^5.105.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.8.0"
@@ -152,5 +152,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.35.0"
+  "version": "1.36.0-post.2"
 }

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

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CollectionImportButton, {
+  CollectionImportButtonProps,
+} from "../../../src/components/CollectionImportButton";
+import { CollectionData, ProtocolData } from "../../../src/interfaces";
+
+const protocolWithImport: ProtocolData = {
+  name: "Boundless",
+  label: "Boundless",
+  supports_import: true,
+  settings: [],
+};
+
+const protocolWithoutImport: ProtocolData = {
+  name: "Overdrive",
+  label: "Overdrive",
+  supports_import: false,
+  settings: [],
+};
+
+const savedCollection: CollectionData = {
+  id: 42,
+  protocol: "Boundless",
+  name: "Test Collection",
+};
+
+const unsavedCollection: CollectionData = {
+  protocol: "Boundless",
+  name: "Unsaved Collection",
+};
+
+function renderButton(overrides: Partial<CollectionImportButtonProps> = {}) {
+  const defaultProps: CollectionImportButtonProps = {
+    collection: savedCollection,
+    protocols: [protocolWithImport, protocolWithoutImport],
+    importCollection: jest.fn().mockResolvedValue(undefined),
+    disabled: false,
+    ...overrides,
+  };
+  return {
+    ...render(<CollectionImportButton {...defaultProps} />),
+    importCollection: defaultProps.importCollection as jest.Mock,
+  };
+}
+
+/** Expand the collapsed Import panel by clicking its header. */
+async function expandPanel(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(screen.getByText("Import"));
+}
+
+describe("CollectionImportButton", () => {
+  it("does not render when protocol lacks supports_import", () => {
+    const collection: CollectionData = {
+      id: 1,
+      protocol: "Overdrive",
+      name: "OD Collection",
+    };
+    const { container } = renderButton({ collection });
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("does not render for unsaved collection (no id)", () => {
+    const { container } = renderButton({ collection: unsavedCollection });
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders panel header when supported", () => {
+    renderButton();
+    expect(screen.getByText("Import")).toBeInTheDocument();
+  });
+
+  it("renders button and checkbox when panel is expanded", async () => {
+    const user = userEvent.setup();
+    renderButton();
+    await expandPanel(user);
+    expect(
+      screen.getByRole("button", { name: "Queue Import" })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("checkbox")).toBeInTheDocument();
+    expect(screen.getByText("Force full re-import")).toBeInTheDocument();
+  });
+
+  it("checkbox toggles force state", async () => {
+    const user = userEvent.setup();
+    renderButton();
+    await expandPanel(user);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).not.toBeChecked();
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+    await user.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it("button triggers import with correct args (force=false)", async () => {
+    const user = userEvent.setup();
+    const { importCollection } = renderButton();
+    await expandPanel(user);
+    const button = screen.getByRole("button", { name: "Queue Import" });
+    await user.click(button);
+    expect(importCollection).toHaveBeenCalledWith(42, false);
+  });
+
+  it("button triggers import with force=true when checked", async () => {
+    const user = userEvent.setup();
+    const { importCollection } = renderButton();
+    await expandPanel(user);
+    const checkbox = screen.getByRole("checkbox");
+    await user.click(checkbox);
+    const button = screen.getByRole("button", { name: "Queue Import" });
+    await user.click(button);
+    expect(importCollection).toHaveBeenCalledWith(42, true);
+  });
+
+  it("shows success feedback with alert-success styling after import", async () => {
+    const user = userEvent.setup();
+    renderButton();
+    await expandPanel(user);
+    await user.click(screen.getByRole("button", { name: "Queue Import" }));
+    await waitFor(() => {
+      const feedback = screen.getByText("Import task queued.");
+      expect(feedback).toBeInTheDocument();
+      expect(feedback).toHaveClass("alert", "alert-success");
+    });
+  });
+
+  it("shows error feedback with alert-danger styling on failure", async () => {
+    const user = userEvent.setup();
+    const mockImport = jest
+      .fn()
+      .mockRejectedValue({ response: "Something went wrong" });
+    renderButton({ importCollection: mockImport });
+    await expandPanel(user);
+    await user.click(screen.getByRole("button", { name: "Queue Import" }));
+    await waitFor(() => {
+      const feedback = screen.getByText("Something went wrong");
+      expect(feedback).toBeInTheDocument();
+      expect(feedback).toHaveClass("alert", "alert-danger");
+    });
+  });
+
+  it("resets force checkbox and feedback when switching collections", async () => {
+    const user = userEvent.setup();
+    const { rerender, importCollection } = renderButton();
+    await expandPanel(user);
+
+    const checkbox = screen.getByRole("checkbox");
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+
+    await user.click(screen.getByRole("button", { name: "Queue Import" }));
+    await waitFor(() => {
+      expect(screen.getByText("Import task queued.")).toBeInTheDocument();
+    });
+
+    const nextCollection: CollectionData = {
+      id: 99,
+      protocol: "Boundless",
+      name: "Another Collection",
+    };
+    rerender(
+      <CollectionImportButton
+        collection={nextCollection}
+        protocols={[protocolWithImport, protocolWithoutImport]}
+        importCollection={importCollection}
+        disabled={false}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("checkbox")).not.toBeChecked();
+      expect(screen.queryByText("Import task queued.")).not.toBeInTheDocument();
+    });
+  });
+
+  it("disables button and checkbox when disabled prop is true", async () => {
+    const user = userEvent.setup();
+    renderButton({ disabled: true });
+    await expandPanel(user);
+    expect(screen.getByRole("button", { name: "Queue Import" })).toBeDisabled();
+    expect(screen.getByRole("checkbox")).toBeDisabled();
+  });
+
+  it("shows 'Queuing...' text while importing", async () => {
+    const user = userEvent.setup();
+    let resolveImport: () => void;
+    const pendingImport = new Promise<void>((resolve) => {
+      resolveImport = resolve;
+    });
+    const mockImport = jest.fn().mockReturnValue(pendingImport);
+    renderButton({ importCollection: mockImport });
+    await expandPanel(user);
+
+    await user.click(screen.getByRole("button", { name: "Queue Import" }));
+
+    expect(screen.getByRole("button", { name: "Queuing..." })).toBeDisabled();
+
+    resolveImport();
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Queue Import" })
+      ).toBeEnabled();
+    });
+  });
+});

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

@@ -0,0 +1,281 @@
+import * as React from "react";
+import { setupServer } from "msw/node";
+import { http, HttpResponse } from "msw";
+import { QueryClient } from "@tanstack/react-query";
+import { renderWithProviders } from "../testUtils/withProviders";
+import DebugAuthentication from "../../../src/components/DebugAuthentication";
+import {
+  AuthMethodsResponse,
+  PatronDebugResponse,
+} from "../../../src/api/patronDebug";
+import { waitFor, fireEvent } from "@testing-library/react";
+
+const LIBRARY = "test-library";
+const SECOND_LIBRARY = "another-library";
+const AUTH_METHODS_PATH = `/${LIBRARY}/admin/manage_patrons/auth_methods`;
+const DEBUG_AUTH_PATH = `/${LIBRARY}/admin/manage_patrons/debug_auth`;
+const SECOND_AUTH_METHODS_PATH = `/${SECOND_LIBRARY}/admin/manage_patrons/auth_methods`;
+
+const MOCK_AUTH_METHODS: AuthMethodsResponse = {
+  authMethods: [
+    {
+      id: 1,
+      name: "Test SIP2",
+      protocol: "api.sip",
+      supportsDebug: true,
+      supportsPassword: true,
+      identifierLabel: "Barcode",
+      passwordLabel: "PIN",
+    },
+    {
+      id: 2,
+      name: "SAML Provider",
+      protocol: "api.saml.provider",
+      supportsDebug: false,
+      supportsPassword: false,
+      identifierLabel: "Username",
+      passwordLabel: "Password",
+    },
+  ],
+};
+
+const MOCK_DEBUG_RESULTS: PatronDebugResponse = {
+  results: [
+    { label: "Server-Side Validation", success: true, details: "ok" },
+    {
+      label: "SIP2 Connection",
+      success: true,
+      details: "sip.example.com:6001",
+    },
+    {
+      label: "Password Validation",
+      success: false,
+      details: "valid_patron_password=N",
+    },
+  ],
+};
+
+describe("DebugAuthentication", () => {
+  /* eslint-disable @typescript-eslint/no-empty-function */
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+    logger: {
+      log: console.log,
+      warn: console.warn,
+      error: process.env.NODE_ENV === "test" ? () => {} : console.error,
+    },
+  });
+  /* eslint-enable @typescript-eslint/no-empty-function */
+
+  const server = setupServer(
+    http.get(AUTH_METHODS_PATH, () =>
+      HttpResponse.json(MOCK_AUTH_METHODS, { status: 200 })
+    ),
+    http.post(DEBUG_AUTH_PATH, () =>
+      HttpResponse.json(MOCK_DEBUG_RESULTS, { status: 200 })
+    )
+  );
+
+  beforeAll(() => server.listen());
+  afterEach(() => {
+    server.resetHandlers();
+    queryClient.clear();
+  });
+  afterAll(() => server.close());
+
+  const renderComponent = () => {
+    return renderWithProviders(
+      <DebugAuthentication library={LIBRARY} csrfToken="test-csrf-token" />,
+      { queryClient }
+    );
+  };
+
+  it("displays loading state initially", () => {
+    const { getByText } = renderComponent();
+    expect(getByText("Loading authentication methods...")).toBeInTheDocument();
+  });
+
+  it("renders auth method dropdown after loading", async () => {
+    const { getByLabelText, getByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByLabelText("Authentication Method")).toBeInTheDocument();
+    });
+    expect(getByText("Test SIP2 (api.sip)")).toBeInTheDocument();
+    expect(getByText("SAML Provider (api.saml.provider)")).toBeInTheDocument();
+  });
+
+  it("shows 'not supported' message for non-debug methods", async () => {
+    const { getByLabelText, getByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByLabelText("Authentication Method")).toBeInTheDocument();
+    });
+
+    fireEvent.change(getByLabelText("Authentication Method"), {
+      target: { value: "2" },
+    });
+
+    expect(
+      getByText(
+        "Debug authentication is not supported for this authentication method."
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("shows form fields for debug-capable method", async () => {
+    const { getByLabelText, getByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByLabelText("Authentication Method")).toBeInTheDocument();
+    });
+
+    fireEvent.change(getByLabelText("Authentication Method"), {
+      target: { value: "1" },
+    });
+
+    // Should show fields with the method's labels
+    expect(getByLabelText("Barcode")).toBeInTheDocument();
+    expect(getByLabelText("PIN")).toBeInTheDocument();
+    expect(getByText("Run Debug")).toBeInTheDocument();
+  });
+
+  it("runs debug and displays results", async () => {
+    const { getByLabelText, getByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByLabelText("Authentication Method")).toBeInTheDocument();
+    });
+
+    // Select the SIP2 method
+    fireEvent.change(getByLabelText("Authentication Method"), {
+      target: { value: "1" },
+    });
+
+    // Fill in the form
+    fireEvent.change(getByLabelText("Barcode"), {
+      target: { value: "12345" },
+    });
+    fireEvent.change(getByLabelText("PIN"), {
+      target: { value: "1111" },
+    });
+
+    // Submit
+    fireEvent.click(getByText("Run Debug"));
+
+    // Wait for results
+    await waitFor(() => {
+      expect(getByText("Server-Side Validation")).toBeInTheDocument();
+    });
+    expect(getByText("SIP2 Connection")).toBeInTheDocument();
+    expect(getByText("Password Validation")).toBeInTheDocument();
+  });
+
+  it("auto-selects and hides dropdown when there is only one method", async () => {
+    const singleMethod: AuthMethodsResponse = {
+      authMethods: [MOCK_AUTH_METHODS.authMethods[0]],
+    };
+    server.use(
+      http.get(AUTH_METHODS_PATH, () =>
+        HttpResponse.json(singleMethod, { status: 200 })
+      )
+    );
+
+    const { getByLabelText, queryByLabelText } = renderComponent();
+
+    // The form fields should appear automatically without selecting a method.
+    await waitFor(() => {
+      expect(getByLabelText("Barcode")).toBeInTheDocument();
+    });
+    expect(getByLabelText("PIN")).toBeInTheDocument();
+
+    // The dropdown should not be rendered.
+    expect(queryByLabelText("Authentication Method")).not.toBeInTheDocument();
+  });
+
+  it("reconciles selected method when switching to a different library", async () => {
+    const singleMethodForSecondLibrary: AuthMethodsResponse = {
+      authMethods: [
+        {
+          id: 99,
+          name: "Second Library API",
+          protocol: "api.second",
+          supportsDebug: true,
+          supportsPassword: false,
+          identifierLabel: "Email",
+          passwordLabel: "Password",
+        },
+      ],
+    };
+
+    server.use(
+      http.get(SECOND_AUTH_METHODS_PATH, () =>
+        HttpResponse.json(singleMethodForSecondLibrary, { status: 200 })
+      )
+    );
+
+    const {
+      getByLabelText,
+      queryByLabelText,
+      rerender,
+    } = renderWithProviders(
+      <DebugAuthentication library={LIBRARY} csrfToken="test-csrf-token" />,
+      { queryClient }
+    );
+
+    await waitFor(() => {
+      expect(getByLabelText("Authentication Method")).toBeInTheDocument();
+    });
+
+    fireEvent.change(getByLabelText("Authentication Method"), {
+      target: { value: "1" },
+    });
+    expect(getByLabelText("Barcode")).toBeInTheDocument();
+
+    rerender(
+      <DebugAuthentication
+        library={SECOND_LIBRARY}
+        csrfToken="test-csrf-token"
+      />
+    );
+
+    await waitFor(() => {
+      expect(getByLabelText("Email")).toBeInTheDocument();
+    });
+    expect(queryByLabelText("Authentication Method")).not.toBeInTheDocument();
+  });
+
+  it("shows warning when library has no auth methods", async () => {
+    server.use(
+      http.get(AUTH_METHODS_PATH, () =>
+        HttpResponse.json({ authMethods: [] }, { status: 200 })
+      )
+    );
+
+    const { getByText, queryByLabelText } = renderComponent();
+    await waitFor(() => {
+      expect(
+        getByText(
+          "This library has no patron authentication integrations configured."
+        )
+      ).toBeInTheDocument();
+    });
+    expect(queryByLabelText("Authentication Method")).not.toBeInTheDocument();
+  });
+
+  it("handles API error on fetching auth methods", async () => {
+    server.use(
+      http.get(AUTH_METHODS_PATH, () => new HttpResponse(null, { status: 500 }))
+    );
+
+    const { getByText } = renderComponent();
+    await waitFor(
+      () => {
+        expect(
+          getByText(/Error loading authentication methods/)
+        ).toBeInTheDocument();
+      },
+      { timeout: 5000 }
+    );
+  });
+});

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

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import DebugResultListItem from "../../../src/components/DebugResultListItem";
+import { PatronDebugResult } from "../../../src/api/patronDebug";
+
+describe("DebugResultListItem", () => {
+  const renderResult = (result: PatronDebugResult, sequence = 0) => {
+    return render(<DebugResultListItem result={result} sequence={sequence} />);
+  };
+
+  it("renders success result with string details", () => {
+    const result: PatronDebugResult = {
+      label: "SIP2 Connection",
+      success: true,
+      details: "Connected to server:6001",
+    };
+    const { getByText } = renderResult(result);
+    expect(getByText("SIP2 Connection")).toBeInTheDocument();
+    expect(getByText("passed")).toBeInTheDocument();
+    expect(getByText("Connected to server:6001")).toBeInTheDocument();
+  });
+
+  it("renders failure result with string details", () => {
+    const result: PatronDebugResult = {
+      label: "Password Validation",
+      success: false,
+      details: "Password does not match",
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("Password Validation")).toBeInTheDocument();
+    expect(getByText("failed")).toBeInTheDocument();
+    const li = container.querySelector("li");
+    expect(li).toHaveClass("failure");
+  });
+
+  it("renders success result with CSS class", () => {
+    const result: PatronDebugResult = {
+      label: "Step 1",
+      success: true,
+      details: null,
+    };
+    const { container } = renderResult(result);
+    const li = container.querySelector("li");
+    expect(li).toHaveClass("success");
+  });
+
+  it("renders null details without detail section", () => {
+    const result: PatronDebugResult = {
+      label: "Step 1",
+      success: true,
+      details: null,
+    };
+    const { container } = renderResult(result);
+    expect(container.querySelector(".debug-result-detail")).toBeNull();
+    expect(container.querySelector(".debug-result-table")).toBeNull();
+    expect(container.querySelector(".debug-result-list")).toBeNull();
+  });
+
+  it("renders list details as ordered list in panel", () => {
+    const result: PatronDebugResult = {
+      label: "Multi Result",
+      success: true,
+      details: ["item one", "item two", "item three"],
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("item one")).toBeInTheDocument();
+    expect(getByText("item two")).toBeInTheDocument();
+    expect(getByText("item three")).toBeInTheDocument();
+    const ol = container.querySelector(".debug-result-list");
+    expect(ol).toBeInTheDocument();
+  });
+
+  it("renders dict details as key-value table in panel", () => {
+    const result: PatronDebugResult = {
+      label: "Patron Data",
+      success: true,
+      details: {
+        username: "jdoe",
+        barcode: "12345",
+        fines: "0.00",
+      },
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("username")).toBeInTheDocument();
+    expect(getByText("jdoe")).toBeInTheDocument();
+    expect(getByText("barcode")).toBeInTheDocument();
+    expect(getByText("12345")).toBeInTheDocument();
+    const table = container.querySelector(".debug-result-table");
+    expect(table).toBeInTheDocument();
+  });
+
+  it("renders dict details with nested object values as JSON", () => {
+    const result: PatronDebugResult = {
+      label: "SirsiDynix Data",
+      success: true,
+      details: {
+        patronType: { key: "testtype", label: "Test Type" },
+        name: "Jane Doe",
+      },
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("patronType")).toBeInTheDocument();
+    // Nested object should render as pretty-printed JSON inside a <code> tag
+    const codeEl = container.querySelector(
+      "td.debug-result-value code"
+    ) as HTMLElement;
+    expect(codeEl).toBeInTheDocument();
+    expect(codeEl.textContent).toBe(
+      JSON.stringify({ key: "testtype", label: "Test Type" }, null, 2)
+    );
+    expect(getByText("name")).toBeInTheDocument();
+    expect(getByText("Jane Doe")).toBeInTheDocument();
+  });
+
+  it("renders top-level number details as text content", () => {
+    const result: PatronDebugResult = {
+      label: "Retry Count",
+      success: true,
+      details: 3,
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("Retry Count")).toBeInTheDocument();
+    expect(getByText("3")).toBeInTheDocument();
+    expect(container.querySelector(".debug-result-table")).toBeNull();
+  });
+
+  it("renders top-level boolean details as text content", () => {
+    const result: PatronDebugResult = {
+      label: "Eligibility",
+      success: false,
+      details: false,
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("Eligibility")).toBeInTheDocument();
+    expect(getByText("false")).toBeInTheDocument();
+    expect(container.querySelector(".debug-result-table")).toBeNull();
+  });
+
+  it("renders dict details with mixed value types (number, boolean, null)", () => {
+    const result: PatronDebugResult = {
+      label: "Mixed Data",
+      success: true,
+      details: {
+        username: "jdoe",
+        fines: 2.5,
+        active: true,
+        block_reason: null,
+      },
+    };
+    const { getByText, container } = renderResult(result);
+    expect(getByText("username")).toBeInTheDocument();
+    expect(getByText("jdoe")).toBeInTheDocument();
+    expect(getByText("fines")).toBeInTheDocument();
+    expect(getByText("2.5")).toBeInTheDocument();
+    expect(getByText("active")).toBeInTheDocument();
+    expect(getByText("true")).toBeInTheDocument();
+    expect(getByText("block_reason")).toBeInTheDocument();
+    expect(getByText("null")).toBeInTheDocument();
+    const table = container.querySelector(".debug-result-table");
+    expect(table).toBeInTheDocument();
+  });
+});