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

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

@@ -0,0 +1,367 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import CustomListEditor, {
+  CustomListEditorProps,
+} from "../../../src/components/CustomListEditor";
+
+// Each list entry renders a web-opds-client CatalogLink whose `collectionUrl` is
+// the list's opdsFeedUrl. Mock it to a marker that echoes that URL, so the
+// crawlable-feed derivation can be asserted without router/pathFor context.
+jest.mock(
+  "@thepalaceproject/web-opds-client/lib/components/CatalogLink",
+  () => ({
+    __esModule: true,
+    default: (props: any) => (
+      <a
+        href={props.bookUrl}
+        data-testid="catalog-link"
+        data-collection-url={props.collectionUrl}
+      >
+        {props.children}
+      </a>
+    ),
+  })
+);
+
+describe("CustomListEditor", () => {
+  // CustomListEntriesEditor calls Element.scrollTo on mount, which JSDOM does
+  // not implement, so stub it.
+  Element.prototype.scrollTo = () => {};
+
+  const searchResults = {
+    id: "id",
+    url: "url",
+    title: "title",
+    lanes: [],
+    books: [],
+    navigationLinks: [],
+  };
+
+  const entries = {
+    baseline: [],
+    baselineTotalCount: 0,
+    added: {},
+    removed: {},
+    current: [],
+    currentTotalCount: 0,
+  };
+
+  const entryPoints = ["Book", "Audio"];
+
+  const library = {
+    uuid: "uuid",
+    name: "name",
+    short_name: "library",
+    settings: {
+      large_collections: ["eng", "fre", "spa"],
+    },
+  };
+
+  const languages = {
+    eng: ["English"],
+    spa: ["Spanish", "Castilian"],
+    fre: ["French"],
+  };
+
+  const properties = {
+    name: "Listy McList",
+    collections: [2],
+    autoUpdate: false,
+  };
+
+  const searchParams = {
+    entryPoint: "All",
+    terms: "",
+    sort: null,
+    language: "all",
+    advanced: {
+      include: {
+        query: null,
+        selectedQueryId: null,
+        clearFilters: null,
+      },
+      exclude: {
+        query: null,
+        selectedQueryId: null,
+        clearFilters: null,
+      },
+    },
+  };
+
+  const makeProps = (
+    overrides: Partial<CustomListEditorProps> = {}
+  ): CustomListEditorProps => ({
+    entries,
+    entryPoints,
+    isFetchingMoreCustomListEntries: false,
+    isFetchingSearchResults: false,
+    isFetchingMoreSearchResults: false,
+    isLoaded: false,
+    isModified: true,
+    isOwner: true,
+    isValid: true,
+    languages,
+    library: library as CustomListEditorProps["library"],
+    listId: "1",
+    properties: properties as CustomListEditorProps["properties"],
+    searchParams: searchParams as CustomListEditorProps["searchParams"],
+    searchResults: searchResults as CustomListEditorProps["searchResults"],
+    loadMoreEntries: jest.fn(),
+    loadMoreSearchResults: jest.fn(),
+    reset: jest.fn(),
+    save: jest.fn().mockResolvedValue(undefined),
+    search: jest.fn(),
+    share: jest.fn(),
+    updateProperty: jest.fn(),
+    updateSearchParam: jest.fn(),
+    ...overrides,
+  });
+
+  const renderEditor = (overrides: Partial<CustomListEditorProps> = {}) => {
+    const props = makeProps(overrides);
+    const result = render(<CustomListEditor {...props} />);
+    const rerender = (nextOverrides: Partial<CustomListEditorProps>) =>
+      result.rerender(<CustomListEditor {...makeProps(nextOverrides)} />);
+    return { ...result, rerender, props };
+  };
+
+  it("shows the list title with an edit button", () => {
+    renderEditor();
+
+    // The editable title (TextWithEditMode) shows the name and an edit button.
+    expect(screen.getByText("Listy McList")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Edit list title/ })
+    ).toBeInTheDocument();
+  });
+
+  it("shows the list title without an edit button when isOwner is false", () => {
+    renderEditor({ isOwner: false });
+
+    const title = screen.getByRole("heading", { level: 3 });
+    expect(title).toHaveTextContent("Listy McList");
+    expect(
+      screen.queryByRole("button", { name: /Edit list title/ })
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the list id", () => {
+    renderEditor();
+
+    const listId = screen.getByRole("heading", { level: 4, name: /ID-1/ });
+    expect(listId).toHaveTextContent("1");
+  });
+
+  it("shows an entries editor with list entries and search results", () => {
+    renderEditor();
+
+    // The entries editor renders both the search results and list-entries columns.
+    expect(
+      screen.getByRole("heading", { name: "Search Results" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        name: /List Entries:.*No books in this list/,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("gives each entry of a saved list a crawlable OPDS feed URL", () => {
+    // opdsFeedUrl is `${short_name}/lists/${savedName}/crawlable`, but only when
+    // the list has both a listId and a savedName (CustomListEditor.tsx:124). It
+    // reaches the DOM as the collectionUrl of each list entry's catalog link.
+    renderEditor({
+      savedName: "saved-list",
+      entries: {
+        ...entries,
+        current: [{ id: "book1", title: "A Book", url: "/works/book1" }],
+        currentTotalCount: 1,
+      } as CustomListEditorProps["entries"],
+    });
+
+    expect(screen.getByTestId("catalog-link")).toHaveAttribute(
+      "data-collection-url",
+      "library/lists/saved-list/crawlable"
+    );
+  });
+
+  it("disables entry point options when isOwner is false", () => {
+    const { container } = renderEditor({ isOwner: false });
+
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+    within(entryPointsSection)
+      .getAllByRole("radio")
+      .forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it("shows entry point options", () => {
+    const { container } = renderEditor();
+
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    const all = within(entryPointsSection).getByRole("radio", { name: "All" });
+    expect(all).toHaveAttribute("value", "All");
+    expect(all).toBeChecked();
+
+    const book = within(entryPointsSection).getByRole("radio", {
+      name: "Book",
+    });
+    expect(book).toHaveAttribute("value", "Book");
+    expect(book).not.toBeChecked();
+
+    const audio = within(entryPointsSection).getByRole("radio", {
+      name: "Audio",
+    });
+    expect(audio).toHaveAttribute("value", "Audio");
+    expect(audio).not.toBeChecked();
+  });
+
+  it("enables the save button when the list has changes and is valid", () => {
+    renderEditor();
+
+    expect(
+      screen.getByRole("button", { name: "Save this list" })
+    ).toBeEnabled();
+  });
+
+  it("disables the save button when the list does not have changes", () => {
+    renderEditor({ isModified: false });
+
+    expect(
+      screen.getByRole("button", { name: "Save this list" })
+    ).toBeDisabled();
+  });
+
+  it("disables the save button when the list is invalid", () => {
+    renderEditor({ isValid: false });
+
+    expect(
+      screen.getByRole("button", { name: "Save this list" })
+    ).toBeDisabled();
+  });
+
+  it("calls save when the save button is clicked", async () => {
+    const user = userEvent.setup();
+    const save = jest.fn().mockResolvedValue(undefined);
+    renderEditor({ save });
+
+    await user.click(screen.getByRole("button", { name: "Save this list" }));
+
+    expect(save).toHaveBeenCalledTimes(1);
+  });
+
+  it("disables the cancel button when the list does not have changes", () => {
+    renderEditor({ isModified: false });
+
+    expect(
+      screen.getByRole("button", { name: "Cancel changes" })
+    ).toBeDisabled();
+  });
+
+  it("calls reset when the cancel button is clicked", async () => {
+    const user = userEvent.setup();
+    const reset = jest.fn();
+    renderEditor({ reset });
+
+    await user.click(screen.getByRole("button", { name: "Cancel changes" }));
+
+    expect(reset).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render save/cancel buttons when isOwner is false", () => {
+    renderEditor({ isOwner: false });
+
+    expect(
+      screen.queryByRole("button", { name: "Save this list" })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Cancel changes" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders a CustomListSearch component", () => {
+    const { container } = renderEditor();
+
+    // CustomListSearch renders its search panel (a collapsible Panel whose
+    // header is a button) with the entry point options.
+    expect(
+      screen.getByRole("button", { name: "Search for titles" })
+    ).toBeInTheDocument();
+    expect(container.querySelector(".entry-points")).toBeInTheDocument();
+  });
+
+  it("updates the autoUpdate property from the search component", async () => {
+    const user = userEvent.setup();
+    // The auto-update controls only render when auto-update is enabled and the
+    // list is new (listId null), which is when the radios are interactive.
+    const updateProperty = jest.fn();
+    renderEditor({
+      updateProperty,
+      isAutoUpdateEnabled: true,
+      listId: null,
+      properties: { ...properties, autoUpdate: false },
+    });
+
+    await user.click(
+      screen.getByRole("radio", { name: "Automatically update this list" })
+    );
+
+    expect(updateProperty).toHaveBeenCalledTimes(1);
+    expect(updateProperty).toHaveBeenCalledWith("autoUpdate", true);
+  });
+
+  it("calls search when listId changes", () => {
+    const search = jest.fn();
+    const { rerender } = renderEditor({ search });
+
+    expect(search).toHaveBeenCalledTimes(1);
+
+    rerender({ search, listId: "2" });
+
+    expect(search).toHaveBeenCalledTimes(2);
+  });
+
+  it("calls search when isLoaded changes", () => {
+    const search = jest.fn();
+    const { rerender } = renderEditor({ search });
+
+    expect(search).toHaveBeenCalledTimes(1);
+
+    rerender({ search, isLoaded: true });
+
+    expect(search).toHaveBeenCalledTimes(2);
+  });
+
+  it("calls share when the share button is clicked", async () => {
+    const user = userEvent.setup();
+    const share = jest.fn();
+    const { container } = renderEditor({ share });
+
+    const shareButton = container.querySelector<HTMLButtonElement>(
+      ".sharing-info button"
+    );
+    expect(shareButton).toBeInTheDocument();
+
+    await user.click(shareButton);
+
+    expect(share).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render a share button when listId is undefined", () => {
+    const { container } = renderEditor({ listId: undefined });
+
+    expect(container.querySelector(".sharing-info")).not.toBeInTheDocument();
+  });
+
+  it("does not render a share button when isOwner is false", () => {
+    const { container } = renderEditor({ isOwner: false });
+
+    expect(
+      container.querySelector(".sharing-info button")
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. Mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// CustomLists is a connected component that fetches lists, collections, libraries,
+// and languages over the network on mount. That is incidental to what
+// CustomListPage composes — the page's job is to hand the editor the params and
+// context it needs — so mock it to a marker that echoes the props it received.
+jest.mock("../../../src/components/CustomLists", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists"
+      data-library={props.library}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import CustomListPage from "../../../src/components/CustomListPage";
+
+describe("CustomListPage", () => {
+  const params = {
+    library: "library",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows custom lists with info from params", () => {
+    renderWithProviders(<CustomListPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const customLists = screen.getByTestId("custom-lists");
+    expect(customLists).toHaveAttribute("data-library", "library");
+    expect(customLists).toHaveAttribute("data-edit-or-create", "edit");
+    expect(customLists).toHaveAttribute("data-identifier", "identifier");
+    expect(customLists).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(customLists).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,275 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CustomListSearch from "../../../src/components/CustomListSearch";
+
+describe("CustomListSearch", () => {
+  const library = {
+    uuid: "uuid",
+    name: "name",
+    short_name: "short_name",
+    settings: {
+      large_collections: ["eng", "fre", "spa"],
+    },
+  };
+
+  const entryPoints = ["All", "Book", "Audio"];
+
+  const searchParams = {
+    entryPoint: "all",
+    terms: "foo bar",
+    sort: "title",
+    language: "English",
+    advanced: {
+      include: {
+        query: null,
+        selectedQueryId: null,
+        clearFilters: null,
+      },
+      exclude: {
+        query: null,
+        selectedQueryId: null,
+        clearFilters: null,
+      },
+    },
+  };
+
+  const languages = {
+    eng: ["English"],
+    spa: ["Spanish", "Castilian"],
+    fre: ["French"],
+  };
+
+  const renderSearch = (
+    overrides: Partial<React.ComponentProps<typeof CustomListSearch>> = {}
+  ) =>
+    render(
+      <CustomListSearch
+        entryPoints={entryPoints}
+        isOwner={true}
+        languages={languages}
+        library={library}
+        listId="123"
+        search={jest.fn()}
+        searchParams={searchParams}
+        updateAutoUpdate={jest.fn()}
+        updateSearchParam={jest.fn()}
+        {...overrides}
+      />
+    );
+
+  it("renders a radio button for each entry point", () => {
+    const { container } = renderSearch();
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    const radios = within(entryPointsSection).getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+
+    const all = within(entryPointsSection).getByRole("radio", { name: "All" });
+    expect(all).toHaveAttribute("name", "entry-points-selection");
+    expect(all).toHaveAttribute("value", "All");
+    expect(all).toBeEnabled();
+    expect(all).toBeChecked();
+
+    const book = within(entryPointsSection).getByRole("radio", {
+      name: "Book",
+    });
+    expect(book).toHaveAttribute("name", "entry-points-selection");
+    expect(book).toHaveAttribute("value", "Book");
+    expect(book).toBeEnabled();
+    expect(book).not.toBeChecked();
+
+    const audio = within(entryPointsSection).getByRole("radio", {
+      name: "Audio",
+    });
+    expect(audio).toHaveAttribute("name", "entry-points-selection");
+    expect(audio).toHaveAttribute("value", "Audio");
+    expect(audio).toBeEnabled();
+    expect(audio).not.toBeChecked();
+  });
+
+  it("disables the entry point radio buttons when isOwner is false", () => {
+    const { container } = renderSearch({ isOwner: false });
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    within(entryPointsSection)
+      .getAllByRole("radio")
+      .forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it("calls updateSearchParam when an entry point radio button is changed", async () => {
+    const user = userEvent.setup();
+    const updateSearchParam = jest.fn();
+    const { container } = renderSearch({ updateSearchParam });
+    const entryPointsSection =
+      container.querySelector<HTMLElement>(".entry-points");
+
+    await user.click(
+      within(entryPointsSection).getByRole("radio", { name: "Audio" })
+    );
+
+    expect(updateSearchParam).toHaveBeenCalledTimes(1);
+    expect(updateSearchParam).toHaveBeenCalledWith("entryPoint", "Audio");
+  });
+
+  it("renders a radio button for each sort option", () => {
+    const { container } = renderSearch();
+    const sortSection = container.querySelector<HTMLElement>(".search-options");
+
+    const radios = within(sortSection).getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+
+    const relevance = within(sortSection).getByRole("radio", {
+      name: "Relevance",
+    });
+    expect(relevance).toHaveAttribute("name", "sort-selection");
+    expect(relevance).toHaveAttribute("value", "");
+    expect(relevance).toBeEnabled();
+    expect(relevance).not.toBeChecked();
+
+    const title = within(sortSection).getByRole("radio", { name: "Title" });
+    expect(title).toHaveAttribute("name", "sort-selection");
+    expect(title).toHaveAttribute("value", "title");
+    expect(title).toBeEnabled();
+    expect(title).toBeChecked();
+
+    const author = within(sortSection).getByRole("radio", { name: "Author" });
+    expect(author).toHaveAttribute("name", "sort-selection");
+    expect(author).toHaveAttribute("value", "author");
+    expect(author).toBeEnabled();
+    expect(author).not.toBeChecked();
+  });
+
+  it("disables the sort option radio buttons when isOwner is false", () => {
+    const { container } = renderSearch({ isOwner: false });
+    const sortSection = container.querySelector<HTMLElement>(".search-options");
+
+    within(sortSection)
+      .getAllByRole("radio")
+      .forEach((radio) => expect(radio).toBeDisabled());
+  });
+
+  it("calls updateSearchParam when a sort radio button is changed", async () => {
+    const user = userEvent.setup();
+    const updateSearchParam = jest.fn();
+    const { container } = renderSearch({ updateSearchParam });
+    const sortSection = container.querySelector<HTMLElement>(".search-options");
+
+    await user.click(
+      within(sortSection).getByRole("radio", { name: "Author" })
+    );
+
+    expect(updateSearchParam).toHaveBeenCalledTimes(1);
+    expect(updateSearchParam).toHaveBeenCalledWith("sort", "author");
+  });
+
+  it("calls addAdvSearchQuery and search when mounted if there is a startingTitle", () => {
+    const addAdvSearchQuery = jest.fn();
+    const search = jest.fn();
+
+    renderSearch({ startingTitle: "test", addAdvSearchQuery, search });
+
+    expect(addAdvSearchQuery).toHaveBeenCalledTimes(1);
+    expect(addAdvSearchQuery).toHaveBeenCalledWith("include", {
+      key: "title",
+      op: "eq",
+      value: "test",
+    });
+    expect(search).toHaveBeenCalledTimes(1);
+  });
+
+  describe("when showAutoUpdate is false", () => {
+    it("does not render radio buttons for auto update on and off", () => {
+      const { container } = renderSearch();
+
+      expect(container.querySelector(".auto-update")).toBeNull();
+    });
+  });
+
+  describe("when showAutoUpdate is true", () => {
+    it("renders radio buttons for auto update on and off", () => {
+      const { container } = renderSearch({
+        showAutoUpdate: true,
+        listId: null,
+      });
+      const autoSection = container.querySelector<HTMLElement>(".auto-update");
+
+      const radios = within(autoSection).getAllByRole("radio");
+      expect(radios).toHaveLength(2);
+
+      const on = within(autoSection).getByRole("radio", {
+        name: "Automatically update this list",
+      });
+      expect(on).toHaveAttribute("name", "auto-update");
+      expect(on).toBeEnabled();
+
+      const off = within(autoSection).getByRole("radio", {
+        name: "Manually select titles",
+      });
+      expect(off).toHaveAttribute("name", "auto-update");
+      expect(off).toBeEnabled();
+    });
+
+    it("disables the radio buttons for auto update when isOwner is false", () => {
+      const { container } = renderSearch({
+        showAutoUpdate: true,
+        isOwner: false,
+        listId: null,
+      });
+      const autoSection = container.querySelector<HTMLElement>(".auto-update");
+
+      within(autoSection)
+        .getAllByRole("radio")
+        .forEach((radio) => expect(radio).toBeDisabled());
+    });
+
+    it("disables the radio buttons for auto update when listId is not null", () => {
+      // isOwner: true keeps readOnly false, so listId is the only thing that can
+      // disable the radios — otherwise readOnly alone would, masking this path.
+      const { container } = renderSearch({
+        showAutoUpdate: true,
+        isOwner: true,
+        listId: "123",
+      });
+      const autoSection = container.querySelector<HTMLElement>(".auto-update");
+
+      within(autoSection)
+        .getAllByRole("radio")
+        .forEach((radio) => expect(radio).toBeDisabled());
+    });
+
+    it("calls updateAutoUpdate when an auto update radio button is changed", async () => {
+      const user = userEvent.setup();
+      // Clicking the currently-unchecked "on" radio reports true.
+      const updateAutoUpdateOn = jest.fn();
+      const { unmount } = renderSearch({
+        showAutoUpdate: true,
+        listId: null,
+        autoUpdate: false,
+        updateAutoUpdate: updateAutoUpdateOn,
+      });
+      await user.click(
+        screen.getByRole("radio", { name: "Automatically update this list" })
+      );
+      expect(updateAutoUpdateOn).toHaveBeenCalledTimes(1);
+      expect(updateAutoUpdateOn).toHaveBeenCalledWith(true);
+      unmount();
+
+      // Clicking the currently-unchecked "off" radio reports false.
+      const updateAutoUpdateOff = jest.fn();
+      renderSearch({
+        showAutoUpdate: true,
+        listId: null,
+        autoUpdate: true,
+        updateAutoUpdate: updateAutoUpdateOff,
+      });
+      await user.click(
+        screen.getByRole("radio", { name: "Manually select titles" })
+      );
+      expect(updateAutoUpdateOff).toHaveBeenCalledTimes(1);
+      expect(updateAutoUpdateOff).toHaveBeenCalledWith(false);
+    });
+  });
+});