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

package/package.json

@@ -143,5 +143,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.43.0-post.10"
+  "version": "1.43.0-post.11"
 }

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Announcement from "../../../src/components/Announcement";
+
+describe("Announcement", () => {
+  let stubDelete: jest.Mock;
+  let stubEdit: jest.Mock;
+
+  beforeEach(() => {
+    stubDelete = jest.fn();
+    stubEdit = jest.fn();
+  });
+
+  const renderAnnouncement = (
+    overrides: Partial<React.ComponentProps<typeof Announcement>> = {}
+  ) =>
+    render(
+      <Announcement
+        content="test"
+        start="2020-05-12"
+        finish="2020-05-28"
+        id="1"
+        delete={stubDelete}
+        edit={stubEdit}
+        {...overrides}
+      />
+    );
+
+  it("renders the content and dates", () => {
+    const { container } = renderAnnouncement();
+
+    expect(
+      container.querySelector("section.announcement-info")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".dates")).toHaveTextContent(
+      "05/12/2020 – 05/28/2020"
+    );
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+
+  it("renders an edit button", async () => {
+    const user = userEvent.setup();
+    renderAnnouncement();
+
+    const editButton = screen.getByRole("button", { name: "Edit" });
+    await user.click(editButton);
+
+    expect(stubEdit).toHaveBeenCalledTimes(1);
+    expect(stubEdit).toHaveBeenCalledWith("1");
+  });
+
+  it("renders a delete button", async () => {
+    const user = userEvent.setup();
+    renderAnnouncement();
+
+    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    await user.click(deleteButton);
+
+    expect(stubDelete).toHaveBeenCalledTimes(1);
+    expect(stubDelete).toHaveBeenCalledWith("1");
+  });
+
+  it("formats dates", () => {
+    // The dates are stored as year-month-day but displayed as month/day/year.
+    const { container } = renderAnnouncement({
+      start: "2020-03-14",
+      finish: "2021-12-25",
+    });
+
+    expect(container.querySelector(".dates")).toHaveTextContent(
+      "03/14/2020 – 12/25/2021"
+    );
+  });
+});

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Autocomplete from "../../../src/components/Autocomplete";
+
+describe("Autocomplete", () => {
+  const autocompleteValues = ["a", "b", "c"];
+
+  const renderAutocomplete = (ref?: React.Ref<Autocomplete>) =>
+    render(
+      <Autocomplete
+        ref={ref}
+        autocompleteValues={autocompleteValues}
+        disabled={false}
+        name="test"
+        label="Test"
+        value="b"
+      />
+    );
+
+  describe("rendering", () => {
+    it("shows input", () => {
+      renderAutocomplete();
+
+      expect(screen.getByText("Test")).toBeInTheDocument();
+      // An <input> with a `list` attribute has the implicit role "combobox".
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("type", "text");
+      expect(input).not.toBeDisabled();
+      expect(input).toHaveAttribute("name", "test");
+      expect(input).toHaveValue("b");
+      expect(input).toHaveAttribute("list", "test-autocomplete-list");
+    });
+
+    it("shows autocomplete list", () => {
+      const { container } = renderAutocomplete();
+
+      const list = container.querySelector("datalist#test-autocomplete-list");
+      expect(list).toBeInTheDocument();
+      const options = list.querySelectorAll("option");
+      expect(options).toHaveLength(3);
+      expect(options[0]).toHaveAttribute("value", "a");
+      expect(options[1]).toHaveAttribute("value", "b");
+      expect(options[2]).toHaveAttribute("value", "c");
+    });
+  });
+
+  describe("behavior", () => {
+    it("returns value", async () => {
+      const user = userEvent.setup();
+      // getValue() is the imperative API ProtocolFormField/LanguageField call
+      // via a ref in production, so exercise it through a real ref here.
+      const ref = React.createRef<Autocomplete>();
+      renderAutocomplete(ref);
+
+      expect(ref.current.getValue()).toBe("b");
+
+      const input = screen.getByRole("combobox");
+      await user.clear(input);
+      await user.type(input, "test value");
+
+      expect(input).toHaveValue("test value");
+      expect(ref.current.getValue()).toBe("test value");
+    });
+  });
+});

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

@@ -0,0 +1,275 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+import {
+  PER_LIBRARY_SUPPRESS_REL,
+  PER_LIBRARY_UNSUPPRESS_REL,
+} from "../../../src/features/book/bookEditorSlice";
+
+// BookEditForm is a heavy child; the legacy enzyme tests only shallow-rendered
+// it and asserted the props it received. Mock it to a marker that surfaces those
+// props as data attributes so the same facts can be asserted against real DOM.
+jest.mock("../../../src/components/BookEditForm", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-edit-form"
+      data-title={props.title}
+      data-roles={JSON.stringify(props.roles ?? null)}
+      data-media={JSON.stringify(props.media ?? null)}
+      data-languages={JSON.stringify(props.languages ?? null)}
+    />
+  ),
+}));
+
+import BookDetailsEditor, {
+  BookDetailsEditor as UnconnectedBookDetailsEditor,
+} from "../../../src/components/BookDetailsEditor";
+
+// The connected component derives bookData from OPDS parsing of a fetch, which is
+// impractical to synthesize; render the unconnected class with injected props for
+// the render-behavior tests (as the legacy enzyme tests did), and cover the
+// connect wiring with the dedicated connected test below.
+const renderEditor = (overrides: Record<string, unknown> = {}) => {
+  const props = {
+    bookUrl: "url",
+    csrfToken: "token",
+    canSuppress: true,
+    bookAdminUrl: "admin url",
+    bookData: undefined,
+    roles: undefined,
+    media: undefined,
+    languages: undefined,
+    isFetching: false,
+    fetchError: undefined,
+    editError: undefined,
+    refreshCatalog: jest.fn().mockResolvedValue(undefined),
+    fetchBookData: jest.fn(),
+    fetchRoles: jest.fn(),
+    fetchMedia: jest.fn(),
+    fetchLanguages: jest.fn(),
+    postBookData: jest.fn(),
+    suppressBook: jest.fn(),
+    unsuppressBook: jest.fn(),
+    ...overrides,
+  };
+  const result = render(<UnconnectedBookDetailsEditor {...(props as any)} />);
+  return { props, ...result };
+};
+
+describe("BookDetailsEditor", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("loads admin book url, roles, languages, and media on mount", () => {
+    const { props } = renderEditor({ bookUrl: "works/1234" });
+
+    expect(props.fetchBookData).toHaveBeenCalledTimes(1);
+    expect(props.fetchBookData).toHaveBeenCalledWith("admin/works/1234");
+    expect(props.fetchRoles).toHaveBeenCalledTimes(1);
+    expect(props.fetchMedia).toHaveBeenCalledTimes(1);
+    expect(props.fetchLanguages).toHaveBeenCalledTimes(1);
+  });
+
+  it("loads admin book url when given a new book url", () => {
+    const { props, rerender } = renderEditor({ bookUrl: "works/1234" });
+    rerender(
+      <UnconnectedBookDetailsEditor {...(props as any)} bookUrl="works/5555" />
+    );
+
+    expect(props.fetchBookData).toHaveBeenCalledTimes(2);
+    expect((props.fetchBookData as jest.Mock).mock.calls[1][0]).toBe(
+      "admin/works/5555"
+    );
+  });
+
+  it("shows the title", () => {
+    renderEditor({ bookData: { id: "id", title: "title" } });
+    expect(
+      screen.getByRole("heading", { level: 2, name: "title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a Hide button for a per-library suppress link", () => {
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        suppressPerLibraryLink: { href: "href", rel: PER_LIBRARY_SUPPRESS_REL },
+      },
+    });
+    expect(screen.getByRole("button", { name: "Hide" })).toBeInTheDocument();
+  });
+
+  it("shows a Restore button in the visibility banner for a per-library unsuppress link", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        unsuppressPerLibraryLink: {
+          href: "href",
+          rel: PER_LIBRARY_UNSUPPRESS_REL,
+        },
+        visibilityStatus: "manually-suppressed",
+      },
+    });
+    expect(container.querySelector(".visibility-status")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Restore" })).toBeInTheDocument();
+  });
+
+  it("shows the restore banner when an unsuppress link exists without a visibilityStatus", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        unsuppressPerLibraryLink: {
+          href: "href",
+          rel: PER_LIBRARY_UNSUPPRESS_REL,
+        },
+      },
+    });
+    expect(
+      container.querySelector(".visibility-status-manually-suppressed")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Restore" })).toBeInTheDocument();
+  });
+
+  it("shows the manually-suppressed banner without a restore button when there is no unsuppress link", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        visibilityStatus: "manually-suppressed",
+      },
+    });
+    const banner = container.querySelector(
+      ".visibility-status-manually-suppressed"
+    );
+    expect(banner).toBeInTheDocument();
+    expect(banner.textContent).toContain(
+      "manually hidden by a library staff member"
+    );
+    expect(
+      screen.queryByRole("button", { name: "Restore" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the policy-filtered banner without a restore button", () => {
+    const { container } = renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        visibilityStatus: "policy-filtered",
+      },
+    });
+    const banner = container.querySelector(
+      ".visibility-status-policy-filtered"
+    );
+    expect(banner).toBeInTheDocument();
+    expect(banner.textContent).toContain("library content filtering");
+    expect(
+      screen.queryByRole("button", { name: "Restore" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows a Refresh Metadata button for a refresh link", () => {
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        refreshLink: {
+          href: "href",
+          rel: "http://librarysimplified/terms/rel/refresh",
+        },
+      },
+    });
+    expect(
+      screen.getByRole("button", { name: "Refresh Metadata" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a fetch error message and no edit form", () => {
+    renderEditor({
+      bookData: { id: "id", title: "title" },
+      fetchError: { status: 500, response: "response", url: "" },
+    });
+    expect(screen.getByText(/Error: response/)).toBeInTheDocument();
+    expect(screen.queryByTestId("book-edit-form")).not.toBeInTheDocument();
+  });
+
+  it("shows an edit error message together with the edit form", () => {
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        editLink: {
+          href: "href",
+          rel: "http://librarysimplified.org/terms/rel/edit",
+        },
+      },
+      editError: { status: 500, response: "response", url: "" },
+    });
+    expect(screen.getByTestId("book-edit-form")).toBeInTheDocument();
+    expect(screen.getByText(/Error: response/)).toBeInTheDocument();
+  });
+
+  it("shows the book edit form with roles, media, and languages", () => {
+    const roles = { aut: "Author", nar: "Narrator" };
+    const media = {
+      "http://schema.org/AudioObject": "Audio",
+      "http://schema.org/Book": "Book",
+    };
+    const languages = { eng: ["English"], spa: ["Spanish", "Castilian"] };
+    renderEditor({
+      bookData: {
+        id: "id",
+        title: "title",
+        editLink: {
+          href: "href",
+          rel: "http://librarysimplified.org/terms/rel/edit",
+        },
+      },
+      roles,
+      media,
+      languages,
+    });
+
+    const form = screen.getByTestId("book-edit-form");
+    expect(form).toHaveAttribute("data-title", "title");
+    expect(JSON.parse(form.getAttribute("data-roles"))).toStrictEqual(roles);
+    expect(JSON.parse(form.getAttribute("data-media"))).toStrictEqual(media);
+    expect(JSON.parse(form.getAttribute("data-languages"))).toStrictEqual(
+      languages
+    );
+  });
+
+  it("wires up the connected default export (mapStateToProps / mapDispatchToProps)", async () => {
+    // Stub fetch so mounting the connected panel does not hit the network. The
+    // roles/media/languages endpoints return JSON; the book endpoint returns a
+    // non-OPDS body so getBookData rejects (handled) and surfaces a fetch error.
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => new Response("{}", { status: 200 }));
+
+    const store = buildStore();
+    renderWithProviders(
+      <BookDetailsEditor
+        store={store}
+        bookUrl="works/1234"
+        csrfToken="token"
+        canSuppress={true}
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+      />,
+      { reduxProviderProps: { store } }
+    );
+
+    // getBookData's OPDS parse fails on the non-OPDS body, so mapStateToProps
+    // feeds the resulting fetch error back in and the panel renders an error.
+    expect(
+      await screen.findByText(/Failed to parse OPDS data/)
+    ).toBeInTheDocument();
+  });
+});