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

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

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import DiagnosticsServiceTabs from "../../../src/components/DiagnosticsServiceTabs";
+
+describe("DiagnosticsServiceTabs", () => {
+  let goToTab: jest.Mock;
+
+  const ts1 = {
+    service: "test_service_1",
+    id: "1",
+    start: "start_time_string_1",
+    duration: "0",
+    collection_name: "collection1",
+  };
+  const ts2 = {
+    service: "test_service_2",
+    id: "2",
+    start: "start_time_string_2",
+    duration: "0",
+    collection_name: "collection2",
+    exception: "Stack trace",
+  };
+
+  const content: any = {
+    test_service_1: { collection1: [ts1] },
+    test_service_2: { collection2: [ts2] },
+  };
+
+  const renderTabs = () => {
+    goToTab = jest.fn();
+    return render(
+      <DiagnosticsServiceTabs
+        goToTab={goToTab}
+        content={content}
+        tab="test_service_1"
+      />
+    );
+  };
+
+  // Find the collapsible `.panel` whose header text matches `title`. The
+  // collection panels are titled by collection name; the timestamp panels nested
+  // inside them are titled by their start time.
+  const panelByTitle = (container: HTMLElement, title: string) => {
+    const titleEl = Array.from(container.querySelectorAll(".panel-title")).find(
+      (el) => el.textContent === title
+    );
+    return titleEl ? titleEl.closest(".panel") : null;
+  };
+
+  describe("nav", () => {
+    it("renders a tab for each service", () => {
+      const { container } = renderTabs();
+      expect(container.querySelectorAll("ul.nav-tabs")).toHaveLength(1);
+      const tabs = container.querySelectorAll("ul.nav-tabs li a");
+      expect(tabs).toHaveLength(2);
+      expect(tabs[0]).toHaveTextContent("Test_service_1");
+      expect(tabs[1]).toHaveTextContent("Test_service_2");
+    });
+
+    it("displays a badge", () => {
+      const { container } = renderTabs();
+      const tabs = container.querySelectorAll("ul.nav-tabs li");
+
+      // The first service has no exception: a plain count badge with a tooltip.
+      const tabWithoutException = tabs[0];
+      expect(tabWithoutException.querySelector(".danger")).toBeNull();
+      const badge = tabWithoutException.querySelector(".badge");
+      expect(badge).toHaveTextContent("1");
+      const toolTip = tabWithoutException.querySelector(".tool-tip");
+      expect(toolTip).toHaveTextContent(
+        "Total number of timestamps for this service"
+      );
+
+      // The second service contains a timestamp with an exception, so it shows a
+      // danger badge (a warning) and no tooltip.
+      const tabWithException = tabs[1];
+      const dangerBadge = tabWithException.querySelector(".badge.danger");
+      expect(dangerBadge).toHaveTextContent("!");
+      expect(tabWithException.querySelector(".tool-tip")).toBeNull();
+    });
+
+    it("defaults to showing the first tab", () => {
+      const { container } = renderTabs();
+      const tabs = container.querySelectorAll("ul.nav-tabs li");
+      expect(tabs[0]).toHaveClass("active");
+      expect(tabs[1]).not.toHaveClass("active");
+    });
+  });
+
+  describe("content", () => {
+    it("renders collections", () => {
+      const { container } = renderTabs();
+      expect(container.querySelectorAll(".tab-content")).toHaveLength(1);
+
+      // collection1 has no exception, so its panel starts collapsed.
+      const collection1 = panelByTitle(container, "collection1");
+      expect(collection1).toBeInTheDocument();
+      expect(collection1.querySelector(".panel-heading")).toHaveAttribute(
+        "aria-expanded",
+        "false"
+      );
+
+      // collection2 contains a timestamp with an exception, so its panel starts
+      // expanded.
+      const collection2 = panelByTitle(container, "collection2");
+      expect(collection2).toBeInTheDocument();
+      expect(collection2.querySelector(".panel-heading")).toHaveAttribute(
+        "aria-expanded",
+        "true"
+      );
+    });
+
+    it("renders timestamps", () => {
+      const { container } = renderTabs();
+      // Each timestamp renders as a panel headed by its start time.
+      expect(
+        panelByTitle(container, "start_time_string_1")
+      ).toBeInTheDocument();
+      expect(
+        panelByTitle(container, "start_time_string_2")
+      ).toBeInTheDocument();
+      // Both timestamps render their duration.
+      expect(screen.getAllByText("Duration: 0 seconds")).toHaveLength(2);
+    });
+  });
+
+  describe("behavior", () => {
+    it("switches tabs", async () => {
+      const user = userEvent.setup();
+      const { container } = renderTabs();
+      const tabLinks = container.querySelectorAll("ul.nav-tabs li a");
+
+      await user.click(tabLinks[1]);
+
+      expect(goToTab).toHaveBeenCalledTimes(1);
+      expect(goToTab).toHaveBeenCalledWith("test_service_2");
+    });
+  });
+});

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import DiagnosticsServiceType from "../../../src/components/DiagnosticsServiceType";
+
+describe("DiagnosticsServiceType", () => {
+  const ts1 = {
+    service: "test_service_1",
+    id: "1",
+    start: "start_time_string_1",
+    duration: "0",
+    collection_name: "collection1",
+  };
+  const ts2 = {
+    service: "test_service_2",
+    id: "2",
+    start: "start_time_string_2",
+    duration: "0",
+    collection_name: "collection2",
+  };
+
+  const services: any = {
+    test_service_1: { collection1: [ts1] },
+    test_service_2: { collection2: [ts2] },
+  };
+
+  it("renders service tabs", () => {
+    const { container } = render(
+      <DiagnosticsServiceType type="monitor" services={services} />
+    );
+
+    expect(container.firstChild).toHaveClass("config");
+    expect(container.firstChild).toHaveClass("services");
+
+    // The service tabs are rendered, one per service, defaulting to the first.
+    const tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs).toHaveLength(2);
+    expect(tabs[0]).toHaveTextContent("Test_service_1");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).toHaveTextContent("Test_service_2");
+    expect(tabs[1]).not.toHaveClass("active");
+  });
+
+  it("switches tabs", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <DiagnosticsServiceType type="monitor" services={services} />
+    );
+
+    // Starts on the first service tab.
+    let tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    // Clicking the second service tab selects it (goToTab updates the state that
+    // drives which tab is active).
+    await user.click(container.querySelectorAll("ul.nav-tabs li a")[1]);
+
+    tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).not.toHaveClass("active");
+    expect(tabs[1]).toHaveClass("active");
+  });
+
+  it("displays a message if there are no services", () => {
+    const { container } = render(
+      <DiagnosticsServiceType type="monitor" services={null} />
+    );
+
+    expect(container.querySelector("ul.nav-tabs")).toBeNull();
+    expect(
+      screen.getByText("There are currently no monitor services.")
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+
+// The active tab renders DiagnosticsServiceType, which recurses into the service
+// tab machinery. The legacy test only asserted the `type`/`services` props it
+// received, so mock it to a marker that echoes those.
+jest.mock("../../../src/components/DiagnosticsServiceType", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="service-type"
+      data-type={props.type}
+      data-has-services={String(props.services !== undefined)}
+    />
+  ),
+}));
+
+import { DiagnosticsTabContainer } from "../../../src/components/DiagnosticsTabContainer";
+
+describe("DiagnosticsTabContainer", () => {
+  let goToTab: jest.Mock;
+  let fetchDiagnostics: jest.Mock;
+
+  const ts1 = {
+    service: "test_service",
+    id: "1",
+    start: "start_time_string",
+    duration: "0",
+    collection_name: "collection1",
+  };
+
+  const diagnostics = {
+    monitor: [{ test_service_1: [{ collection1: [ts1] }] }],
+  };
+
+  beforeEach(() => {
+    goToTab = jest.fn();
+    fetchDiagnostics = jest.fn();
+  });
+
+  const element = (overrides = {}) => {
+    const props = {
+      goToTab,
+      tab: "coverage_provider",
+      store: buildStore(),
+      fetchDiagnostics,
+      diagnostics: { coverage_provider: [] },
+      isLoaded: true,
+      ...overrides,
+    };
+    return <DiagnosticsTabContainer {...props} />;
+  };
+
+  const renderContainer = (overrides = {}) => render(element(overrides));
+
+  describe("rendering", () => {
+    it("renders a tab container", () => {
+      const { container } = renderContainer();
+      expect(container.firstChild).toHaveClass("tab-container");
+    });
+
+    it("renders tabs and defaults to showing the Coverage Providers tab", () => {
+      const { container } = renderContainer();
+      const tabs = container.querySelectorAll("ul.nav-tabs li");
+      expect(tabs).toHaveLength(4);
+
+      expect(tabs[0]).toHaveTextContent("Coverage Providers");
+      expect(tabs[0]).toHaveClass("active");
+
+      expect(tabs[1]).toHaveTextContent("Monitors");
+      expect(tabs[1]).not.toHaveClass("active");
+
+      expect(tabs[2]).toHaveTextContent("Scripts");
+      expect(tabs[2]).not.toHaveClass("active");
+
+      expect(tabs[3]).toHaveTextContent("Other");
+      expect(tabs[3]).not.toHaveClass("active");
+    });
+
+    it("renders tab content", () => {
+      renderContainer({ diagnostics });
+      const serviceTypes = screen.getAllByTestId("service-type");
+      expect(serviceTypes).toHaveLength(4);
+
+      expect(serviceTypes[0]).toHaveAttribute("data-type", "coverage_provider");
+      expect(serviceTypes[0]).toHaveAttribute("data-has-services", "false");
+
+      expect(serviceTypes[1]).toHaveAttribute("data-type", "monitor");
+      expect(serviceTypes[1]).toHaveAttribute("data-has-services", "true");
+
+      expect(serviceTypes[2]).toHaveAttribute("data-type", "script");
+      expect(serviceTypes[2]).toHaveAttribute("data-has-services", "false");
+
+      expect(serviceTypes[3]).toHaveAttribute("data-type", "other");
+      expect(serviceTypes[3]).toHaveAttribute("data-has-services", "false");
+    });
+  });
+
+  describe("behavior", () => {
+    it("calls fetchDiagnostics on mount", () => {
+      renderContainer();
+      expect(fetchDiagnostics).toHaveBeenCalled();
+    });
+
+    it("shows the loading indicator", () => {
+      const { container, rerender } = renderContainer();
+      expect(container.querySelectorAll(".loading")).toHaveLength(0);
+      rerender(element({ isLoaded: false }));
+      expect(container.querySelectorAll(".loading")).toHaveLength(4);
+    });
+
+    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(4);
+    });
+
+    it("calls goToTab when a tab is clicked", async () => {
+      const user = userEvent.setup();
+      renderContainer({ diagnostics });
+      await user.click(screen.getByRole("link", { name: "Monitors" }));
+      expect(goToTab).toHaveBeenCalledTimes(1);
+      expect(goToTab).toHaveBeenCalledWith("monitor");
+    });
+
+    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: "monitor" }));
+
+      tabs = container.querySelectorAll("ul.nav-tabs li");
+      expect(tabs[0]).not.toHaveClass("active");
+      expect(tabs[1]).toHaveClass("active");
+    });
+  });
+});

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

@@ -383,7 +383,11 @@ describe("EditableConfigList - library association disclosure", () => {
     it("falls back to short_name when allLibraries is absent from the data", () => {
       const { container } = renderWithContext(
         <TestServiceList
-          data={{ services: [{ id: 1, name: "Service A", libraries: [{ short_name: "nypl" }] }] }}
+          data={{
+            services: [
+              { id: 1, name: "Service A", libraries: [{ short_name: "nypl" }] },
+            ],
+          }}
           fetchData={jest.fn()}
           editItem={jest.fn().mockResolvedValue(undefined)}
           deleteItem={jest.fn().mockResolvedValue(undefined)}
@@ -393,7 +397,9 @@ describe("EditableConfigList - library association disclosure", () => {
         config
       );
       fireEvent.click(container.querySelector(".association-toggle"));
-      expect(container.querySelector(".associated-items li").textContent).toBe("nypl");
+      expect(container.querySelector(".associated-items li").textContent).toBe(
+        "nypl"
+      );
     });
   });
 });

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// The wrapped `Collection` (from web-opds-client) is incidental here — the
+// container's job is to pull the "Formats" facets out and hand them to
+// `EntryPointsTabs`. Mock Collection to a marker so we can render the real
+// EntryPointsTabs and assert the tabs it produces.
+jest.mock(
+  "@thepalaceproject/web-opds-client/lib/components/Collection",
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="collection" />,
+  })
+);
+
+// EntryPointsTabs renders CatalogLink -> React Router `Link`, which needs router
+// context renderWithProviders does not supply. Mock `Link` to a marker.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import EntryPointsContainer from "../../../src/components/EntryPointsContainer";
+
+// Stands in for the OPDS Collection child whose `collection` prop the container
+// reads. It is never rendered by the container (only its props are inspected).
+class CollectionChild extends React.Component<{ collection: unknown }> {
+  render() {
+    return null;
+  }
+}
+
+describe("EntryPointsContainer", () => {
+  it("should not render entry-point tabs if no facets were passed", () => {
+    const collection = {
+      facetGroups: [],
+      lanes: [],
+      books: [],
+      navigationLinks: [],
+    };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    expect(
+      container.querySelector(".entry-points-tab-container")
+    ).toBeInTheDocument();
+    // EntryPointsTabs renders nothing when there are no format facets.
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("shows a tab container with facets when the label is 'Formats'", () => {
+    const facetGroups = [
+      {
+        facets: [],
+        label: "Some other facets",
+      },
+      {
+        facets: [
+          {
+            label: "Ebooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+            active: false,
+          },
+          {
+            label: "Audiobooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+            active: false,
+          },
+        ],
+        label: "Formats",
+      },
+    ];
+    const collection = { facetGroups };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import { FacetData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Each tab is a CatalogLink, which renders a React Router `Link`. Router `Link`
+// needs router context that `renderWithProviders` does not supply, so mock it to
+// a marker that exposes its navigation target and children (matching Lane.test.tsx).
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import { EntryPointsTabs } from "../../../src/components/EntryPointsTabs";
+
+const twoFacets: FacetData[] = [
+  {
+    label: "Ebooks",
+    href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+    active: true,
+  },
+  {
+    label: "Audiobooks",
+    href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+    active: false,
+  },
+];
+
+describe("EntryPointsTabs", () => {
+  it("should not generate any tabs", () => {
+    const { container } = renderWithProviders(<EntryPointsTabs />);
+
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("should generate two tabs with two entry points", () => {
+    const { container } = renderWithProviders(
+      <EntryPointsTabs facets={twoFacets} />
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+
+    const items = list.querySelectorAll("li");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveClass("active");
+    expect(items[1]).not.toHaveClass("active");
+
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+
+  it("uses router to navigate when a tab is clicked", () => {
+    renderWithProviders(<EntryPointsTabs facets={twoFacets} />);
+
+    const links = screen.getAllByTestId("Link");
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveTextContent("Ebooks");
+    expect(links[1]).toHaveTextContent("Audiobooks");
+    // Each tab links somewhere for the router to navigate to.
+    expect(links[0]).toHaveAttribute("data-to");
+    expect(links[1]).toHaveAttribute("data-to");
+  });
+
+  it("should generate one tab with an active entry point", () => {
+    const oneFacet: FacetData[] = [
+      {
+        label: "Audiobooks",
+        href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+        active: true,
+      },
+    ];
+    const { container } = renderWithProviders(
+      <EntryPointsTabs facets={oneFacet} />
+    );
+
+    const items = container.querySelectorAll("ul.nav-tabs li");
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveClass("active");
+
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ErrorMessage from "../../../src/components/ErrorMessage";
+
+describe("ErrorMessage", () => {
+  it("shows logged out message for 401 error", () => {
+    render(<ErrorMessage error={{ status: 401, response: "", url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent("logged out");
+  });
+
+  it("shows detail for problem detail", () => {
+    render(
+      <ErrorMessage
+        error={{
+          status: 500,
+          response: JSON.stringify({ status: 500, detail: "detail" }),
+          url: "",
+        }}
+      />
+    );
+
+    expect(screen.getByRole("alert")).toHaveTextContent("detail");
+  });
+
+  it("shows response for non-json response", () => {
+    render(
+      <ErrorMessage error={{ status: 500, response: "response", url: "" }} />
+    );
+
+    expect(screen.getByRole("alert")).toHaveTextContent("response");
+  });
+
+  it("parses non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document: {\"status\": 502, \"detail\": problem text, \"title\": TITLE}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document with status 502: problem text"
+    );
+    expect(screen.getByText("TITLE")).toBeInTheDocument();
+  });
+
+  it("can handle missing detail property in non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document: {\"status\": 502, \"title\": TITLE}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document with status 502:"
+    );
+    expect(screen.getByText("TITLE")).toBeInTheDocument();
+  });
+
+  it("can handle missing status property in non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document:  {\"detail\": problem text, \"title\": TITLE}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document: problem text"
+    );
+    expect(screen.getByText("TITLE")).toBeInTheDocument();
+  });
+
+  it("can handle missing title property in non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document:  {\"status\": 502, \"detail\": problem text}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document with status 502:"
+    );
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  it("shows a try again button that fires the callback when clicked", async () => {
+    const user = userEvent.setup();
+    const tryAgain = jest.fn();
+    render(
+      <ErrorMessage
+        error={{ status: 500, response: "response", url: "" }}
+        tryAgain={tryAgain}
+      />
+    );
+
+    const tryAgainButton = screen.getByRole("button", { name: "Try again" });
+    expect(tryAgainButton).toBeInTheDocument();
+
+    await user.click(tryAgainButton);
+
+    expect(tryAgain).toHaveBeenCalledTimes(1);
+  });
+});