@thepalaceproject/circulation-admin 1.43.0-post.1 → 1.43.0-post.10

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import SingleStatListItem, {
+  SingleStatListItemProps,
+} from "../../../src/components/SingleStatListItem";
+
+describe("SingleStatListItem", () => {
+  const statWithTooltip: SingleStatListItemProps = {
+    label: "Number of Widgets",
+    value: 357892,
+    tooltip: "Total Widget Count",
+  };
+  const humanReadableValue = "357.9k";
+  const formattedValue = "357,892";
+
+  it("renders a top-level <li>, with or without a tooltip", () => {
+    const { container, rerender } = render(
+      <SingleStatListItem {...statWithTooltip} />
+    );
+    expect(container.firstElementChild?.tagName).toBe("LI");
+    expect(container.firstElementChild).toHaveClass("single-stat");
+
+    // Without a tooltip the <li> is still the top-level element.
+    rerender(
+      <SingleStatListItem
+        label={statWithTooltip.label}
+        value={statWithTooltip.value}
+      />
+    );
+    expect(container.firstElementChild?.tagName).toBe("LI");
+    expect(container.firstElementChild).toHaveClass("single-stat");
+  });
+
+  it("shows a tooltip wrapping the value and label when one is provided", () => {
+    const { container } = render(<SingleStatListItem {...statWithTooltip} />);
+
+    const tooltip = container.querySelector('[data-toggle="tooltip"]');
+    expect(tooltip).not.toBeNull();
+
+    const title = tooltip?.getAttribute("title") ?? "";
+    expect(title).toContain(statWithTooltip.tooltip);
+    expect(title).toContain(formattedValue);
+
+    // When there's a tooltip, it wraps the (rounded) value and the label.
+    expect(tooltip).toHaveTextContent(humanReadableValue);
+    expect(tooltip).toHaveTextContent(statWithTooltip.label);
+  });
+
+  it("omits the tooltip when none is provided, showing value and label directly", () => {
+    const { container } = render(
+      <SingleStatListItem
+        label={statWithTooltip.label}
+        value={statWithTooltip.value}
+      />
+    );
+
+    expect(container.querySelector('[data-toggle="tooltip"]')).toBeNull();
+    expect(screen.getByText(humanReadableValue)).toBeInTheDocument();
+    expect(screen.getByText(statWithTooltip.label)).toBeInTheDocument();
+  });
+});

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

@@ -382,14 +382,10 @@ describe("Dashboard Statistics", () => {
             roles,
             quicksightPagePath: fakeQuickSightHref,
           };
-          const {
-            container,
-            getByRole,
-            queryByRole,
-            queryByText,
-          } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
-            appConfigSettings,
-          });
+          const { container, getByRole, queryByRole, queryByText } =
+            renderWithProviders(<Stats library={sampleLibraryKey} />, {
+              appConfigSettings,
+            });
 
           // We should always render a Usage reports group when a library is specified.
           getByRole("heading", {

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