@thepalaceproject/circulation-admin 1.43.0 → 1.44.0-post.4

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ToolTip from "../../../src/components/ToolTip";
+
+describe("ToolTip", () => {
+  const renderToolTip = () =>
+    render(<ToolTip trigger={<h1>Hover</h1>} text="ToolTip Content" />);
+
+  it("renders the trigger element", () => {
+    renderToolTip();
+    expect(screen.getByRole("heading", { name: "Hover" })).toBeInTheDocument();
+  });
+
+  it("renders the tooltip", () => {
+    const { container } = renderToolTip();
+    const tooltip = container.querySelector<HTMLElement>(".tool-tip")!;
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent("ToolTip Content");
+    expect(tooltip.innerHTML).toContain("ToolTip Content");
+  });
+
+  it("initially hides the tooltip", () => {
+    const { container } = renderToolTip();
+    expect(container.querySelector(".tool-tip")).toHaveClass("hide");
+  });
+
+  it("shows the tooltip on mouseEnter", async () => {
+    const user = userEvent.setup();
+    const { container } = renderToolTip();
+    await user.hover(screen.getByRole("tooltip"));
+    expect(container.querySelector(".tool-tip")).not.toHaveClass("hide");
+  });
+
+  it("hides the tooltip on mouseLeave", async () => {
+    const user = userEvent.setup();
+    const { container } = renderToolTip();
+    const toolTipContainer = screen.getByRole("tooltip");
+
+    await user.hover(toolTipContainer);
+    expect(container.querySelector(".tool-tip")).not.toHaveClass("hide");
+
+    await user.unhover(toolTipContainer);
+    expect(container.querySelector(".tool-tip")).toHaveClass("hide");
+  });
+});

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

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// The tab containers are connected components that fetch on mount and require
+// react-router context; TroubleshootingCategoryPage only chooses between them
+// and hands them a `tab` and `goToTab`. Mock them to markers that surface the
+// `tab` they receive and let us drive `goToTab`.
+jest.mock("../../../src/components/DiagnosticsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="diagnostics-tab-container" data-tab={props.tab}>
+      <button type="button" onClick={() => props.goToTab("monitor")}>
+        go-to-monitor
+      </button>
+    </div>
+  ),
+}));
+jest.mock("../../../src/components/SelfTestsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="self-tests-tab-container" data-tab={props.tab} />
+  ),
+}));
+
+import TroubleshootingCategoryPage from "../../../src/components/TroubleshootingCategoryPage";
+
+describe("TroubleshootingCategoryPage", () => {
+  it("renders a tab container", () => {
+    renderWithProviders(<TroubleshootingCategoryPage type="diagnostics" />);
+
+    expect(screen.getByTestId("diagnostics-tab-container")).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("self-tests-tab-container")
+    ).not.toBeInTheDocument();
+  });
+
+  it("switches tabs", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TroubleshootingCategoryPage type="diagnostics" />);
+
+    expect(screen.getByTestId("diagnostics-tab-container")).toHaveAttribute(
+      "data-tab",
+      "coverage_provider"
+    );
+
+    await user.click(screen.getByRole("button", { name: "go-to-monitor" }));
+
+    expect(screen.getByTestId("diagnostics-tab-container")).toHaveAttribute(
+      "data-tab",
+      "monitor"
+    );
+  });
+
+  it("renders a different tab container", () => {
+    const { rerender } = renderWithProviders(
+      <TroubleshootingCategoryPage type="diagnostics" />
+    );
+
+    rerender(<TroubleshootingCategoryPage type="self-tests" />);
+
+    expect(
+      screen.queryByTestId("diagnostics-tab-container")
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("self-tests-tab-container")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import title from "../../../src/utils/title";
+
+// Header needs react-router v3 context that renderWithProviders does not supply,
+// and both Header and Footer are page chrome, so mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// The real TroubleshootingTabContainer requires router/pathFor context and
+// mounts self-test/diagnostic pages that fetch on mount. TroubleshootingPage's
+// own behavior is to own the active tab and pass it (and a goToTab callback)
+// down, so mock the container to a marker that exposes its `tab`/`subtab` props
+// and a control that invokes `goToTab` — exactly the contract under test.
+jest.mock("../../../src/components/TroubleshootingTabContainer", () => ({
+  __esModule: true,
+  default: ({
+    tab,
+    subtab,
+    goToTab,
+  }: {
+    tab: string;
+    subtab: string;
+    goToTab: (tab: string) => void;
+  }) => (
+    <div data-testid="tab-container" data-tab={tab} data-subtab={subtab}>
+      <button type="button" onClick={() => goToTab("self-tests")}>
+        Go to self-tests
+      </button>
+    </div>
+  ),
+}));
+
+import TroubleshootingPage from "../../../src/components/TroubleshootingPage";
+
+const renderPage = () =>
+  renderWithProviders(<TroubleshootingPage params={{ tab: "", subtab: "" }} />);
+
+describe("TroubleshootingPage", () => {
+  it("renders a header", () => {
+    renderPage();
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("renders a heading", () => {
+    renderPage();
+    expect(
+      screen.getByRole("heading", { name: "Troubleshooting" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders a tab container starting on the diagnostics tab", () => {
+    renderPage();
+    const tabContainer = screen.getByTestId("tab-container");
+    expect(tabContainer).toBeInTheDocument();
+    expect(tabContainer).toHaveAttribute("data-tab", "diagnostics");
+  });
+
+  it("switches tabs", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(screen.getByTestId("tab-container")).toHaveAttribute(
+      "data-tab",
+      "diagnostics"
+    );
+
+    await user.click(screen.getByRole("button", { name: "Go to self-tests" }));
+
+    expect(screen.getByTestId("tab-container")).toHaveAttribute(
+      "data-tab",
+      "self-tests"
+    );
+  });
+
+  it("sets the document title", () => {
+    renderPage();
+    expect(document.title).toBe(title("Troubleshooting"));
+  });
+
+  it("shows a footer", () => {
+    renderPage();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});

package/tests/jest/components/TroubleshootingTabContainer.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";
+
+// The tab content (TroubleshootingCategoryPage) renders the connected
+// Diagnostics/Self-tests containers, which need Redux store + csrf context this
+// test does not supply. That content is incidental here — the test is about the
+// tab navigation — so mock it to a marker.
+jest.mock("../../../src/components/TroubleshootingCategoryPage", () => ({
+  __esModule: true,
+  default: () => <div data-testid="category-page" />,
+}));
+
+import TroubleshootingTabContainer from "../../../src/components/TroubleshootingTabContainer";
+
+describe("TroubleshootingTabContainer", () => {
+  let goToTab: jest.Mock;
+
+  beforeEach(() => {
+    goToTab = jest.fn();
+  });
+
+  it("renders tabs and defaults to showing the Diagnostics tab", () => {
+    const { container } = render(
+      <TroubleshootingTabContainer goToTab={goToTab} tab="diagnostics" />
+    );
+
+    const nav = container.querySelector("ul.nav-tabs");
+    expect(nav).not.toBeNull();
+
+    const tabs = nav.querySelectorAll("li");
+    expect(tabs).toHaveLength(2);
+
+    expect(tabs[0]).toHaveTextContent("Diagnostics");
+    expect(tabs[0]).toHaveClass("active");
+
+    expect(tabs[1]).toHaveTextContent("Self-tests");
+    expect(tabs[1]).not.toHaveClass("active");
+  });
+
+  it("calls goToTab when another tab is clicked", async () => {
+    const user = userEvent.setup();
+    render(<TroubleshootingTabContainer goToTab={goToTab} tab="diagnostics" />);
+
+    await user.click(screen.getByRole("link", { name: "Self-tests" }));
+
+    expect(goToTab).toHaveBeenCalledTimes(1);
+    expect(goToTab).toHaveBeenCalledWith("self-tests");
+  });
+
+  it("switches the active tab when the tab prop changes", () => {
+    const { container, rerender } = render(
+      <TroubleshootingTabContainer goToTab={goToTab} tab="diagnostics" />
+    );
+
+    let tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    rerender(
+      <TroubleshootingTabContainer goToTab={goToTab} tab="self-tests" />
+    );
+
+    tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).not.toHaveClass("active");
+    expect(tabs[1]).toHaveClass("active");
+  });
+});

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import UpdatingLoader from "../../../src/components/UpdatingLoader";
+
+describe("UpdatingLoader", () => {
+  it("renders only its container when not showing", () => {
+    const { container } = render(<UpdatingLoader show={false} />);
+
+    expect(
+      container.querySelector(".updating-loader-container")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".updating-loader")).not.toBeInTheDocument();
+    expect(screen.queryByText("Updating")).not.toBeInTheDocument();
+  });
+
+  it("renders the default message when showing", () => {
+    render(<UpdatingLoader show={true} />);
+
+    expect(screen.getByText("Updating")).toBeInTheDocument();
+  });
+
+  it("renders the text it is given instead of the default", () => {
+    render(<UpdatingLoader show={true} text="Doing something" />);
+
+    expect(screen.getByText("Doing something")).toBeInTheDocument();
+    expect(screen.queryByText("Updating")).not.toBeInTheDocument();
+  });
+
+  it("renders a spinner", () => {
+    const { container } = render(<UpdatingLoader show={true} />);
+
+    // The spinner is a Font Awesome <i>, which carries no accessible role.
+    expect(container.querySelector("i.fa-spinner")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+// Header pulls in the react-router v3 context a plain render does not supply, and
+// both Header and Footer are page chrome with no behavior worth exercising here.
+// Mock them to markers so the test stays about what WelcomePage composes.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+import WelcomePage from "../../../src/components/WelcomePage";
+
+describe("WelcomePage", () => {
+  it("shows the header", () => {
+    render(<WelcomePage />);
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("shows the welcome message", () => {
+    render(<WelcomePage />);
+    expect(
+      screen.getByRole("heading", {
+        name: "Welcome to the Circulation Admin Interface!",
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a link to the library create form", () => {
+    render(<WelcomePage />);
+    const link = screen.getByRole("link", { name: /create a new library/i });
+    expect(link).toHaveAttribute("href", "/admin/web/config/libraries/create");
+  });
+
+  it("shows the footer", () => {
+    render(<WelcomePage />);
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});

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