@thepalaceproject/circulation-admin 1.43.0 → 1.44.0

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

@@ -0,0 +1,216 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+
+// Each active tab renders the connected SelfTestsCategory, which fetches on mount
+// and recurses into the self-tests machinery. This container's behavior is which
+// slice of the store each category gets and under what type/link name, so mock it
+// to a marker echoing those. `data-items` names the slice's contents so passing
+// the wrong category's items — or the whole items object — is visible.
+jest.mock("../../../src/components/SelfTestsCategory", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="self-tests-category"
+      data-type={props.type}
+      data-link-name={props.linkName}
+      data-items={
+        Array.isArray(props.items)
+          ? props.items.map((item: any) => item.name).join(",")
+          : `not-an-array:${typeof props.items}`
+      }
+    />
+  ),
+}));
+
+import { SelfTestsTabContainer } from "../../../src/components/SelfTestsTabContainer";
+
+// SelfTestsTabContainer reads `router` and `pathFor` from legacy react-router
+// context via static contextTypes (handleSelect calls router.push). Supply them
+// through a tiny legacy-context provider.
+class LegacyContextProvider extends React.Component<{
+  router: { push: jest.Mock };
+  pathFor: jest.Mock;
+  children: React.ReactNode;
+}> {
+  static childContextTypes = {
+    router: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  getChildContext() {
+    return { router: this.props.router, pathFor: this.props.pathFor };
+  }
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
+
+describe("SelfTestsTabContainer", () => {
+  let goToTab: jest.Mock;
+  let fetchItems: jest.Mock;
+  let router: { push: jest.Mock };
+  let pathFor: jest.Mock;
+  let store;
+
+  const collections = [
+    {
+      id: 1,
+      name: "collection 1",
+      protocol: "protocol",
+      self_test_results: {
+        duration: 1.75,
+        start: "2018-08-07T19:34:54Z",
+        end: "2018-08-07T19:34:55Z",
+        results: [
+          {
+            duration: 0.000119,
+            end: "2018-08-07T19:34:54Z",
+            exception: null,
+            name: "Initial setup.",
+            result: null,
+            start: "2018-08-07T19:34:54Z",
+            success: true,
+          },
+        ],
+      },
+    },
+  ];
+
+  beforeEach(() => {
+    store = buildStore();
+    goToTab = jest.fn();
+    fetchItems = jest.fn();
+    router = { push: jest.fn() };
+    pathFor = jest.fn();
+  });
+
+  const element = (overrides = {}) => {
+    const props = {
+      store,
+      goToTab,
+      fetchItems,
+      tab: "collections",
+      items: { protocols: [], collections },
+      ...overrides,
+    };
+    return (
+      <LegacyContextProvider router={router} pathFor={pathFor}>
+        <SelfTestsTabContainer {...props} />
+      </LegacyContextProvider>
+    );
+  };
+
+  const renderContainer = (overrides = {}) => render(element(overrides));
+
+  it("renders a tab container", () => {
+    const { container } = renderContainer();
+    expect(container.firstChild).toHaveClass("tab-container");
+  });
+
+  it("renders tabs and defaults to showing the Collections tab", () => {
+    const { container } = renderContainer();
+    const tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs).toHaveLength(3);
+
+    expect(tabs[0]).toHaveTextContent("Collections");
+    expect(tabs[0]).toHaveClass("active");
+
+    expect(tabs[1]).toHaveTextContent("Patron Authentication");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    expect(tabs[2]).toHaveTextContent("Metadata Services");
+    expect(tabs[2]).not.toHaveClass("active");
+  });
+
+  it("renders tab content", () => {
+    const { container } = renderContainer();
+
+    // Only the collections data is present, so its category renders; the other
+    // two tabs fall back to a loading indicator.
+    const markers = screen.getAllByTestId("self-tests-category");
+    expect(markers).toHaveLength(1);
+    expect(markers[0]).toHaveAttribute("data-type", "collection");
+    expect(markers[0]).toHaveAttribute("data-link-name", "collections");
+    expect(markers[0]).toHaveAttribute("data-items", "collection 1");
+
+    expect(container.querySelectorAll(".loading")).toHaveLength(2);
+  });
+
+  it("calls fetchItems on mount", () => {
+    renderContainer();
+    expect(fetchItems).toHaveBeenCalled();
+  });
+
+  it("shows an error message", () => {
+    const { container, rerender } = renderContainer();
+    expect(container.querySelectorAll(".alert-danger")).toHaveLength(0);
+
+    rerender(
+      element({
+        fetchError: { status: 401, response: "error fetching diagnostics" },
+      })
+    );
+
+    expect(container.querySelectorAll(".alert-danger")).toHaveLength(3);
+  });
+
+  it("calls goToTab and pushes to the router when a tab is clicked", async () => {
+    renderContainer();
+
+    await userEvent.click(
+      screen.getByRole("link", { name: "Patron Authentication" })
+    );
+
+    expect(goToTab).toHaveBeenCalledTimes(1);
+    expect(goToTab).toHaveBeenCalledWith("patronAuthServices");
+    await waitFor(() =>
+      expect(router.push).toHaveBeenCalledWith(
+        "/admin/web/troubleshooting/self-tests/patronAuthServices"
+      )
+    );
+  });
+
+  it("switches tabs when the tab prop changes", () => {
+    const { container, rerender } = renderContainer();
+    let tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    rerender(element({ tab: "patronAuthServices" }));
+
+    tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).not.toHaveClass("active");
+    expect(tabs[1]).toHaveClass("active");
+  });
+
+  it("derives the store key, type, and link name for each category", () => {
+    // A category only renders once its store key holds items, so populate all
+    // three with distinctly named items: the key each category is looked up
+    // under is then observable in the items its marker receives.
+    renderContainer({
+      items: {
+        collections: [{ id: 1, name: "a collection" }],
+        patron_auth_services: [{ id: 2, name: "a patron auth service" }],
+        metadata_services: [{ id: 3, name: "a metadata service" }],
+      },
+    });
+
+    const markers = screen.getAllByTestId("self-tests-category");
+    expect(markers).toHaveLength(3);
+
+    expect(markers[0]).toHaveAttribute("data-type", "collection");
+    expect(markers[0]).toHaveAttribute("data-link-name", "collections");
+    expect(markers[0]).toHaveAttribute("data-items", "a collection");
+
+    expect(markers[1]).toHaveAttribute("data-type", "patron_auth_service");
+    expect(markers[1]).toHaveAttribute("data-link-name", "patronAuth");
+    expect(markers[1]).toHaveAttribute("data-items", "a patron auth service");
+
+    expect(markers[2]).toHaveAttribute("data-type", "metadata_service");
+    expect(markers[2]).toHaveAttribute("data-link-name", "metadata");
+    expect(markers[2]).toHaveAttribute("data-items", "a metadata service");
+  });
+});