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

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

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import ConnectedChangePasswordForm, {
+  ChangePasswordForm,
+} from "../../../src/components/ChangePasswordForm";
+// The reusable-components `Form` builds `new FormData(formElement)` on
+// submit, which the unit jsdom env's undici FormData rejects; install the
+// shared shim that reads the form's successful controls.
+installFormDataShim();
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+// Render the unconnected class so tests can pass a `changePassword` spy and
+// drive props directly. A separate test below renders the connected default
+// export to cover the connect wiring (mapStateToProps/mapDispatchToProps).
+const renderUnconnected = (
+  props: Partial<React.ComponentProps<typeof ChangePasswordForm>> = {}
+) =>
+  render(
+    <ChangePasswordForm
+      isFetching={false}
+      csrfToken="token"
+      changePassword={jest.fn().mockResolvedValue(undefined)}
+      {...props}
+    />
+  );
+
+const passwordInput = (container: HTMLElement) =>
+  container.querySelector('input[name="password"]') as HTMLInputElement;
+const confirmInput = (container: HTMLElement) =>
+  container.querySelector('input[name="confirm_password"]') as HTMLInputElement;
+
+describe("ChangePasswordForm", () => {
+  it("shows an error message when there is a fetch error", () => {
+    const { container, rerender } = renderUnconnected();
+    expect(container.querySelector(".alert-danger")).not.toBeInTheDocument();
+
+    rerender(
+      <ChangePasswordForm
+        isFetching={false}
+        csrfToken="token"
+        changePassword={jest.fn()}
+        fetchError={{ status: 500, response: "response", url: "" }}
+      />
+    );
+
+    expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+    expect(screen.getByText("Error: response")).toBeInTheDocument();
+  });
+
+  it("shows a loading indicator while fetching", () => {
+    const { rerender } = renderUnconnected({ isFetching: false });
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+
+    rerender(
+      <ChangePasswordForm
+        isFetching={true}
+        csrfToken="token"
+        changePassword={jest.fn()}
+      />
+    );
+
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+  });
+
+  it("renders the two labeled password inputs", () => {
+    const { container } = renderUnconnected();
+
+    expect(passwordInput(container)).toHaveAttribute("type", "password");
+    expect(confirmInput(container)).toHaveAttribute("type", "password");
+
+    const labels = container.querySelectorAll("label.control-label");
+    expect(labels[0]).toHaveTextContent("New Password");
+    expect(labels[1]).toHaveTextContent("Confirm New Password");
+  });
+
+  it("does not submit a blank form", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    renderUnconnected({ changePassword });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Fields cannot be blank.")).toBeInTheDocument();
+  });
+
+  // Rendered fresh, so the error message asserted below can only have come from
+  // this partial submit rather than lingering from an earlier blank one.
+  it("does not submit a partially blank form", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+    expect(screen.queryByText("Fields cannot be blank.")).toBeNull();
+
+    // Only the first field filled.
+    await user.type(passwordInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Fields cannot be blank.")).toBeInTheDocument();
+  });
+
+  it("does not submit when the passwords do not match", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "somethingElse");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Passwords do not match.")).toBeInTheDocument();
+  });
+
+  it("submits the new password and shows a success message", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).toHaveBeenCalledTimes(1);
+    const submittedData = changePassword.mock.calls[0][0];
+    expect(submittedData.get("password")).toBe("newPassword");
+    expect(submittedData.get("confirm_password")).toBe("newPassword");
+
+    expect(
+      await screen.findByText("Password changed successfully")
+    ).toBeInTheDocument();
+  });
+
+  it("dispatches the password change through the connected store", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = jest
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("ok", { status: 200 }));
+
+    const { container } = renderWithProviders(
+      <ConnectedChangePasswordForm csrfToken="token" />
+    );
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(
+      await screen.findByText("Password changed successfully")
+    ).toBeInTheDocument();
+    expect(fetchSpy).toHaveBeenCalledWith(
+      "/admin/change_password",
+      expect.objectContaining({ method: "POST" })
+    );
+  });
+});

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 "../fixtures/genreData";
+import classificationsData from "../fixtures/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");
+  });
+});