@thepalaceproject/circulation-admin 1.35.0-post.3 → 1.35.0-post.4

package/package.json

@@ -152,5 +152,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.35.0-post.3"
+  "version": "1.35.0-post.4"
 }

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