@thepalaceproject/circulation-admin 1.43.0-post.8 → 1.43.0-post.9

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

@@ -0,0 +1,251 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CustomListsSidebar from "../../../src/components/CustomListsSidebar";
+
+// Render react-router's Link as a marker anchor so we can assert its target
+// (`data-to`), text, and className without needing a Router in the test.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <a
+      data-testid="Link"
+      data-to={props.to}
+      href={props.to}
+      className={props.className}
+    >
+      {props.children}
+    </a>
+  ),
+}));
+
+describe("CustomListsSidebar", () => {
+  const makeLists = () => [
+    {
+      id: 1,
+      name: "First List",
+      entry_count: 5,
+      is_owner: true,
+      is_shared: false,
+    },
+    {
+      id: 2,
+      name: "Second List",
+      entry_count: 10,
+      is_owner: true,
+      is_shared: false,
+    },
+  ];
+
+  const baseProps = () => ({
+    filter: "owned",
+    lists: makeLists(),
+    library: "library_name",
+    identifier: "123",
+    isLibraryManager: true,
+    deleteCustomList: jest.fn(),
+    changeSort: jest.fn(),
+    sortOrder: "asc",
+  });
+
+  it("renders a sidebar with a header and a create button", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    expect(
+      container.querySelector(".custom-lists-sidebar")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+      "List Manager"
+    );
+
+    const createButton = screen.getAllByTestId("Link")[0];
+    expect(createButton).toHaveTextContent("Create New List");
+    expect(createButton).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/create"
+    );
+  });
+
+  it("renders filter select", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    const select = container.querySelector<HTMLSelectElement>(
+      'select[name="filter"]'
+    );
+    expect(select).toHaveValue("owned");
+
+    const options = within(select).getAllByRole("option");
+    expect(options).toHaveLength(4);
+    expect(options[0]).toHaveValue("");
+    expect(options[1]).toHaveValue("owned");
+    expect(options[2]).toHaveValue("shared-out");
+    expect(options[3]).toHaveValue("shared-in");
+  });
+
+  it("renders sort select", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    const select = container.querySelector<HTMLSelectElement>(
+      'select[name="sort"]'
+    );
+    expect(select).toHaveValue("asc");
+
+    const options = within(select).getAllByRole("option");
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveValue("asc");
+    expect(options[1]).toHaveValue("desc");
+  });
+
+  it("renders a list of custom list info items", async () => {
+    const user = userEvent.setup();
+    const deleteCustomList = jest.fn();
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        deleteCustomList={deleteCustomList}
+      />
+    );
+
+    const listItems = container.querySelectorAll("ul > li");
+    expect(listItems).toHaveLength(2);
+    const [firstList, secondList] = Array.from(listItems);
+
+    const firstInfo = firstList.querySelectorAll(".custom-list-info > div");
+    expect(firstInfo[0]).toHaveTextContent("First List");
+    expect(firstInfo[1]).toHaveTextContent("Books in list: 5");
+    expect(firstInfo[2]).toHaveTextContent("ID-1");
+
+    const firstButtons = firstList.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const firstEdit = within(firstButtons).getByTestId("Link");
+    expect(firstEdit).toHaveTextContent("Edit");
+    expect(firstEdit).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/edit/1"
+    );
+    const firstDelete = within(firstButtons).getByRole("button");
+    expect(firstDelete).toHaveTextContent("Delete");
+    await user.click(firstDelete);
+    expect(deleteCustomList).toHaveBeenCalledTimes(1);
+
+    const secondInfo = secondList.querySelectorAll(".custom-list-info > div");
+    expect(secondInfo[0]).toHaveTextContent("Second List");
+    expect(secondInfo[1]).toHaveTextContent("Books in list: 10");
+    expect(secondInfo[2]).toHaveTextContent("ID-2");
+
+    const secondButtons = secondList.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const secondEdit = within(secondButtons).getByTestId("Link");
+    expect(secondEdit).toHaveTextContent("Edit");
+    expect(secondEdit).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/edit/2"
+    );
+    const secondDelete = within(secondButtons).getByRole("button");
+    expect(secondDelete).toHaveTextContent("Delete");
+    await user.click(secondDelete);
+    expect(deleteCustomList).toHaveBeenCalledTimes(2);
+  });
+
+  it("disables the edit button if the list is already being edited", () => {
+    const props = baseProps();
+    const { container, rerender } = render(<CustomListsSidebar {...props} />);
+
+    const firstButtons = () =>
+      container.querySelectorAll<HTMLElement>(".custom-list-buttons")[0];
+
+    const editLink = within(firstButtons()).getByTestId("Link");
+    expect(editLink).not.toHaveClass("disabled");
+    expect(editLink).toHaveTextContent("EditPencil Icon");
+
+    rerender(<CustomListsSidebar {...props} identifier="1" />);
+
+    const editingButton = within(firstButtons()).getByRole("button", {
+      name: "Editing",
+    });
+    expect(editingButton).toBeDisabled();
+  });
+
+  it("renders a view button instead of an edit button if a list is not owned", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: false,
+            is_shared: false,
+          },
+        ]}
+      />
+    );
+
+    const firstButtons = container.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const viewLink = within(firstButtons).getByTestId("Link");
+    expect(viewLink).not.toHaveClass("disabled");
+    expect(viewLink).toHaveTextContent("ViewVisible Icon");
+  });
+
+  it("displays the delete button only to library managers", () => {
+    const props = baseProps();
+    const { container, rerender } = render(<CustomListsSidebar {...props} />);
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(2);
+
+    rerender(<CustomListsSidebar {...props} isLibraryManager={false} />);
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+
+  it("does not render a delete button if a list is not owned", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: false,
+            is_shared: false,
+          },
+        ]}
+      />
+    );
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+
+  it("does not render a delete button if a list is shared", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: true,
+            is_shared: true,
+          },
+        ]}
+      />
+    );
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+});

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

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

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { renderWithProviders } from "../testUtils/withProviders";
+import Footer, {
+  makeFooterSupportContactText,
+} from "../../../src/components/Footer";
+import {
+  DEFAULT_SUPPORT_CONTACT_TEXT,
+  SupportContactLink,
+} from "../../../src/context/appContext";
+
+const expectedTosText = "Terms of Service Text";
+const expectedTosHref = "terms_of_service";
+const testSupportContactEmail = "helpdesk@example.com";
+const expectedSupportContact: SupportContactLink = {
+  href: `mailto:${testSupportContactEmail}?subject=Support+request`,
+  text: `Email ${testSupportContactEmail}.`,
+};
+const expectedSupportContactText = makeFooterSupportContactText(
+  expectedSupportContact.text
+);
+
+// Builds the app config the ContextProvider transforms into terms-of-service and
+// support-contact context, mirroring the legacy test's `getFooterProviders`.
+const footerConfig = ({ hasSupportContactUrl = false } = {}) => ({
+  tos_link_text: expectedTosText,
+  tos_link_href: expectedTosHref,
+  // Include support contact URL only if we ask for it.
+  support_contact_url: hasSupportContactUrl
+    ? "https://example.com/link-from-deprecated-setting"
+    : undefined,
+  supportContactUrl: hasSupportContactUrl
+    ? expectedSupportContact.href
+    : undefined,
+});
+
+describe("Footer", () => {
+  it("accepts an optional className prop", () => {
+    const { container } = renderWithProviders(
+      <Footer className="customClass" />,
+      { appConfigSettings: footerConfig() }
+    );
+    expect(container.querySelector("footer")).toHaveClass("customClass");
+  });
+
+  it("displays a terms of service link", () => {
+    const { container } = renderWithProviders(<Footer />, {
+      appConfigSettings: footerConfig(),
+    });
+    const links = container.querySelectorAll("a");
+    expect(links).toHaveLength(1);
+
+    expect(links[0]).toHaveTextContent(expectedTosText);
+    expect(links[0]).toHaveAttribute("href", expectedTosHref);
+  });
+
+  describe("support contact link", () => {
+    it("displays a support contact link, when URL present", () => {
+      const { container } = renderWithProviders(<Footer />, {
+        appConfigSettings: footerConfig({ hasSupportContactUrl: true }),
+      });
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(2);
+
+      // The second link should be the support contact link.
+      expect(links[1]).toHaveAttribute("href", expectedSupportContact.href);
+      expect(links[1]).toHaveTextContent(expectedSupportContactText);
+    });
+
+    it("omits contact link, when no support URL provided", () => {
+      const { container } = renderWithProviders(<Footer />, {
+        appConfigSettings: footerConfig({ hasSupportContactUrl: false }),
+      });
+      // There should only be one link....
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(1);
+
+      // ... and it should be the TOS link, not a support contact link.
+      expect(links[0]).not.toHaveAttribute("href", expectedSupportContact.href);
+      expect(links[0]).toHaveAttribute("href", expectedTosHref);
+    });
+
+    it("displays a default label for an https url", () => {
+      const { container } = renderWithProviders(<Footer />, {
+        appConfigSettings: { supportContactUrl: "https://example.com/support" },
+      });
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(2);
+      expect(links[1]).toHaveAttribute("href", "https://example.com/support");
+      expect(links[1]).toHaveTextContent(
+        makeFooterSupportContactText(DEFAULT_SUPPORT_CONTACT_TEXT)
+      );
+    });
+
+    it("displays a custom label for an https url", () => {
+      const { container } = renderWithProviders(<Footer />, {
+        appConfigSettings: {
+          supportContactUrl: "https://example.com/support",
+          supportContactText: "Custom Support Text",
+        },
+      });
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(2);
+      expect(links[1]).toHaveAttribute("href", "https://example.com/support");
+      expect(links[1]).toHaveTextContent(
+        makeFooterSupportContactText("Custom Support Text")
+      );
+    });
+
+    it("uses the deprecated support_contact_url if supportContactUrl is missing", () => {
+      const { container } = renderWithProviders(<Footer />, {
+        appConfigSettings: {
+          support_contact_url: "https://example.com/deprecated-support",
+        },
+      });
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(2);
+      expect(links[1]).toHaveAttribute(
+        "href",
+        "https://example.com/deprecated-support"
+      );
+      expect(links[1]).toHaveTextContent(
+        makeFooterSupportContactText(DEFAULT_SUPPORT_CONTACT_TEXT)
+      );
+    });
+
+    it("displays a custom label for a mailto url", () => {
+      const { container } = renderWithProviders(<Footer />, {
+        appConfigSettings: {
+          supportContactUrl: "mailto:custom@example.com",
+          supportContactText: "Email Us Now",
+        },
+      });
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(2);
+      expect(links[1]).toHaveAttribute("href", "mailto:custom@example.com");
+      expect(links[1]).toHaveTextContent(
+        makeFooterSupportContactText("Email Us Now")
+      );
+    });
+  });
+});

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import LanguageField from "../../../src/components/LanguageField";
+
+describe("LanguageField", () => {
+  const languages = {
+    eng: ["English"],
+    es: ["Spanish", "Castilian"],
+    spa: ["Spanish", "Castilian"],
+  };
+
+  it("renders an autocomplete field", () => {
+    const { container } = render(
+      <LanguageField name="language" languages={languages} />
+    );
+
+    // An <input> with a `list` attribute has the implicit ARIA role "combobox".
+    const input = screen.getByRole("combobox");
+    expect(input).toHaveAttribute("name", "language");
+    expect(input).toHaveAttribute("list", "language-autocomplete-list");
+    expect(
+      container.querySelector("datalist#language-autocomplete-list")
+    ).toBeInTheDocument();
+  });
+
+  it("renders a unique, ordered list of language names as options", () => {
+    const { container } = render(
+      <LanguageField name="language" languages={languages} />
+    );
+
+    const options = Array.from(
+      container.querySelectorAll<HTMLOptionElement>(
+        "#language-autocomplete-list option"
+      )
+    ).map((option) => option.value);
+
+    expect(options).toStrictEqual(["English", "Spanish", "Castilian"]);
+  });
+});