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

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import CirculationEventsDownloadForm from "../../../src/components/CirculationEventsDownloadForm";
+
+describe("CirculationEventsDownloadForm", () => {
+  let hide: jest.Mock;
+
+  beforeEach(() => {
+    hide = jest.fn();
+    render(<CirculationEventsDownloadForm show={true} hide={hide} />);
+  });
+
+  it("renders start date and end date inputs", () => {
+    // The modal renders into a portal, so query the whole document.
+    const dates =
+      document.querySelectorAll<HTMLInputElement>("input[type='date']");
+    expect(dates).toHaveLength(2);
+    expect(dates[0].name).toBe("dateStart");
+    expect(dates[1].name).toBe("dateEnd");
+  });
+
+  it("renders download and close buttons", async () => {
+    const user = userEvent.setup();
+
+    expect(
+      screen.getByRole("button", { name: "Download" })
+    ).toBeInTheDocument();
+
+    // The modal header's dismiss control is also labeled "Close" (its visible
+    // "×" is aria-hidden), so scope to the footer for the reusable Close button.
+    const footer = document.querySelector<HTMLElement>(".modal-footer");
+    const closeButton = within(footer).getByRole("button", { name: "Close" });
+    expect(closeButton).toBeInTheDocument();
+
+    await user.click(closeButton);
+
+    expect(hide).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,166 @@
+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";
+import genreData from "../../../src/components/__tests__/genreData";
+import classificationsData from "../../../src/components/__tests__/classificationsData";
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised. The genre tree and classifications are fetched on mount and fed
+// back in through the Redux store; `book` and `refreshCatalog` are own props.
+import Classifications, {
+  Classifications as UnconnectedClassifications,
+} from "../../../src/components/Classifications";
+
+// A `targetAgeRange` is required: ClassificationsForm reads it in bookChanged on
+// re-render (the legacy enzyme test used shallow, so the child never re-rendered).
+const bookData = {
+  title: "title",
+  fiction: true,
+  categories: ["Space Opera"],
+  targetAgeRange: [null, null],
+};
+const bookUrl = "works/1234";
+const classificationsUrl = "admin/works/1234/classifications";
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+// Resolves each fetch with the appropriate body based on the request URL/method.
+const stubFetch = () =>
+  jest
+    .spyOn(globalThis, "fetch")
+    .mockImplementation(async (url, opts?: RequestInit) => {
+      const u = String(url);
+      if (opts?.method === "POST") {
+        return new Response("success", { status: 200 });
+      }
+      if (u === "/admin/genres") {
+        return jsonResponse(genreData);
+      }
+      if (u.endsWith("/classifications")) {
+        return jsonResponse({ classifications: classificationsData });
+      }
+      // getBookData (OPDS) on refresh — non-OPDS body so it settles quietly.
+      return new Response("{}", { status: 200 });
+    });
+
+const renderConnected = (
+  overrides: Partial<{ refreshCatalog: () => Promise<any> }> = {}
+) => {
+  const store = buildStore();
+  const refreshCatalog =
+    overrides.refreshCatalog ?? jest.fn().mockResolvedValue(undefined);
+  const result = renderWithProviders(
+    <Classifications
+      store={store}
+      csrfToken="token"
+      bookUrl={bookUrl}
+      book={bookData as any}
+      refreshCatalog={refreshCatalog}
+    />,
+    { reduxProviderProps: { store } }
+  );
+  return { ...result, refreshCatalog };
+};
+
+describe("Classifications", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the book title", async () => {
+    stubFetch();
+    renderConnected();
+    expect(
+      await screen.findByRole("heading", { level: 2, name: "title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows the updating indicator while fetching", () => {
+    // A never-resolving fetch keeps the panel in its fetching state.
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(() => new Promise(() => {}));
+    const { container } = renderConnected();
+    expect(container.querySelector(".updating-loader")).toBeInTheDocument();
+  });
+
+  it("shows the classifications form and table once the data loads, and hides the updating indicator", async () => {
+    stubFetch();
+    const { container } = renderConnected();
+
+    // The form renders once the genre tree loads.
+    expect(
+      await screen.findByRole("button", { name: "Save" })
+    ).toBeInTheDocument();
+    // The table renders once the classifications load.
+    expect(
+      screen.getByRole("heading", { name: "Related Classifications" })
+    ).toBeInTheDocument();
+    // A sample classification from the fixture shows in the table.
+    expect(screen.getByText("FICTION / Ghost")).toBeInTheDocument();
+    // Fetching is done, so the updating indicator is gone.
+    expect(container.querySelector(".updating-loader")).not.toBeInTheDocument();
+  });
+
+  it("shows a fetch error", () => {
+    // A network failure on mount would reject the (uncaught) fetch promise and
+    // crash the worker, so drive the error through the prop that connect derives.
+    render(
+      <UnconnectedClassifications
+        store={buildStore() as any}
+        csrfToken="token"
+        bookUrl={bookUrl}
+        book={bookData as any}
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        bookAdminUrl="book admin url"
+        fetchError={{ status: 500, url: "url", response: "response" } as any}
+        fetchGenreTree={jest.fn()}
+        fetchClassifications={jest.fn()}
+        fetchBook={jest.fn()}
+        editClassifications={jest.fn().mockResolvedValue(undefined)}
+        genreTree={null}
+        classifications={null}
+        isFetching={false}
+      />
+    );
+    expect(screen.getByText(/Error: response/)).toBeInTheDocument();
+  });
+
+  it("fetches the genre tree and classifications on mount", async () => {
+    const fetchSpy = stubFetch();
+    renderConnected();
+    await screen.findByRole("button", { name: "Save" });
+
+    const urls = fetchSpy.mock.calls.map(([u]) => String(u));
+    expect(urls).toContain("/admin/genres");
+    expect(urls).toContain(classificationsUrl);
+  });
+
+  it("refreshes the book, classifications, and catalog after editing classifications", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch();
+    const { container, refreshCatalog } = renderConnected();
+
+    await screen.findByRole("button", { name: "Save" });
+
+    // The form requires an audience selection before it will submit.
+    await user.selectOptions(
+      container.querySelector('select[name="audience"]') as HTMLSelectElement,
+      "Adult"
+    );
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    // Editing POSTs the edit_classifications URL, then refreshes the catalog.
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalledTimes(1));
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/1234/edit_classifications");
+  });
+});

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ClassificationsTable from "../../../src/components/ClassificationsTable";
+import classificationsData from "../../../src/components/__tests__/classificationsData";
+
+// Mirrors ClassificationsTable's own `readableType`: it strips the genres URL
+// prefix so the displayed type is human-readable.
+const readableType = (type: string) =>
+  type.replace(
+    /http:\/\/librarysimplified\.org\/terms\/genres\/([^/]+)\//,
+    "$1"
+  );
+
+describe("ClassificationsTable", () => {
+  describe("rendering", () => {
+    it("should show header", () => {
+      render(<ClassificationsTable classifications={classificationsData} />);
+
+      expect(
+        screen.getByRole("heading", {
+          level: 3,
+          name: "Related Classifications",
+        })
+      ).toBeInTheDocument();
+    });
+
+    it("should show column headers", () => {
+      render(<ClassificationsTable classifications={classificationsData} />);
+
+      const headers = screen.getAllByRole("columnheader");
+      expect(headers.map((header) => header.textContent)).toStrictEqual([
+        "Type",
+        "Name",
+        "Source",
+        "Weight",
+      ]);
+    });
+
+    it("should show one row for each classification", () => {
+      const { container } = render(
+        <ClassificationsTable classifications={classificationsData} />
+      );
+
+      const rows = container.querySelectorAll("tbody tr");
+      expect(rows).toHaveLength(classificationsData.length);
+      rows.forEach((row, i) => {
+        const cells = row.querySelectorAll("td");
+        const c = classificationsData[i];
+        expect(cells[0].textContent).toBe(readableType(c.type));
+        expect(cells[1].textContent).toBe(c.name);
+        expect(cells[2].textContent).toBe(c.source);
+        expect(parseInt(cells[3].textContent, 10)).toBe(c.weight);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ColorPicker from "../../../src/components/ColorPicker";
+
+describe("ColorPicker", () => {
+  const setting = {
+    key: "key",
+    label: "label",
+  };
+
+  it("should show the compact picker", () => {
+    const { container } = render(
+      <ColorPicker setting={setting} value="#123456" />
+    );
+
+    // The react-color CompactPicker renders a `.compact-picker` container whose
+    // hex field reflects the color it was given.
+    expect(container.querySelector(".compact-picker")).toBeInTheDocument();
+    expect(screen.getByLabelText("hex")).toHaveValue("#123456");
+  });
+
+  it("should have a hidden input with the value", () => {
+    const { container } = render(
+      <ColorPicker setting={setting} value="#123456" />
+    );
+
+    const input = container.querySelector<HTMLInputElement>(
+      'input[type="hidden"]'
+    );
+    expect(input).toHaveAttribute("name", "key");
+    expect(input).toHaveValue("#123456");
+  });
+
+  it("should change the value", async () => {
+    const user = userEvent.setup();
+    // getValue() is the imperative API ProtocolFormField calls via a ref in
+    // production, so exercise it through a real ref here.
+    const ref = React.createRef<ColorPicker>();
+    const { container } = render(
+      <ColorPicker ref={ref} setting={setting} value="#123456" />
+    );
+    const hiddenInput = container.querySelector<HTMLInputElement>(
+      'input[type="hidden"]'
+    );
+
+    expect(ref.current.getValue()).toBe("#123456");
+    expect(hiddenInput).toHaveValue("#123456");
+
+    // Clicking a palette swatch fires the picker's onChangeComplete, which
+    // updates the component's value (react-color debounces that callback).
+    await user.click(screen.getByTitle("#FE9200"));
+
+    await waitFor(() => expect(ref.current.getValue()).toBe("#fe9200"));
+    expect(hiddenInput).toHaveValue("#fe9200");
+  });
+});

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

@@ -0,0 +1,171 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ComplaintForm from "../../../src/components/ComplaintForm";
+installFormDataShim();
+
+// ComplaintForm's default export is a plain (unconnected) class component, so a
+// bare `render` is sufficient — no providers/store/context are required.
+const renderForm = (
+  props: Partial<React.ComponentProps<typeof ComplaintForm>> = {}
+) =>
+  render(
+    <ComplaintForm
+      disabled={false}
+      complaintUrl="complaint url"
+      postComplaint={jest.fn().mockResolvedValue(undefined)}
+      refreshComplaints={jest.fn()}
+      {...props}
+    />
+  );
+
+const getSelect = (container: HTMLElement) =>
+  container.querySelector("select") as HTMLSelectElement;
+
+describe("ComplaintForm", () => {
+  describe("rendering", () => {
+    it("shows a select field with a default value", () => {
+      const { container } = renderForm();
+      const select = getSelect(container);
+      expect(select).toBeInTheDocument();
+      expect(select).not.toBeDisabled();
+      expect(screen.getAllByRole("option")[0]).toHaveTextContent(
+        "Complaint type"
+      );
+    });
+
+    it("shows complaint type options", () => {
+      renderForm();
+      const values = screen
+        .getAllByRole("option")
+        .map((option) => (option as HTMLOptionElement).value);
+      expect(values).toStrictEqual([
+        "",
+        "cannot-issue-loan",
+        "cannot-render",
+        "wrong-title",
+        "wrong-author",
+        "wrong-audience",
+        "cannot-fulfill-loan",
+        "bad-description",
+        "cannot-return",
+        "bad-cover-image",
+        "wrong-medium",
+        "wrong-age-range",
+        "wrong-genre",
+      ]);
+    });
+
+    it("formats complaint type options", () => {
+      renderForm();
+      const texts = screen
+        .getAllByRole("option")
+        .map((option) => option.textContent);
+      expect(texts).toStrictEqual([
+        "Complaint type",
+        "Cannot issue loan",
+        "Cannot render",
+        "Wrong title",
+        "Wrong author",
+        "Wrong audience",
+        "Cannot fulfill loan",
+        "Bad description",
+        "Cannot return",
+        "Bad cover image",
+        "Wrong medium",
+        "Wrong age range",
+        "Wrong genre",
+      ]);
+    });
+
+    it("shows a submit button", () => {
+      renderForm();
+      expect(
+        screen.getByRole("button", { name: "Submit" })
+      ).toBeInTheDocument();
+    });
+
+    it("disables the select and submit button when disabled", () => {
+      const { container } = renderForm({ disabled: true });
+      expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+      expect(getSelect(container)).toBeDisabled();
+    });
+  });
+
+  describe("behavior", () => {
+    it("posts complaints", async () => {
+      const user = userEvent.setup();
+      const postComplaint = jest.fn().mockResolvedValue(undefined);
+      const { container } = renderForm({ postComplaint });
+
+      await user.selectOptions(getSelect(container), "bad-description");
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(postComplaint).toHaveBeenCalledTimes(1);
+      expect(postComplaint.mock.calls[0][0]).toBe("complaint url");
+      expect(postComplaint.mock.calls[0][1].type).toBe(
+        "http://librarysimplified.org/terms/problem/bad-description"
+      );
+    });
+
+    it("refreshes complaints after a successful post", async () => {
+      const user = userEvent.setup();
+      const refreshComplaints = jest.fn();
+      const { container } = renderForm({
+        postComplaint: jest.fn().mockResolvedValue(undefined),
+        refreshComplaints,
+      });
+
+      await user.selectOptions(getSelect(container), "bad-description");
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      await waitFor(() => expect(refreshComplaints).toHaveBeenCalledTimes(1));
+    });
+
+    it("clears the selected complaint type after a successful post", async () => {
+      const user = userEvent.setup();
+      const { container } = renderForm({
+        postComplaint: jest.fn().mockResolvedValue(undefined),
+      });
+
+      const select = getSelect(container);
+      await user.selectOptions(select, "bad-description");
+      expect(select).toHaveValue("bad-description");
+
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      await waitFor(() => expect(getSelect(container)).toHaveValue(""));
+    });
+
+    it("displays an error if no type is selected", async () => {
+      const user = userEvent.setup();
+      const postComplaint = jest.fn().mockResolvedValue(undefined);
+      renderForm({ postComplaint });
+
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(
+        await screen.findByText("You must select a complaint type!")
+      ).toBeInTheDocument();
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "You must select a complaint type!"
+      );
+      expect(postComplaint).not.toHaveBeenCalled();
+    });
+
+    it("shows an error message if the post fails", async () => {
+      const user = userEvent.setup();
+      const postComplaint = jest.fn().mockRejectedValue(new Error("nope"));
+      const { container } = renderForm({ postComplaint });
+
+      await user.selectOptions(getSelect(container), "bad-description");
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(
+        await screen.findByText("Couldn't post complaint.")
+      ).toBeInTheDocument();
+    });
+  });
+});