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

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

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

@@ -0,0 +1,259 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ConnectedComplaints, {
+  Complaints,
+} from "../../../src/components/Complaints";
+import { renderWithProviders } from "../testUtils/withProviders";
+
+const bookData = {
+  id: "id",
+  title: "test title",
+  issuesLink: {
+    href: "issues url",
+    rel: "issues",
+  },
+};
+
+const complaintsData = {
+  "http://librarysimplified.org/terms/problem/test-type": 5,
+  "http://librarysimplified.org/terms/problem/other-type": 3,
+  "http://librarysimplified.org/terms/problem/last-type": 1,
+};
+
+// The unconnected `Complaints` takes its data + dispatch functions as props, so
+// a bare `render` (no store) is enough for the rendering/behavior assertions.
+// One separate test below renders the connected default export through the real
+// providers to cover the connect() wiring (mapStateToProps/mapDispatchToProps).
+const renderComplaints = (
+  props: Partial<React.ComponentProps<typeof Complaints>> = {}
+) =>
+  render(
+    <Complaints
+      csrfToken="token"
+      bookUrl="book url"
+      book={bookData}
+      complaints={complaintsData}
+      fetchComplaints={jest.fn()}
+      postComplaint={jest.fn()}
+      refreshCatalog={jest.fn()}
+      {...props}
+    />
+  );
+
+describe("Complaints", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("rendering", () => {
+    it("shows the book title", () => {
+      renderComplaints();
+      expect(
+        screen.getByRole("heading", { name: "test title" })
+      ).toBeInTheDocument();
+    });
+
+    it("shows complaints with their counts", () => {
+      const { container } = renderComplaints();
+      const types = Array.from(
+        container.querySelectorAll(".complaint-type")
+      ).map((el) => el.textContent);
+      const counts = Array.from(
+        container.querySelectorAll(".complaint-count")
+      ).map((el) => parseInt(el.textContent || "", 10));
+      expect(types).toStrictEqual(["Test type", "Other type", "Last type"]);
+      expect(counts).toStrictEqual([5, 3, 1]);
+    });
+
+    it("shows simplified complaint types", () => {
+      const { container } = renderComplaints();
+      const types = Array.from(
+        container.querySelectorAll(".complaint-type")
+      ).map((el) => el.textContent);
+      expect(types).toStrictEqual(["Test type", "Other type", "Last type"]);
+    });
+
+    it("shows an unrecognized complaint type unchanged", () => {
+      // A type that does not match the /terms/problem/ pattern is rendered as-is.
+      const { container } = renderComplaints({
+        complaints: { "custom-complaint": 2 },
+      });
+      const types = Array.from(
+        container.querySelectorAll(".complaint-type")
+      ).map((el) => el.textContent);
+      expect(types).toStrictEqual(["custom-complaint"]);
+    });
+
+    it("shows an enabled resolve button for each complaint type", () => {
+      renderComplaints();
+      const buttons = screen.getAllByRole("button", { name: "Resolve" });
+      expect(buttons).toHaveLength(Object.keys(complaintsData).length);
+      buttons.forEach((button) => expect(button).not.toBeDisabled());
+    });
+
+    it("shows an enabled complaint form when the book has an issues link", () => {
+      const { container } = renderComplaints();
+      // The ComplaintForm is only rendered when `book.issuesLink` exists, so its
+      // presence (with an enabled select) reflects that the form was wired up.
+      expect(screen.getByText("Add Complaint")).toBeInTheDocument();
+      const select = container.querySelector("select") as HTMLSelectElement;
+      expect(select).toBeInTheDocument();
+      expect(select).not.toBeDisabled();
+    });
+
+    it("shows a fetch error and re-fetches when trying again", async () => {
+      const user = userEvent.setup();
+      const fetchComplaints = jest.fn();
+      const fetchError = { status: 401, response: "test", url: "test url" };
+      const { container } = render(
+        <Complaints
+          csrfToken="token"
+          bookUrl="book url"
+          book={{ id: "id", title: "test book" }}
+          fetchError={fetchError}
+          fetchComplaints={fetchComplaints}
+          postComplaint={jest.fn()}
+          refreshCatalog={jest.fn()}
+        />
+      );
+
+      // The error alert is rendered from the fetchError prop.
+      expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+      // fetchComplaints is called once on mount (bookUrl is set).
+      expect(fetchComplaints).toHaveBeenCalledTimes(1);
+
+      await user.click(screen.getByRole("button", { name: "Try again" }));
+
+      expect(fetchComplaints).toHaveBeenCalledTimes(2);
+      expect(fetchComplaints.mock.calls[1][0]).toBe("book url/complaints");
+    });
+  });
+
+  describe("behavior", () => {
+    const singleComplaint = {
+      "http://librarysimplified.org/terms/problem/test-type": 2,
+    };
+    const bookUrl = "http://example.com/works/fakeid";
+
+    it("fetches complaints on mount", () => {
+      const fetchComplaints = jest.fn();
+      render(
+        <Complaints
+          csrfToken="token"
+          book={{ id: "id", title: "test book" }}
+          bookUrl={bookUrl}
+          complaints={singleComplaint}
+          fetchComplaints={fetchComplaints}
+          refreshCatalog={jest.fn()}
+          resolveComplaints={jest.fn().mockResolvedValue(undefined)}
+        />
+      );
+
+      expect(fetchComplaints).toHaveBeenCalledTimes(1);
+      expect(fetchComplaints.mock.calls[0][0]).toBe(
+        "http://example.com/admin/works/fakeid/complaints"
+      );
+    });
+
+    it("resolves a complaint type when its resolve button is clicked", async () => {
+      const user = userEvent.setup();
+      jest.spyOn(window, "confirm").mockReturnValue(true);
+      const resolveComplaints = jest.fn().mockResolvedValue(undefined);
+      render(
+        <Complaints
+          csrfToken="token"
+          book={{ id: "id", title: "test book" }}
+          bookUrl={bookUrl}
+          complaints={singleComplaint}
+          fetchComplaints={jest.fn()}
+          refreshCatalog={jest.fn()}
+          resolveComplaints={resolveComplaints}
+        />
+      );
+
+      await user.click(screen.getByRole("button", { name: "Resolve" }));
+
+      expect(resolveComplaints).toHaveBeenCalledTimes(1);
+      expect(resolveComplaints.mock.calls[0][0]).toBe(
+        "http://example.com/admin/works/fakeid/resolve_complaints"
+      );
+      // The FormData sent along carries the complaint type being resolved.
+      const submittedData = resolveComplaints.mock.calls[0][1];
+      expect(submittedData.get("type")).toBe(
+        "http://librarysimplified.org/terms/problem/test-type"
+      );
+    });
+
+    it("re-fetches complaints and refreshes the catalog after resolving", async () => {
+      const user = userEvent.setup();
+      jest.spyOn(window, "confirm").mockReturnValue(true);
+      const fetchComplaints = jest.fn();
+      const refreshCatalog = jest.fn();
+      const resolveComplaints = jest.fn().mockResolvedValue(undefined);
+      render(
+        <Complaints
+          csrfToken="token"
+          book={{ id: "id", title: "test book" }}
+          bookUrl={bookUrl}
+          complaints={singleComplaint}
+          fetchComplaints={fetchComplaints}
+          refreshCatalog={refreshCatalog}
+          resolveComplaints={resolveComplaints}
+        />
+      );
+
+      await user.click(screen.getByRole("button", { name: "Resolve" }));
+
+      await waitFor(() => expect(refreshCatalog).toHaveBeenCalledTimes(1));
+      expect(resolveComplaints).toHaveBeenCalledTimes(1);
+      // Once on mount, and again as part of the post-resolve refresh.
+      expect(fetchComplaints).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("connect() wiring", () => {
+    it("renders the connected default export, mapping state and dispatch", async () => {
+      const fetchSpy = jest.spyOn(globalThis, "fetch").mockResolvedValue(
+        new Response(JSON.stringify({ complaints: {} }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        })
+      );
+
+      const { container } = renderWithProviders(
+        <ConnectedComplaints
+          bookUrl="http://example.com/works/fakeid"
+          book={{ id: "id", title: "connected book" }}
+          csrfToken="token"
+          refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        />
+      );
+
+      // Own prop flows through the connected component.
+      expect(
+        screen.getByRole("heading", { name: "connected book" })
+      ).toBeInTheDocument();
+
+      // mapDispatchToProps.fetchComplaints ran on mount and hit the network.
+      await waitFor(() => expect(fetchSpy).toHaveBeenCalled());
+      expect(fetchSpy.mock.calls[0][0]).toBe(
+        "http://example.com/admin/works/fakeid/complaints"
+      );
+
+      // Let the request/load cycle settle (isFetching true -> false), which also
+      // flushes the pending fetch so it cannot reject during teardown.
+      await waitFor(() =>
+        expect(
+          container.querySelector(".updating-loader")
+        ).not.toBeInTheDocument()
+      );
+
+      // mapStateToProps: no complaints in the store -> "None found." is shown.
+      expect(screen.getByText("None found.")).toBeInTheDocument();
+
+      jest.restoreAllMocks();
+    });
+  });
+});

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

@@ -0,0 +1,138 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+
+import ContextProvider from "../../../src/components/ContextProvider";
+import Admin from "../../../src/models/Admin";
+import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+import { ConfigurationSettings } from "../../../src/interfaces";
+
+// Reads everything ContextProvider puts on the legacy React context — the real
+// contract the app's pages consume — so we can assert on it without reaching for
+// the component instance.
+let captured: any;
+class Capture extends React.Component {
+  static contextTypes = {
+    editorStore: PropTypes.object,
+    csrfToken: PropTypes.string,
+    settingUp: PropTypes.bool,
+    admin: PropTypes.object,
+    featureFlags: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  render() {
+    captured = this.context;
+    return <div>child rendered</div>;
+  }
+}
+
+const renderWithConfig = (config: Partial<ConfigurationSettings>) =>
+  render(
+    <ContextProvider config={config as ConfigurationSettings}>
+      <Capture />
+    </ContextProvider>
+  );
+
+describe("ContextProvider", () => {
+  beforeEach(() => {
+    captured = undefined;
+  });
+
+  it("provides child context", () => {
+    renderWithConfig({
+      csrfToken: "token",
+      featureFlags: defaultFeatureFlags,
+      roles: [{ role: "system" }],
+      email: "email",
+    });
+
+    expect(captured.editorStore.getState().editor).toBeTruthy();
+    expect(captured.editorStore.getState().catalog).toBeTruthy();
+    expect(captured.csrfToken).toBe("token");
+    expect(captured.settingUp).toBeFalsy();
+    expect(captured.admin instanceof Admin).toBe(true);
+    expect(captured.admin.isSystemAdmin()).toBe(true);
+    expect(captured.admin.email).toBe("email");
+  });
+
+  it("saves the enableAutoList feature flag to the store", () => {
+    renderWithConfig({
+      csrfToken: "token",
+      featureFlags: { enableAutoList: true },
+    });
+
+    expect(
+      captured.editorStore.getState().editor.customListEditor
+        .isAutoUpdateEnabled
+    ).toBe(true);
+  });
+
+  it("renders its child", () => {
+    renderWithConfig({ csrfToken: "token", featureFlags: {} });
+    expect(screen.getByText("child rendered")).toBeInTheDocument();
+  });
+
+  it("passes pathFor down through context", () => {
+    renderWithConfig({ csrfToken: "token", featureFlags: {} });
+    expect(typeof captured.pathFor).toBe("function");
+  });
+
+  describe("pathFor", () => {
+    // prepareCollectionUrl / prepareBookUrl strip only `document.location.origin`,
+    // so using the real jsdom origin as the host yields the same encoded output the
+    // legacy test asserted (it forced the origin to example.com via jsdom.reconfigure,
+    // which the unit test environment does not provide). These calls also exercise
+    // prepareCollectionUrl and prepareBookUrl transitively.
+    const host = window.location.origin;
+    const collectionUrl = `${host}/groups/eng/Adult%20Fiction`;
+    const bookUrl = `${host}/library/works/Axis%20360/Axis%20360%20ID/0016201449`;
+    const preparedCollection = "groups%2Feng%2FAdult%2520Fiction";
+    const preparedBook =
+      "library%2FAxis%2520360%2FAxis%2520360%2520ID%2F0016201449";
+
+    beforeEach(() => {
+      renderWithConfig({ csrfToken: "token", featureFlags: {} });
+    });
+
+    it("returns a path with collection, book, and tab", () => {
+      expect(captured.pathFor(collectionUrl, bookUrl, "tab")).toBe(
+        `/admin/web/collection/${preparedCollection}/book/${preparedBook}/tab/tab`
+      );
+    });
+
+    it("returns a path with collection and book", () => {
+      expect(captured.pathFor(collectionUrl, bookUrl, null)).toBe(
+        `/admin/web/collection/${preparedCollection}/book/${preparedBook}`
+      );
+    });
+
+    it("returns a path with only a collection", () => {
+      expect(captured.pathFor(collectionUrl, null, null)).toBe(
+        `/admin/web/collection/${preparedCollection}`
+      );
+    });
+
+    it("returns a path with only a book", () => {
+      expect(captured.pathFor(null, bookUrl, null)).toBe(
+        `/admin/web/book/${preparedBook}`
+      );
+    });
+
+    it("returns a path with a book and tab", () => {
+      expect(captured.pathFor(null, bookUrl, "tab")).toBe(
+        `/admin/web/book/${preparedBook}/tab/tab`
+      );
+    });
+
+    it("returns the base path with no collection, book, or tab", () => {
+      expect(captured.pathFor(null, null, null)).toBe("/admin/web");
+    });
+
+    it("leaves a book url unchanged when it does not match the works pattern", () => {
+      // prepareBookUrl returns the url as-is when the /works/ regexp misses.
+      expect(captured.pathFor(null, "not-a-works-url", null)).toBe(
+        "/admin/web/book/not-a-works-url"
+      );
+    });
+  });
+});