@thepalaceproject/circulation-admin 1.43.0-post.2 → 1.43.0-post.20

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

@@ -0,0 +1,152 @@
+import * as React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import GenreForm from "../../../src/components/GenreForm";
+import genreData from "../fixtures/genreData";
+
+const genreOptions = Object.keys(genreData["Fiction"]).map(
+  (name) => genreData["Fiction"][name]
+);
+const nonfictionOptions = Object.keys(genreData["Nonfiction"]).map(
+  (name) => genreData["Nonfiction"][name]
+);
+const bookGenres = ["Adventure", "Epic Fantasy"];
+
+const renderForm = (props: Record<string, unknown> = {}) => {
+  const addGenre = jest.fn();
+  const result = render(
+    <GenreForm
+      genreOptions={genreOptions}
+      bookGenres={bookGenres}
+      addGenre={addGenre}
+      {...props}
+    />
+  );
+  return { ...result, addGenre };
+};
+
+const genreSelect = (container: HTMLElement) =>
+  container.querySelector("select[name='genre']") as HTMLSelectElement;
+const genreOptionEls = (container: HTMLElement) =>
+  Array.from(
+    genreSelect(container).querySelectorAll<HTMLOptionElement>("option")
+  );
+const subgenreSelect = (container: HTMLElement) =>
+  container.querySelector(
+    "select[name='subgenre']"
+  ) as HTMLSelectElement | null;
+
+describe("GenreForm", () => {
+  describe("rendering", () => {
+    it("shows multiple select with top-level genres", () => {
+      const { container } = renderForm();
+      const topLevelGenres = genreOptions.filter(
+        (genre) => genre.parents.length === 0
+      );
+      const options = genreOptionEls(container);
+
+      expect(options).toHaveLength(topLevelGenres.length);
+      options.forEach((option, i) => {
+        const name = topLevelGenres[i].name;
+        const hasGenre = bookGenres.indexOf(name) !== -1;
+        const hasSubgenre = topLevelGenres[i].subgenres.length > 0;
+        const displayName = name + (hasSubgenre ? " >" : "");
+        expect(option.value).toBe(name);
+        expect(option.disabled).toBe(hasGenre);
+        expect(option.textContent).toBe(displayName);
+      });
+    });
+  });
+
+  describe("behavior", () => {
+    it("shows multiple select with subgenres when genre is selected", () => {
+      const { container, rerender } = renderForm();
+
+      // Nothing is selected yet: no subgenre select and no Add button.
+      expect(subgenreSelect(container)).toBeNull();
+      expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
+
+      // Select a genre with no subgenres (the first option). The component wires
+      // selection to `onClick` on each <option>, so fire a click there.
+      const firstGenre = genreOptionEls(container)[0];
+      fireEvent.click(firstGenre);
+      expect(firstGenre).toHaveAttribute("aria-selected", "true");
+      expect(subgenreSelect(container)).toBeNull();
+      expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+
+      // Select a genre that has subgenres.
+      const fantasy = genreOptionEls(container).find(
+        (option) => option.value === "Fantasy"
+      );
+      fireEvent.click(fantasy);
+      expect(fantasy).toHaveAttribute("aria-selected", "true");
+
+      const subSelect = subgenreSelect(container);
+      expect(subSelect).not.toBeNull();
+      const subOptions = Array.from(
+        subSelect.querySelectorAll<HTMLOptionElement>("option")
+      );
+      const subgenres = [...genreData["Fiction"]["Fantasy"].subgenres].sort();
+
+      expect(subOptions).toHaveLength(subgenres.length);
+      subOptions.forEach((option, i) => {
+        const name = subgenres[i];
+        const hasGenre = bookGenres.indexOf(name) !== -1;
+        expect(option.value).toBe(name);
+        expect(option.disabled).toBe(hasGenre);
+        expect(option.textContent).toBe(name);
+      });
+
+      // Selecting a subgenre marks it as selected.
+      fireEvent.click(subOptions[0]);
+      expect(
+        subgenreSelect(container).querySelector('option[value="Epic Fantasy"]')
+      ).toHaveAttribute("aria-selected", "true");
+
+      // Changing the genre options (fiction -> nonfiction) drops the subgenres,
+      // since the selected genre no longer exists in the new options.
+      rerender(
+        <GenreForm
+          genreOptions={nonfictionOptions}
+          bookGenres={bookGenres}
+          addGenre={jest.fn()}
+        />
+      );
+      expect(subgenreSelect(container)).toBeNull();
+    });
+
+    it("shows add button only if genre is selected", () => {
+      const { container } = renderForm();
+      expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
+
+      const womensFiction = genreOptionEls(container).find(
+        (option) => option.value === "Women's Fiction"
+      );
+      fireEvent.click(womensFiction);
+
+      expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+    });
+
+    it("adds genre", async () => {
+      const user = userEvent.setup();
+      const { container, addGenre } = renderForm();
+
+      const scienceFiction = genreOptionEls(container).find(
+        (option) => option.value === "Science Fiction"
+      );
+      fireEvent.click(scienceFiction);
+
+      const spaceOpera = Array.from(
+        subgenreSelect(container).querySelectorAll<HTMLOptionElement>("option")
+      ).find((option) => option.value === "Space Opera");
+      fireEvent.click(spaceOpera);
+
+      await user.click(screen.getByRole("button", { name: "Add" }));
+
+      // The subgenre takes precedence over the top-level genre.
+      expect(addGenre).toHaveBeenCalledTimes(1);
+      expect(addGenre.mock.calls[0][0]).toBe("Space Opera");
+    });
+  });
+});