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

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

@@ -0,0 +1,352 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import BookEditForm from "../../../src/components/BookEditForm";
+import {
+  BookData,
+  RolesData,
+  MediaData,
+  LanguagesData,
+} from "../../../src/interfaces";
+installFormDataShim();
+
+describe("BookEditForm", () => {
+  const roles: RolesData = {
+    aut: "Author",
+    nar: "Narrator",
+  };
+
+  const media: MediaData = {
+    "http://schema.org/AudioObject": "Audio",
+    "http://schema.org/Book": "Book",
+  };
+
+  const languages: LanguagesData = {
+    eng: ["English"],
+    spa: ["Spanish", "Castilian"],
+  };
+
+  const bookData: BookData = {
+    id: "id",
+    title: "title",
+    subtitle: "subtitle",
+    authors: [{ name: "An Author", role: "aut" }],
+    contributors: [
+      { name: "A Narrator", role: "nar" },
+      { name: "Another Narrator", role: "nar" },
+    ],
+    fiction: true,
+    audience: "Young Adult",
+    targetAgeRange: ["12", "16"],
+    summary: "summary",
+    series: "series",
+    seriesPosition: 3,
+    medium: "http://schema.org/AudioObject",
+    language: "eng",
+    publisher: "publisher",
+    imprint: "imprint",
+    issued: "2017-04-03",
+    rating: 4,
+    editLink: {
+      href: "href",
+      rel: "edit",
+    },
+  };
+
+  type Props = React.ComponentProps<typeof BookEditForm>;
+
+  const makeProps = (overrides: Partial<Props> = {}): Props => ({
+    ...(bookData as Props),
+    roles,
+    media,
+    languages,
+    disabled: false,
+    refresh: jest.fn(),
+    editBook: jest.fn().mockResolvedValue(undefined),
+    ...overrides,
+  });
+
+  const renderForm = (overrides: Partial<Props> = {}) => {
+    const props = makeProps(overrides);
+    const result = render(<BookEditForm {...props} />);
+    const rerender = (nextOverrides: Partial<Props>) =>
+      result.rerender(<BookEditForm {...makeProps(nextOverrides)} />);
+    return { ...result, rerender, props };
+  };
+
+  const inputsByName = (container: HTMLElement, name: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLInputElement>(`input[name="${name}"]`)
+    );
+  const selectsByName = (container: HTMLElement, name: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLSelectElement>(`select[name="${name}"]`)
+    );
+
+  describe("rendering", () => {
+    it("shows editable input with title", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(container.querySelector('input[name="title"]')).toHaveValue(
+        "title"
+      );
+    });
+
+    it("shows editable input with subtitle", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Subtitle")).toBeInTheDocument();
+      expect(container.querySelector('input[name="subtitle"]')).toHaveValue(
+        "subtitle"
+      );
+    });
+
+    it("shows authors and contributors", () => {
+      const { container } = renderForm();
+
+      const names = inputsByName(container, "contributor-name");
+      const contributorRoles = selectsByName(container, "contributor-role");
+      expect(names).toHaveLength(4);
+      expect(contributorRoles).toHaveLength(4);
+
+      expect(names[0]).toHaveValue("An Author");
+      expect(contributorRoles[0]).toHaveValue("Author");
+      expect(names[1]).toHaveValue("A Narrator");
+      expect(contributorRoles[1]).toHaveValue("Narrator");
+      expect(names[2]).toHaveValue("Another Narrator");
+      expect(contributorRoles[2]).toHaveValue("Narrator");
+
+      // The last inputs are for adding a new contributor.
+      expect(names[3]).toHaveValue("");
+      expect(contributorRoles[3]).toHaveValue("Author");
+      expect(
+        container.querySelector("button.add-contributor")
+      ).toBeInTheDocument();
+
+      // Existing authors and contributors are removable.
+      expect(
+        container.querySelectorAll(".with-remove-button .remove-btn")
+      ).toHaveLength(3);
+
+      // All role inputs have the same options.
+      [contributorRoles[1], contributorRoles[3]].forEach((select) => {
+        const options = within(select).getAllByRole("option");
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveValue("Author");
+        expect(options[1]).toHaveValue("Narrator");
+      });
+    });
+
+    it("shows editable input with series", () => {
+      const { container } = renderForm();
+      expect(container.querySelector('input[name="series"]')).toHaveValue(
+        "series"
+      );
+    });
+
+    it("shows editable input with series position", () => {
+      const { container } = renderForm();
+      expect(
+        container.querySelector('input[name="series_position"]')
+      ).toHaveValue("3");
+    });
+
+    it("shows editable input with medium", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Medium")).toBeInTheDocument();
+      expect(container.querySelector('select[name="medium"]')).toHaveValue(
+        "Audio"
+      );
+    });
+
+    it("shows a language field", () => {
+      const { container, rerender } = renderForm();
+      expect(screen.getByText("Language")).toBeInTheDocument();
+      expect(container.querySelector('input[name="language"]')).toHaveValue(
+        "English"
+      );
+
+      rerender({ language: "fre" });
+      expect(container.querySelector('input[name="language"]')).toHaveValue(
+        "fre"
+      );
+    });
+
+    it("shows editable input with publisher", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Publisher")).toBeInTheDocument();
+      expect(container.querySelector('input[name="publisher"]')).toHaveValue(
+        "publisher"
+      );
+    });
+
+    it("shows editable input with imprint", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Imprint")).toBeInTheDocument();
+      expect(container.querySelector('input[name="imprint"]')).toHaveValue(
+        "imprint"
+      );
+    });
+
+    it("shows editable input with publication date", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Publication Date")).toBeInTheDocument();
+      expect(container.querySelector('input[name="issued"]')).toHaveValue(
+        "2017-04-03"
+      );
+    });
+
+    it("shows editable input with rating", () => {
+      const { container } = renderForm();
+      expect(screen.getByText(/Rating/)).toBeInTheDocument();
+      const rating = container.querySelector<HTMLInputElement>(
+        'input[name="rating"]'
+      );
+      expect(rating).toHaveValue(4);
+    });
+
+    it("shows editable textarea with summary", () => {
+      const { container } = renderForm();
+      const editor = container.querySelector<HTMLElement>(".editor");
+      expect(within(editor).getByText("Summary")).toBeInTheDocument();
+      expect(editor.querySelector(".DraftEditor-root")).toHaveTextContent(
+        "summary"
+      );
+    });
+  });
+
+  it("removes a contributor", async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    let removeButtons = screen.getAllByRole("button", { name: "Delete" });
+    expect(removeButtons).toHaveLength(3);
+
+    // Remove the first narrator (index 1: An Author, A Narrator, Another Narrator).
+    await user.click(removeButtons[1]);
+
+    removeButtons = screen.getAllByRole("button", { name: "Delete" });
+    expect(removeButtons).toHaveLength(2);
+
+    const names = inputsByName(container, "contributor-name");
+    const contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(3);
+    expect(contributorRoles).toHaveLength(3);
+    expect(names[0]).toHaveValue("An Author");
+    expect(contributorRoles[0]).toHaveValue("Author");
+    expect(names[1]).toHaveValue("Another Narrator");
+    expect(contributorRoles[1]).toHaveValue("Narrator");
+    expect(names[2]).toHaveValue("");
+    expect(contributorRoles[2]).toHaveValue("Author");
+  });
+
+  it("adds a contributor", async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    let names = inputsByName(container, "contributor-name");
+    let contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(4);
+    expect(contributorRoles).toHaveLength(4);
+
+    // Fill in the empty "add" name field (the last one); its role defaults to
+    // Author. Typing enables the Add button.
+    await user.type(names[3], "New Author");
+    await user.click(container.querySelector("button.add-contributor"));
+
+    names = inputsByName(container, "contributor-name");
+    contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(5);
+    expect(contributorRoles).toHaveLength(5);
+
+    expect(names[0]).toHaveValue("An Author");
+    expect(contributorRoles[0]).toHaveValue("Author");
+    expect(names[1]).toHaveValue("A Narrator");
+    expect(contributorRoles[1]).toHaveValue("Narrator");
+    expect(names[2]).toHaveValue("Another Narrator");
+    expect(contributorRoles[2]).toHaveValue("Narrator");
+    expect(names[3]).toHaveValue("New Author");
+    expect(contributorRoles[3]).toHaveValue("Author");
+    expect(names[4]).toHaveValue("");
+    expect(contributorRoles[4]).toHaveValue("Author");
+  });
+
+  it("calls editBook on submit", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    renderForm({ editBook });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(editBook).toHaveBeenCalledTimes(1);
+    const [url, data] = editBook.mock.calls[0];
+    expect(url).toBe("href");
+    expect(data.get("title")).toBe(bookData.title);
+    expect(data.get("subtitle")).toBe(bookData.subtitle);
+
+    // The last contributor field is the empty one for adding a new contributor.
+    // If the user had filled it in without clicking "Add", it would still be
+    // submitted.
+    expect(data.getAll("contributor-name")).toStrictEqual([
+      "An Author",
+      "A Narrator",
+      "Another Narrator",
+      "",
+    ]);
+    expect(data.getAll("contributor-role")).toStrictEqual([
+      "Author",
+      "Narrator",
+      "Narrator",
+      "Author",
+    ]);
+
+    expect(data.get("series")).toBe(bookData.series);
+    expect(data.get("series_position")).toBe(String(bookData.seriesPosition));
+    expect(data.get("medium")).toBe("Audio");
+    expect(data.get("language")).toBe("English");
+    expect(data.get("publisher")).toBe(bookData.publisher);
+    expect(data.get("imprint")).toBe(bookData.imprint);
+    expect(data.get("issued")).toBe(bookData.issued);
+    expect(data.get("rating")).toBe("4");
+    expect(data.get("summary")).toContain(bookData.summary);
+  });
+
+  it("refreshes book after editing", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    const refresh = jest.fn().mockResolvedValue(undefined);
+    renderForm({ editBook, refresh });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
+  });
+
+  it("only adds updated summary content if it's not empty", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    const refresh = jest.fn().mockResolvedValue(undefined);
+    // Since we are adding an empty string, there should be no `summary` value
+    // in the FormData object that gets passed to the `editBook` function.
+    renderForm({
+      editBook,
+      refresh,
+      summary: "<p></p>",
+      editLink: { href: "test-url", rel: "something" },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(editBook).toHaveBeenCalledTimes(1));
+    expect(editBook.mock.calls[0][1].get("summary")).toBeNull();
+  });
+
+  it("disables all inputs", () => {
+    const { container } = renderForm({ disabled: true });
+
+    container
+      .querySelectorAll("input, select")
+      .forEach((input) => expect(input).toBeDisabled());
+  });
+});

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