@thepalaceproject/circulation-admin 1.43.0-post.8 → 1.43.0-post.9

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

@@ -0,0 +1,200 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+
+// `SelfTests` is a connected component that fetches self-test results on mount.
+// It is incidental to what `SelfTestsCategory` itself does (build one panel per
+// item, color-code them, decide `openByDefault`, and compute `sortByCollection`),
+// so mock it to a marker that exposes the props the category passes down.
+jest.mock("../../../src/components/SelfTests", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="self-tests"
+      data-type={props.type}
+      data-item-id={props.item?.id}
+      data-item-name={props.item?.name}
+      data-sort-by-collection={String(props.sortByCollection)}
+    />
+  ),
+}));
+
+import SelfTestsCategory from "../../../src/components/SelfTestsCategory";
+
+const initialSetupResult = {
+  duration: 0.000119,
+  end: "2018-08-07T19:34:54Z",
+  exception: null,
+  name: "Initial setup.",
+  result: null,
+  start: "2018-08-07T19:34:54Z",
+  success: true,
+};
+
+const collections: any[] = [
+  {
+    id: 1,
+    name: "collection with success",
+    protocol: "protocol",
+    self_test_results: {
+      duration: 1.75,
+      start: "2018-08-07T19:34:54Z",
+      end: "2018-08-07T19:34:55Z",
+      results: [initialSetupResult],
+    },
+  },
+  {
+    id: 2,
+    name: "collection with failure",
+    protocol: "protocol",
+    self_test_results: {
+      duration: 1.75,
+      start: "2018-08-07T19:34:54Z",
+      end: "2018-08-07T19:34:55Z",
+      results: [
+        initialSetupResult,
+        {
+          duration: 0,
+          end: "2018-08-07T19:34:55Z",
+          exception: {
+            class: "IntegrationException",
+            debug_message:
+              "Add the collection to a library that has a patron authentication service.",
+            message: "Collection is not associated with any libraries.",
+          },
+          name: "Acquiring test patron credentials.",
+          result: null,
+          start: "2018-08-07T19:34:55Z",
+          success: false,
+        },
+      ],
+    },
+  },
+  {
+    id: 3,
+    name: "collection with no results",
+    protocol: "protocol",
+  },
+];
+
+const renderCategory = (items: any[] = collections) =>
+  renderWithProviders(
+    <SelfTestsCategory
+      type="collection"
+      linkName="collections"
+      csrfToken="token"
+      items={items}
+      store={buildStore()}
+    />
+  );
+
+describe("SelfTestsCategory", () => {
+  it("renders a list of items", () => {
+    const { container } = renderCategory();
+
+    const root = container.querySelector(".self-tests-category");
+    expect(root).toBeInTheDocument();
+    expect(root).toHaveClass("has-additional-content");
+
+    const titles = Array.from(
+      container.querySelectorAll("ul .panel-title")
+    ).map((el) => el.textContent);
+    expect(titles).toStrictEqual([
+      "collection with success",
+      "collection with failure",
+      "collection with no results",
+    ]);
+
+    // One SelfTests per item, each carrying the category's type and its item.
+    const selfTests = screen.getAllByTestId("self-tests");
+    expect(selfTests).toHaveLength(3);
+    selfTests.forEach((el, idx) => {
+      expect(el).toHaveAttribute("data-type", "collection");
+      expect(el).toHaveAttribute("data-item-id", String(collections[idx].id));
+    });
+  });
+
+  it("color-codes", () => {
+    const { container } = renderCategory();
+    const panels = container.querySelectorAll(".panel");
+    expect(panels[0]).toHaveClass("panel-success");
+    expect(panels[1]).toHaveClass("panel-danger");
+    expect(panels[2]).toHaveClass("panel-default");
+  });
+
+  it("opens the panel by default if there's only one", () => {
+    // With multiple items, none are open by default.
+    const multi = renderCategory();
+    expect(
+      Array.from(multi.container.querySelectorAll(".panel-heading")).some(
+        (h) => h.getAttribute("aria-expanded") === "true"
+      )
+    ).toBe(false);
+    multi.unmount();
+
+    // A fresh render with a single item opens that panel by default.
+    // (`openByDefault` seeds the panel's initial state, so a new mount is needed.)
+    const single = renderCategory([collections[0]]);
+    const singleHeaders = single.container.querySelectorAll(".panel-heading");
+    expect(singleHeaders).toHaveLength(1);
+    expect(singleHeaders[0]).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("passes the sortByCollection prop to SelfTests", () => {
+    const { rerender } = renderCategory();
+    expect(screen.getAllByTestId("self-tests")[0]).toHaveAttribute(
+      "data-sort-by-collection",
+      "false"
+    );
+
+    const withCollection = {
+      id: 99,
+      name: "collection with sorting",
+      protocol: "protocol",
+      self_test_results: {
+        duration: 1.75,
+        start: "2018-08-07T19:34:54Z",
+        end: "2018-08-07T19:34:55Z",
+        results: [{ ...initialSetupResult, collection: "sort!" }],
+      },
+    };
+
+    rerender(
+      <SelfTestsCategory
+        type="collection"
+        linkName="collections"
+        csrfToken="token"
+        items={[withCollection, ...collections]}
+        store={buildStore()}
+      />
+    );
+
+    expect(screen.getAllByTestId("self-tests")[0]).toHaveAttribute(
+      "data-sort-by-collection",
+      "true"
+    );
+  });
+
+  it("handles unnamed items", () => {
+    const nameless: any = {
+      id: 1,
+      name: null,
+      protocol: "protocol",
+      self_test_results: {
+        duration: 1.75,
+        start: "2018-08-07T19:34:54Z",
+        end: "2018-08-07T19:34:55Z",
+        results: [initialSetupResult],
+      },
+    };
+    const { container } = renderCategory([nameless]);
+
+    expect(screen.getByText("Unnamed collection")).toHaveClass("panel-title");
+    // Panel id becomes `${name-without-spaces}-${id}`; its body id appends "-panel".
+    expect(
+      container.querySelector("#Unnamedcollection-1-panel")
+    ).toBeInTheDocument();
+  });
+});

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/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/Timestamp.test.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import Timestamp from "../../../src/components/Timestamp";
+
+describe("Timestamp", () => {
+  const timestamp = {
+    service: "test_service",
+    id: "1",
+    start: "start_time_string",
+    duration: "60",
+    collection_name: "collection1",
+  };
+
+  describe("rendering", () => {
+    it("renders a success panel that is not collapsible", () => {
+      const { container } = render(<Timestamp timestamp={timestamp} />);
+
+      expect(container.querySelector(".panel-success")).toBeInTheDocument();
+      expect(container.querySelector(".panel-danger")).not.toBeInTheDocument();
+      // A non-collapsible panel is a static panel with no toggle button.
+      expect(container.querySelector(".static-panel")).toBeInTheDocument();
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("renders the start time", () => {
+      const { container } = render(<Timestamp timestamp={timestamp} />);
+
+      expect(container.querySelector(".panel-title")).toHaveTextContent(
+        "start_time_string"
+      );
+    });
+
+    it("renders the duration", () => {
+      const { container } = render(<Timestamp timestamp={timestamp} />);
+
+      expect(container.querySelectorAll("ul li")).toHaveLength(1);
+      expect(screen.getByText("Duration: 60 seconds")).toBeInTheDocument();
+    });
+  });
+
+  describe("rendering with achievements", () => {
+    it("renders achievements", () => {
+      const { container } = render(
+        <Timestamp timestamp={{ ...timestamp, achievements: "Ran a script" }} />
+      );
+
+      expect(container.querySelectorAll("ul li")).toHaveLength(2);
+      const achievements = container.querySelector(".well pre");
+      expect(achievements).toBeInTheDocument();
+      expect(achievements).toHaveTextContent("Ran a script");
+    });
+  });
+
+  describe("rendering with exception", () => {
+    it("determines style based on whether there is an exception", () => {
+      const { container } = render(
+        <Timestamp timestamp={{ ...timestamp, exception: "Stack trace" }} />
+      );
+
+      expect(container.querySelector(".panel-danger")).toBeInTheDocument();
+    });
+
+    it("renders an exception", () => {
+      const { container } = render(
+        <Timestamp timestamp={{ ...timestamp, exception: "Stack trace" }} />
+      );
+
+      const exception = container.querySelector(".exception pre");
+      expect(exception).toBeInTheDocument();
+      expect(exception).toHaveTextContent("Stack trace");
+    });
+  });
+});

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import WithEditButton from "../../../src/components/WithEditButton";
+
+describe("WithEditButton", () => {
+  it("shows children", () => {
+    render(
+      <WithEditButton disabled={false} onEdit={jest.fn()}>
+        child
+      </WithEditButton>
+    );
+
+    expect(screen.getByText("child")).toBeInTheDocument();
+  });
+
+  it("shows an edit button", () => {
+    render(
+      <WithEditButton disabled={false} onEdit={jest.fn()}>
+        child
+      </WithEditButton>
+    );
+
+    expect(screen.getByRole("button")).toHaveClass("edit-btn");
+  });
+
+  it("calls onEdit when clicked", async () => {
+    const user = userEvent.setup();
+    const onEdit = jest.fn();
+    render(
+      <WithEditButton disabled={false} onEdit={onEdit}>
+        child
+      </WithEditButton>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(onEdit).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when disabled", async () => {
+    const user = userEvent.setup();
+    const onEdit = jest.fn();
+    render(
+      <WithEditButton disabled={true} onEdit={onEdit}>
+        child
+      </WithEditButton>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(onEdit).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import WithRemoveButton from "../../../src/components/WithRemoveButton";
+
+describe("WithRemoveButton", () => {
+  it("shows children", () => {
+    render(
+      <WithRemoveButton disabled={false} onRemove={jest.fn()}>
+        child
+      </WithRemoveButton>
+    );
+
+    expect(screen.getByText("child")).toBeInTheDocument();
+  });
+
+  it("shows a remove button", () => {
+    render(
+      <WithRemoveButton disabled={false} onRemove={jest.fn()}>
+        child
+      </WithRemoveButton>
+    );
+
+    expect(screen.getByRole("button")).toHaveClass("remove-btn");
+  });
+
+  it("calls onRemove when clicked", async () => {
+    const user = userEvent.setup();
+    const onRemove = jest.fn();
+    render(
+      <WithRemoveButton disabled={false} onRemove={onRemove}>
+        child
+      </WithRemoveButton>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when disabled", async () => {
+    const user = userEvent.setup();
+    const onRemove = jest.fn();
+    render(
+      <WithRemoveButton disabled={true} onRemove={onRemove}>
+        child
+      </WithRemoveButton>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it("calls onRemove when confirmation returns true", async () => {
+    const user = userEvent.setup();
+    const onRemove = jest.fn();
+    const confirmRemoval = jest.fn().mockReturnValue(true);
+    render(
+      <WithRemoveButton
+        disabled={false}
+        onRemove={onRemove}
+        confirmRemoval={confirmRemoval}
+      >
+        child
+      </WithRemoveButton>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(confirmRemoval).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onRemove when confirmation returns false", async () => {
+    const user = userEvent.setup();
+    const onRemove = jest.fn();
+    const confirmRemoval = jest.fn().mockReturnValue(false);
+    render(
+      <WithRemoveButton
+        disabled={false}
+        onRemove={onRemove}
+        confirmRemoval={confirmRemoval}
+      >
+        child
+      </WithRemoveButton>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    expect(confirmRemoval).toHaveBeenCalledTimes(1);
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+});

package/tests/jest/index.test.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Router } from "react-router";
+
+import SetupPage from "../../src/components/SetupPage";
+
+// index.tsx does `export = CirculationAdmin`.
+const CirculationAdmin = require("../../src/index");
+
+/** Walk a React element tree for an element of the given type — the structural
+ *  analog of enzyme's `wrapper.find(Type)`, used where the tree is the app root
+ *  and there is no rendered DOM to query against. */
+function containsType(node: any, type: React.ElementType): boolean {
+  if (!node || typeof node !== "object") return false;
+  if (Array.isArray(node)) return node.some((n) => containsType(n, type));
+  if (node.type === type) return true;
+  return containsType(node.props && node.props.children, type);
+}
+
+describe("CirculationAdmin", () => {
+  let renderSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    // Capture what the bootstrap hands to ReactDOM.render without letting it
+    // paint into the jsdom document. We assert on the captured element tree
+    // (the structural analog of the original enzyme `wrapper.find(...)`); what
+    // SetupPage and the routed pages render is covered by their own tests.
+    renderSpy = jest
+      .spyOn(ReactDOM, "render")
+      .mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders the setup page when setting up", () => {
+    new CirculationAdmin({ settingUp: true, csrfToken: "token" });
+
+    expect(renderSpy).toHaveBeenCalledTimes(1);
+    expect(containsType(renderSpy.mock.calls[0][0], SetupPage)).toBe(true);
+  });
+
+  it("renders the router otherwise", () => {
+    new CirculationAdmin({ csrfToken: "token" });
+
+    expect(renderSpy).toHaveBeenCalledTimes(1);
+    expect(containsType(renderSpy.mock.calls[0][0], Router)).toBe(true);
+  });
+});

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

@@ -1,38 +0,0 @@
-import * as React from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import AdvancedSearchBuilder from "../../../src/components/AdvancedSearchBuilder";
-
-describe("AdvancedSearchBuilder", () => {
-  it("renders a placeholder and help text when the publication date filter is selected", async () => {
-    userEvent.setup();
-
-    const query = {
-      id: "0",
-      key: "genre",
-      value: "Horror",
-    };
-
-    render(
-      <AdvancedSearchBuilder
-        isOwner={true}
-        name="search"
-        query={query}
-        selectedQueryId="0"
-      />
-    );
-
-    await userEvent.selectOptions(
-      screen.getByRole("combobox", { name: "filter field key" }),
-      screen.getByRole("option", { name: "Publication Date" })
-    );
-
-    const filterValueField = screen.getByRole("textbox", {
-      name: "filter value",
-    });
-
-    expect(filterValueField).toHaveAttribute("placeholder", "YYYY-MM-DD");
-    expect(filterValueField).toHaveAccessibleDescription(/publication date/i);
-    expect(filterValueField).toHaveAccessibleDescription(/YYYY-MM-DD/i);
-  });
-});