@thepalaceproject/circulation-admin 1.43.0-post.2 → 1.43.0-post.20

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/EntryPointsContainer.test.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// The wrapped `Collection` (from web-opds-client) is incidental here — the
+// container's job is to pull the "Formats" facets out and hand them to
+// `EntryPointsTabs`. Mock Collection to a marker so we can render the real
+// EntryPointsTabs and assert the tabs it produces.
+jest.mock(
+  "@thepalaceproject/web-opds-client/lib/components/Collection",
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="collection" />,
+  })
+);
+
+// EntryPointsTabs renders CatalogLink -> React Router `Link`, which needs router
+// context renderWithProviders does not supply. Mock `Link` to a marker.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import EntryPointsContainer from "../../../src/components/EntryPointsContainer";
+
+// Stands in for the OPDS Collection child whose `collection` prop the container
+// reads. It is never rendered by the container (only its props are inspected).
+class CollectionChild extends React.Component<{ collection: unknown }> {
+  render() {
+    return null;
+  }
+}
+
+describe("EntryPointsContainer", () => {
+  it("should not render entry-point tabs if no facets were passed", () => {
+    const collection = {
+      facetGroups: [],
+      lanes: [],
+      books: [],
+      navigationLinks: [],
+    };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    expect(
+      container.querySelector(".entry-points-tab-container")
+    ).toBeInTheDocument();
+    // EntryPointsTabs renders nothing when there are no format facets.
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("shows a tab container with facets when the label is 'Formats'", () => {
+    const facetGroups = [
+      {
+        facets: [],
+        label: "Some other facets",
+      },
+      {
+        facets: [
+          {
+            label: "Ebooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+            active: false,
+          },
+          {
+            label: "Audiobooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+            active: false,
+          },
+        ],
+        label: "Formats",
+      },
+    ];
+    const collection = { facetGroups };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import { FacetData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Each tab is a CatalogLink, which renders a React Router `Link`. Router `Link`
+// needs router context that `renderWithProviders` does not supply, so mock it to
+// a marker that exposes its navigation target and children (matching Lane.test.tsx).
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import { EntryPointsTabs } from "../../../src/components/EntryPointsTabs";
+
+const twoFacets: FacetData[] = [
+  {
+    label: "Ebooks",
+    href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+    active: true,
+  },
+  {
+    label: "Audiobooks",
+    href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+    active: false,
+  },
+];
+
+describe("EntryPointsTabs", () => {
+  it("should not generate any tabs", () => {
+    const { container } = renderWithProviders(<EntryPointsTabs />);
+
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("should generate two tabs with two entry points", () => {
+    const { container } = renderWithProviders(
+      <EntryPointsTabs facets={twoFacets} />
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+
+    const items = list.querySelectorAll("li");
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveClass("active");
+    expect(items[1]).not.toHaveClass("active");
+
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+
+  it("uses router to navigate when a tab is clicked", () => {
+    renderWithProviders(<EntryPointsTabs facets={twoFacets} />);
+
+    const links = screen.getAllByTestId("Link");
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveTextContent("Ebooks");
+    expect(links[1]).toHaveTextContent("Audiobooks");
+    // Each tab links somewhere for the router to navigate to.
+    expect(links[0]).toHaveAttribute("data-to");
+    expect(links[1]).toHaveAttribute("data-to");
+  });
+
+  it("should generate one tab with an active entry point", () => {
+    const oneFacet: FacetData[] = [
+      {
+        label: "Audiobooks",
+        href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+        active: true,
+      },
+    ];
+    const { container } = renderWithProviders(
+      <EntryPointsTabs facets={oneFacet} />
+    );
+
+    const items = container.querySelectorAll("ul.nav-tabs li");
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveClass("active");
+
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ErrorMessage from "../../../src/components/ErrorMessage";
+
+describe("ErrorMessage", () => {
+  it("shows logged out message for 401 error", () => {
+    render(<ErrorMessage error={{ status: 401, response: "", url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent("logged out");
+  });
+
+  it("shows detail for problem detail", () => {
+    render(
+      <ErrorMessage
+        error={{
+          status: 500,
+          response: JSON.stringify({ status: 500, detail: "detail" }),
+          url: "",
+        }}
+      />
+    );
+
+    expect(screen.getByRole("alert")).toHaveTextContent("detail");
+  });
+
+  it("shows response for non-json response", () => {
+    render(
+      <ErrorMessage error={{ status: 500, response: "response", url: "" }} />
+    );
+
+    expect(screen.getByRole("alert")).toHaveTextContent("response");
+  });
+
+  it("parses non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document: {\"status\": 502, \"detail\": problem text, \"title\": TITLE}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document with status 502: problem text"
+    );
+    expect(screen.getByText("TITLE")).toBeInTheDocument();
+  });
+
+  it("can handle missing detail property in non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document: {\"status\": 502, \"title\": TITLE}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document with status 502:"
+    );
+    expect(screen.getByText("TITLE")).toBeInTheDocument();
+  });
+
+  it("can handle missing status property in non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document:  {\"detail\": problem text, \"title\": TITLE}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document: problem text"
+    );
+    expect(screen.getByText("TITLE")).toBeInTheDocument();
+  });
+
+  it("can handle missing title property in non-JSON problem detail string", () => {
+    // prettier-ignore
+    const response = "Remote service returned a problem detail document:  {\"status\": 502, \"detail\": problem text}";
+    render(<ErrorMessage error={{ status: 500, response, url: "" }} />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Remote service returned a problem detail document with status 502:"
+    );
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  it("shows a try again button that fires the callback when clicked", async () => {
+    const user = userEvent.setup();
+    const tryAgain = jest.fn();
+    render(
+      <ErrorMessage
+        error={{ status: 500, response: "response", url: "" }}
+        tryAgain={tryAgain}
+      />
+    );
+
+    const tryAgainButton = screen.getByRole("button", { name: "Try again" });
+    expect(tryAgainButton).toBeInTheDocument();
+
+    await user.click(tryAgainButton);
+
+    expect(tryAgain).toHaveBeenCalledTimes(1);
+  });
+});