@thepalaceproject/circulation-admin 1.43.0-post.9 → 1.44.0-post.10

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

@@ -0,0 +1,353 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+
+// CustomListsForBook renders a react-router v3 <Link> for which
+// renderWithProviders supplies no router context. Mock it to a marker that
+// exposes the `to` pathname and state so the destination can be asserted.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props: any) => (
+    <div
+      data-testid="Link"
+      data-pathname={
+        typeof props.to === "string" ? props.to : props.to?.pathname
+      }
+      data-book-title={
+        typeof props.to === "object" ? props.to?.state?.bookTitle : undefined
+      }
+    >
+      {props.children}
+    </div>
+  ),
+}));
+
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised. The book's lists and all available lists are fetched on mount
+// and fed back in through the Redux store; book/bookUrl/library/refreshCatalog
+// are own props.
+import CustomListsForBook, {
+  CustomListsForBook as UnconnectedCustomListsForBook,
+} from "../../../src/components/CustomListsForBook";
+
+const allCustomLists = [
+  { id: "1", name: "list 1", is_owner: true, is_shared: false },
+  { id: "2", name: "list 2", is_owner: true, is_shared: false },
+  { id: "3", name: "list 3", is_owner: true, is_shared: false },
+];
+const listsForBook = [
+  { id: "2", name: "list 2", is_owner: true, is_shared: false },
+];
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+// Serves the "all custom lists" endpoint and the per-book "/lists" endpoint from
+// the supplied fixtures; answers POSTs (edit) with success.
+const stubFetch = (allLists: unknown[], forBook: unknown[]) =>
+  jest
+    .spyOn(globalThis, "fetch")
+    .mockImplementation(async (url, opts?: RequestInit) => {
+      if (opts?.method === "POST") {
+        return new Response("success", { status: 200 });
+      }
+      const u = String(url);
+      if (u.includes("custom_lists")) {
+        return jsonResponse({ custom_lists: allLists });
+      }
+      return jsonResponse({ custom_lists: forBook });
+    });
+
+const renderConnected = () => {
+  const store = buildStore();
+  const refreshCatalog = jest.fn().mockResolvedValue(undefined);
+  const result = renderWithProviders(
+    <CustomListsForBook
+      csrfToken="token"
+      book={{ id: "id", title: "test title" } as any}
+      bookUrl="works/book url"
+      library="library"
+      refreshCatalog={refreshCatalog}
+    />,
+    { reduxProviderProps: { store } }
+  );
+  return { ...result, refreshCatalog };
+};
+
+describe("CustomListsForBook", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the book title and the book's current lists", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByRole("heading", { level: 2, name: "test title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Current Lists" })
+    ).toBeInTheDocument();
+
+    const link = await screen.findByRole("link", { name: "list 2" });
+    expect(link).toHaveAttribute("href", "/admin/web/lists/library/edit/2");
+    // Exactly one current list is shown.
+    expect(container.querySelectorAll(".with-remove-button")).toHaveLength(1);
+  });
+
+  it("builds the current-list URL from the list's id, not its name", async () => {
+    // A list named "new" whose id is "42" proves the URL uses the id.
+    const newList = { id: "42", name: "new", is_owner: true, is_shared: false };
+    stubFetch([...allCustomLists, newList], [newList]);
+    renderConnected();
+
+    const link = await screen.findByRole("link", { name: "new" });
+    expect(link).toHaveAttribute("href", "/admin/web/lists/library/edit/42");
+  });
+
+  it("shows a menu of the lists the book is not yet on", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    const { container } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const select = container.querySelector("select");
+    expect(select).not.toBeNull();
+    const optionValues = Array.from(select.querySelectorAll("option")).map(
+      (o) => o.getAttribute("value")
+    );
+    // "list 2" is excluded because the book is already on it.
+    expect(optionValues).toStrictEqual(["list 1", "list 3"]);
+    expect(screen.getByText(/Select an existing list/)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+  });
+
+  it("shows placeholder text when the book is not on any list", async () => {
+    stubFetch(allCustomLists, []);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByText("This book is not currently on any lists.")
+    ).toBeInTheDocument();
+    // With no current lists there is no "Current Lists" heading.
+    expect(
+      screen.queryByRole("heading", { name: "Current Lists" })
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".with-remove-button")).toBeNull();
+  });
+
+  it("hides the menu once the book is on every available list", async () => {
+    stubFetch(allCustomLists, allCustomLists);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByText(
+        "This book has been added to all the available lists."
+      )
+    ).toBeInTheDocument();
+    expect(container.querySelector("select")).toBeNull();
+  });
+
+  it("shows a message instead of the input list when no lists exist", async () => {
+    stubFetch([], []);
+    renderConnected();
+
+    expect(
+      await screen.findByText("There are no available lists.")
+    ).toBeInTheDocument();
+  });
+
+  it("shows a link to the list creator that carries the book title", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const creatorLink = screen.getByTestId("Link");
+    expect(creatorLink).toHaveTextContent("Create a new list");
+    expect(creatorLink).toHaveAttribute(
+      "data-pathname",
+      "/admin/web/lists/library/create"
+    );
+    expect(creatorLink).toHaveAttribute("data-book-title", "test title");
+    expect(
+      screen.getByText(
+        "(The book title will be automatically copied and searched on the list creator page.)"
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("fetches the book's lists and all custom lists on mount, without refreshing the catalog", async () => {
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const urls = fetchSpy.mock.calls.map(([u]) => String(u));
+    expect(urls).toContain("admin/works/book url/lists");
+    expect(urls.some((u) => u.includes("custom_lists"))).toBe(true);
+    expect(refreshCatalog).not.toHaveBeenCalled();
+  });
+
+  it("does not re-fetch all custom lists on mount when they are already loaded", () => {
+    // The mount guard (CustomListsForBook.tsx:158) fetches the full list of
+    // custom lists only when they are not already present; the book's own lists
+    // are still fetched. Drive the already-loaded case through the unconnected
+    // class, since the connected mount always starts from an empty store.
+    const fetchAllCustomLists = jest.fn();
+    const fetchCustomListsForBook = jest.fn();
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={fetchAllCustomLists}
+        fetchCustomListsForBook={fetchCustomListsForBook}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+      />
+    );
+
+    expect(fetchCustomListsForBook).toHaveBeenCalledTimes(1);
+    expect(fetchAllCustomLists).not.toHaveBeenCalled();
+  });
+
+  it("adds a list and posts the updated set of lists", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { container, refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    await user.selectOptions(
+      container.querySelector("select") as HTMLSelectElement,
+      "list 1"
+    );
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalled());
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/book url/lists");
+    const lists = JSON.parse(
+      ((postCall[1] as RequestInit).body as FormData).get("lists") as string
+    );
+    expect(lists).toStrictEqual([
+      { id: "2", name: "list 2", is_owner: true, is_shared: false },
+      { id: "1", name: "list 1", is_owner: true, is_shared: false },
+    ]);
+  });
+
+  it("removes a list and posts the emptied set of lists", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalled());
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/book url/lists");
+    const lists = JSON.parse(
+      ((postCall[1] as RequestInit).body as FormData).get("lists") as string
+    );
+    expect(lists).toStrictEqual([]);
+  });
+
+  it("shows an error message", () => {
+    // A mount-time fetch failure would reject the (uncaught) fetch promise and
+    // crash the worker, so drive the error through the prop connect derives.
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={jest.fn()}
+        fetchCustomListsForBook={jest.fn()}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+        fetchError={{ status: 400, response: "boom", url: "" } as any}
+      />
+    );
+    expect(screen.getByText(/Error: boom/)).toBeInTheDocument();
+  });
+
+  it("disables the remove and add controls while fetching", () => {
+    // isFetching is a connect-derived prop; inject it via the unconnected class.
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={jest.fn()}
+        fetchCustomListsForBook={jest.fn()}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+        isFetching={true}
+      />
+    );
+    expect(screen.getByRole("button", { name: "Delete" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+  });
+
+  it("shows the new book's lists when it is rerendered for another book", () => {
+    const commonProps = {
+      csrfToken: "token",
+      library: "library",
+      refreshCatalog: jest.fn().mockResolvedValue(undefined),
+      allCustomLists: allCustomLists as any,
+      fetchAllCustomLists: jest.fn(),
+      fetchCustomListsForBook: jest.fn(),
+      editCustomListsForBook: jest.fn().mockResolvedValue(undefined),
+    };
+    const { rerender } = render(
+      <UnconnectedCustomListsForBook
+        {...commonProps}
+        book={{ id: "a", title: "Book A" } as any}
+        bookUrl="works/book-a"
+        customListsForBook={listsForBook as any}
+      />
+    );
+    // list 2 (the book's only list) is in the current column, which renders
+    // each list as a link; the add-menu renders options instead.
+    expect(screen.getByRole("link", { name: "list 2" })).toBeInTheDocument();
+
+    // The current column renders straight from customListsForBook, so a new
+    // book's lists replace the old ones on rerender.
+    rerender(
+      <UnconnectedCustomListsForBook
+        {...commonProps}
+        book={{ id: "b", title: "Book B" } as any}
+        bookUrl="works/book-b"
+        customListsForBook={[allCustomLists[0]] as any}
+      />
+    );
+    expect(screen.getByRole("link", { name: "list 1" })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("link", { name: "list 2" })
+    ).not.toBeInTheDocument();
+  });
+});

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