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

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

@@ -304,11 +304,7 @@ describe("InventoryReportRequestModal", () => {
     const NO_EMAIL_CONTEXT_PROVIDER_PROPS = { email: undefined };
 
     it("shows the modal when `show` is true", async () => {
-      const {
-        getAllByRole,
-        queryAllByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getAllByRole, queryAllByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={false}
           onHide={onHide}
@@ -385,19 +381,15 @@ describe("InventoryReportRequestModal", () => {
       let show = true;
       onHide.mockImplementation(() => (show = false));
 
-      const {
-        getAllByRole,
-        getByRole,
-        queryAllByRole,
-        rerender,
-      } = renderWithProviders(
-        <InventoryReportRequestModal
-          show={show}
-          onHide={onHide}
-          library={LIBRARY}
-        />,
-        { queryClient }
-      );
+      const { getAllByRole, getByRole, queryAllByRole, rerender } =
+        renderWithProviders(
+          <InventoryReportRequestModal
+            show={show}
+            onHide={onHide}
+            library={LIBRARY}
+          />,
+          { queryClient }
+        );
       getAllByRole("dialog");
       expect(show).toBe(true);
       expect(onHide).not.toHaveBeenCalled();
@@ -420,10 +412,7 @@ describe("InventoryReportRequestModal", () => {
     });
 
     it("updates confirmation message, if report info request arrives in time", async () => {
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -457,10 +446,7 @@ describe("InventoryReportRequestModal", () => {
         )
       );
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -505,10 +491,7 @@ describe("InventoryReportRequestModal", () => {
         )
       );
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -538,10 +521,7 @@ describe("InventoryReportRequestModal", () => {
     it("requests report generation, if request confirmed", async () => {
       const user = userEvent.setup();
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -574,10 +554,7 @@ describe("InventoryReportRequestModal", () => {
     it("displays success message, when request is successful", async () => {
       const user = userEvent.setup();
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}
@@ -615,10 +592,7 @@ describe("InventoryReportRequestModal", () => {
       );
       const user = userEvent.setup();
 
-      const {
-        getByRole,
-        rerender,
-      } = renderWithProviders(
+      const { getByRole, rerender } = renderWithProviders(
         <InventoryReportRequestModal
           show={true}
           onHide={onHide}

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

@@ -19,13 +19,9 @@ const customListsData = [
   { id: 1, name: "list 1", entries: [], is_owner: true, is_shared: false },
 ];
 
-const editLane = stub().returns(
-  new Promise<void>((resolve) => resolve())
-);
+const editLane = stub().returns(new Promise<void>((resolve) => resolve()));
 
-const deleteLane = stub().returns(
-  new Promise<void>((resolve) => resolve())
-);
+const deleteLane = stub().returns(new Promise<void>((resolve) => resolve()));
 
 const toggleLaneVisibility = stub();
 

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { screen, waitForElementToBeRemoved } from "@testing-library/react";
+import * as fetchMock from "fetch-mock-jest";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that renderWithProviders does not supply. 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 Lanes child (and its sidebar/editor) renders React Router `Link`s,
+// which need router context renderWithProviders does not supply. Mock `Link` to
+// a marker, matching Lane.test.tsx.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => <div data-testid="Link">{props.children}</div>,
+}));
+
+import LanePage from "../../../src/components/LanePage";
+
+describe("LanePage", () => {
+  beforeAll(() => {
+    Object.assign(fetchMock.config, { fetch, Headers, Request, Response });
+  });
+
+  beforeEach(() => {
+    // Lanes fetches lanes and custom lists on mount; stub the network so no real
+    // request is made.
+    fetchMock.mock("*", { lanes: [], custom_lists: [] });
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it("shows lanes with info from params", async () => {
+    const params = {
+      library: "library",
+      editOrCreate: "edit",
+      identifier: "5",
+    };
+
+    const { container } = renderWithProviders(<LanePage params={params} />);
+
+    // Header and Footer chrome are composed around the body.
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+
+    // The real Lanes child renders its container...
+    expect(container.querySelector("main.lanes-container")).toBeInTheDocument();
+    // ...and, because editOrCreate is "edit", its lane editor panel.
+    expect(container.querySelector(".lane-editor")).toBeInTheDocument();
+
+    // While its on-mount fetches (lanes and custom lists) are in flight, Lanes
+    // shows a loading indicator. Wait for it to clear so those fetches settle
+    // and their state updates flush, instead of racing a fixed-length timer.
+    await waitForElementToBeRemoved(() =>
+      screen.queryByRole("dialog", { name: "Loading" })
+    );
+  });
+});

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