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

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import EditableInput from "../../../src/components/EditableInput";
 
 describe("EditableInput", () => {
@@ -62,3 +63,251 @@ describe("EditableInput", () => {
     expect(textboxes[5]).toHaveAccessibleDescription("");
   });
 });
+
+// Value/change handling, the prop-sync in componentWillReceiveProps, and the
+// imperative ref API (getValue/getChecked/setValue/clear) that parents like
+// ProtocolFormField use.
+describe("EditableInput - value, change, and imperative API", () => {
+  it("updates as the user types and reports the value via getValue()", async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput ref={ref} label="Field" value="" onChange={onChange} />
+    );
+
+    const input = screen.getByRole("textbox", { name: "Field" });
+    await user.type(input, "hello");
+
+    expect(input).toHaveValue("hello");
+    expect(ref.current?.getValue()).toBe("hello");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("toggles a checkbox and reports it via getChecked()", async () => {
+    const user = userEvent.setup();
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput ref={ref} type="checkbox" label="Check" checked={false} />
+    );
+
+    const box = screen.getByRole("checkbox", { name: "Check" });
+    await user.click(box);
+
+    expect(box).toBeChecked();
+    expect(ref.current?.getChecked()).toBe(true);
+  });
+
+  it("does not fire onChange when readOnly", () => {
+    const onChange = jest.fn();
+    render(<EditableInput label="RO" value="x" readOnly onChange={onChange} />);
+
+    // `userEvent.type` honors the DOM's read-only semantics and never dispatches
+    // a change event, so it would never reach handleChange. Dispatch directly, so
+    // the component's own readOnly guard is what stops onChange.
+    fireEvent.change(screen.getByRole("textbox", { name: "RO" }), {
+      target: { value: "y" },
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("syncs its value when the value prop changes", () => {
+    const { rerender } = render(<EditableInput label="F" value="a" />);
+    const input = screen.getByRole("textbox", { name: "F" });
+    expect(input).toHaveValue("a");
+
+    rerender(<EditableInput label="F" value="b" />);
+    expect(input).toHaveValue("b");
+  });
+
+  it("syncs its checked state when the checked prop changes", () => {
+    const { rerender } = render(
+      <EditableInput type="checkbox" label="C" checked={false} />
+    );
+    const box = screen.getByRole("checkbox", { name: "C" });
+    expect(box).not.toBeChecked();
+
+    rerender(<EditableInput type="checkbox" label="C" checked={true} />);
+    expect(box).toBeChecked();
+  });
+
+  it("setValue and clear update the value imperatively", () => {
+    const ref = React.createRef<EditableInput>();
+    render(<EditableInput ref={ref} label="F" value="a" />);
+    const input = screen.getByRole("textbox", { name: "F" });
+
+    act(() => ref.current?.setValue("z"));
+    expect(input).toHaveValue("z");
+
+    act(() => ref.current?.clear());
+    expect(input).toHaveValue("");
+  });
+
+  it("clear also resets a checked box", () => {
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput ref={ref} type="checkbox" label="C" checked={true} />
+    );
+    const box = screen.getByRole("checkbox", { name: "C" });
+    expect(box).toBeChecked();
+
+    act(() => ref.current?.clear());
+    expect(box).not.toBeChecked();
+  });
+
+  // A falsy-but-valid value must survive: this is what defaultValueIfMissing
+  // guards, and what a naive `props.value || ""` would silently break.
+  it("keeps a zero value rather than falling back to the empty default", () => {
+    const { rerender } = render(<EditableInput label="F" value={0} />);
+    const input = screen.getByRole("textbox", { name: "F" });
+    expect(input).toHaveValue("0");
+
+    rerender(<EditableInput label="F" value="a" />);
+    expect(input).toHaveValue("a");
+
+    rerender(<EditableInput label="F" value={0} />);
+    expect(input).toHaveValue("0");
+  });
+});
+
+describe("EditableInput - labels, children, and pass-through props", () => {
+  it("labels a radio input and toggles it", async () => {
+    const user = userEvent.setup();
+    const ref = React.createRef<EditableInput>();
+    render(
+      <EditableInput
+        ref={ref}
+        type="radio"
+        label="Radio label"
+        name="r"
+        checked={false}
+      />
+    );
+
+    const radio = screen.getByRole("radio", { name: "Radio label" });
+    expect(radio).not.toBeChecked();
+
+    await user.click(radio);
+
+    expect(radio).toBeChecked();
+    expect(ref.current?.getChecked()).toBe(true);
+  });
+
+  it("renders children into the element", () => {
+    render(
+      <EditableInput elementType="select" label="S" name="s" value="b">
+        <option value="a">option a</option>
+        <option value="b">option b</option>
+      </EditableInput>
+    );
+
+    const select = screen.getByRole("combobox", { name: "S" });
+    expect(select).toHaveValue("b");
+    expect(
+      Array.from(select.querySelectorAll("option")).map((o) => o.textContent)
+    ).toEqual(["option a", "option b"]);
+  });
+
+  it("forwards the disabled prop to the element", () => {
+    render(<EditableInput label="F" name="name" disabled={true} value="v" />);
+    expect(screen.getByRole("textbox", { name: "F" })).toBeDisabled();
+  });
+
+  // renderDescription uses dangerouslySetInnerHTML, and callers pass markup.
+  it("renders the description as HTML", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        optionalText={false}
+        description="<p>description</p>"
+      />
+    );
+
+    const description = container.querySelector(".description");
+    expect(description.innerHTML).toContain("<p>description</p>");
+  });
+
+  it("shows extra content in an add-on wrapper only when supplied", () => {
+    const { container, rerender } = render(
+      <EditableInput label="F" name="name" value="v" />
+    );
+    expect(container.querySelector(".with-add-on")).toBeNull();
+
+    rerender(
+      <EditableInput
+        label="F"
+        name="name"
+        value="v"
+        extraContent={<span>Extra content!</span>}
+      />
+    );
+
+    const extra = container.querySelector(".with-add-on");
+    expect(extra).not.toBeNull();
+    expect(extra).toHaveTextContent("Extra content!");
+  });
+});
+
+// The error styling is a compound predicate:
+//   clientError || (error && error.status >= 400 && !value && required)
+describe("EditableInput - error styling", () => {
+  const formGroup = (container: HTMLElement) =>
+    container.querySelector(".form-group");
+
+  it("applies no error class by default", () => {
+    const { container } = render(
+      <EditableInput label="F" name="name" value="initial value" />
+    );
+    expect(formGroup(container)).not.toHaveClass("field-error");
+  });
+
+  it("applies the error class on a client error", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        value="initial value"
+        clientError={true}
+      />
+    );
+    expect(formGroup(container)).toHaveClass("field-error");
+  });
+
+  it("applies the error class for a blank required field after a server error", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        error={{ status: 400, response: "", url: "" }}
+        required={true}
+      />
+    );
+    expect(formGroup(container)).toHaveClass("field-error");
+  });
+
+  it("does not apply the error class when the required field has a value", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        value="a value"
+        error={{ status: 400, response: "", url: "" }}
+        required={true}
+      />
+    );
+    expect(formGroup(container)).not.toHaveClass("field-error");
+  });
+
+  it("does not apply the error class for a server error on an optional field", () => {
+    const { container } = render(
+      <EditableInput
+        label="F"
+        name="name"
+        error={{ status: 400, response: "", url: "" }}
+        required={false}
+      />
+    );
+    expect(formGroup(container)).not.toHaveClass("field-error");
+  });
+});

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

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { RichUtils } from "draft-js";
+
+import EditorField from "../../../src/components/EditorField";
+
+describe("EditorField", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders the three inline-style buttons and toggles the matching style on mouse-down", () => {
+    // There is no DOM-observable effect of toggling an inline style over a
+    // collapsed (unfocused) selection, so we drive the real mouse-down interaction
+    // and observe the actual `RichUtils.toggleInlineStyle` call the button triggers.
+    const toggleSpy = jest.spyOn(RichUtils, "toggleInlineStyle");
+
+    const { container } = render(
+      <EditorField content="This is a summary." disabled={false} />
+    );
+
+    const buttons = Array.from(container.querySelectorAll("button"));
+    expect(buttons).toHaveLength(3);
+    const [bold, italic, underline] = buttons;
+
+    expect(bold).toHaveTextContent("Bold");
+    expect(bold.querySelector("b")).toBeInTheDocument();
+    expect(italic).toHaveTextContent("Italic");
+    expect(italic.querySelector("i")).toBeInTheDocument();
+    expect(underline).toHaveTextContent("Underline");
+    expect(underline.querySelector("u")).toBeInTheDocument();
+
+    expect(toggleSpy).not.toHaveBeenCalled();
+
+    fireEvent.mouseDown(bold);
+    expect(toggleSpy).toHaveBeenCalledTimes(1);
+    expect(toggleSpy.mock.calls[0][1]).toBe("BOLD");
+
+    fireEvent.mouseDown(italic);
+    expect(toggleSpy).toHaveBeenCalledTimes(2);
+    expect(toggleSpy.mock.calls[1][1]).toBe("ITALIC");
+
+    fireEvent.mouseDown(underline);
+    expect(toggleSpy).toHaveBeenCalledTimes(3);
+    expect(toggleSpy.mock.calls[2][1]).toBe("UNDERLINE");
+  });
+
+  it("exposes the current content as HTML through getValue()", () => {
+    // `getValue()` is EditorField's real imperative API (BookEditForm reads it via a
+    // ref), so mirror that: render with a ref and call it.
+    const ref = React.createRef<EditorField>();
+    render(
+      <EditorField ref={ref} content="This is a summary." disabled={false} />
+    );
+    expect(ref.current?.getValue()).toBe("<p>This is a summary.</p>");
+  });
+
+  it("falls back to the default content when the content is empty", () => {
+    const expected = "<p>Update the content for this field.</p>";
+
+    const emptyParagraphRef = React.createRef<EditorField>();
+    render(
+      <EditorField ref={emptyParagraphRef} content="<p></p>" disabled={false} />
+    );
+    expect(emptyParagraphRef.current?.getValue()).toBe(expected);
+
+    const emptyStringRef = React.createRef<EditorField>();
+    render(<EditorField ref={emptyStringRef} content="" disabled={false} />);
+    expect(emptyStringRef.current?.getValue()).toBe(expected);
+
+    const undefinedRef = React.createRef<EditorField>();
+    render(
+      <EditorField ref={undefinedRef} content={undefined} disabled={false} />
+    );
+    expect(undefinedRef.current?.getValue()).toBe(expected);
+  });
+
+  it("disables the toolbar buttons and the editor when disabled", () => {
+    const { container, rerender } = render(
+      <EditorField content="This is a summary." disabled={false} />
+    );
+
+    const buttons = () => Array.from(container.querySelectorAll("button"));
+    const editable = () => container.querySelector("[contenteditable]");
+
+    expect(buttons()).toHaveLength(3);
+    buttons().forEach((button) => expect(button).not.toBeDisabled());
+    expect(editable()).toHaveAttribute("contenteditable", "true");
+
+    rerender(<EditorField content="This is a summary." disabled={true} />);
+
+    buttons().forEach((button) => expect(button).toBeDisabled());
+    expect(editable()).toHaveAttribute("contenteditable", "false");
+  });
+});

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