@thepalaceproject/circulation-admin 1.43.0-post.10 → 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/CustomListsForBook.test.tsx

@@ -0,0 +1,315 @@
+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";
+
+// CustomListsForBook renders a react-router v3 <Link> for which
+// renderWithProviders supplies no router context. Mock it to a marker that
+// exposes the `to` pathname and state so the destination can be asserted.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props: any) => (
+    <div
+      data-testid="Link"
+      data-pathname={
+        typeof props.to === "string" ? props.to : props.to?.pathname
+      }
+      data-book-title={
+        typeof props.to === "object" ? props.to?.state?.bookTitle : undefined
+      }
+    >
+      {props.children}
+    </div>
+  ),
+}));
+
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised. The book's lists and all available lists are fetched on mount
+// and fed back in through the Redux store; book/bookUrl/library/refreshCatalog
+// are own props.
+import CustomListsForBook, {
+  CustomListsForBook as UnconnectedCustomListsForBook,
+} from "../../../src/components/CustomListsForBook";
+
+const allCustomLists = [
+  { id: "1", name: "list 1", is_owner: true, is_shared: false },
+  { id: "2", name: "list 2", is_owner: true, is_shared: false },
+  { id: "3", name: "list 3", is_owner: true, is_shared: false },
+];
+const listsForBook = [
+  { id: "2", name: "list 2", is_owner: true, is_shared: false },
+];
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+// Serves the "all custom lists" endpoint and the per-book "/lists" endpoint from
+// the supplied fixtures; answers POSTs (edit) with success.
+const stubFetch = (allLists: unknown[], forBook: unknown[]) =>
+  jest
+    .spyOn(globalThis, "fetch")
+    .mockImplementation(async (url, opts?: RequestInit) => {
+      if (opts?.method === "POST") {
+        return new Response("success", { status: 200 });
+      }
+      const u = String(url);
+      if (u.includes("custom_lists")) {
+        return jsonResponse({ custom_lists: allLists });
+      }
+      return jsonResponse({ custom_lists: forBook });
+    });
+
+const renderConnected = () => {
+  const store = buildStore();
+  const refreshCatalog = jest.fn().mockResolvedValue(undefined);
+  const result = renderWithProviders(
+    <CustomListsForBook
+      csrfToken="token"
+      book={{ id: "id", title: "test title" } as any}
+      bookUrl="works/book url"
+      library="library"
+      refreshCatalog={refreshCatalog}
+    />,
+    { reduxProviderProps: { store } }
+  );
+  return { ...result, refreshCatalog };
+};
+
+describe("CustomListsForBook", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the book title and the book's current lists", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByRole("heading", { level: 2, name: "test title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Current Lists" })
+    ).toBeInTheDocument();
+
+    const link = await screen.findByRole("link", { name: "list 2" });
+    expect(link).toHaveAttribute("href", "/admin/web/lists/library/edit/2");
+    // Exactly one current list is shown.
+    expect(container.querySelectorAll(".with-remove-button")).toHaveLength(1);
+  });
+
+  it("builds the current-list URL from the list's id, not its name", async () => {
+    // A list named "new" whose id is "42" proves the URL uses the id.
+    const newList = { id: "42", name: "new", is_owner: true, is_shared: false };
+    stubFetch([...allCustomLists, newList], [newList]);
+    renderConnected();
+
+    const link = await screen.findByRole("link", { name: "new" });
+    expect(link).toHaveAttribute("href", "/admin/web/lists/library/edit/42");
+  });
+
+  it("shows a menu of the lists the book is not yet on", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    const { container } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const select = container.querySelector("select");
+    expect(select).not.toBeNull();
+    const optionValues = Array.from(select.querySelectorAll("option")).map(
+      (o) => o.getAttribute("value")
+    );
+    // "list 2" is excluded because the book is already on it.
+    expect(optionValues).toStrictEqual(["list 1", "list 3"]);
+    expect(screen.getByText(/Select an existing list/)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+  });
+
+  it("shows placeholder text when the book is not on any list", async () => {
+    stubFetch(allCustomLists, []);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByText("This book is not currently on any lists.")
+    ).toBeInTheDocument();
+    // With no current lists there is no "Current Lists" heading.
+    expect(
+      screen.queryByRole("heading", { name: "Current Lists" })
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".with-remove-button")).toBeNull();
+  });
+
+  it("hides the menu once the book is on every available list", async () => {
+    stubFetch(allCustomLists, allCustomLists);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByText(
+        "This book has been added to all the available lists."
+      )
+    ).toBeInTheDocument();
+    expect(container.querySelector("select")).toBeNull();
+  });
+
+  it("shows a message instead of the input list when no lists exist", async () => {
+    stubFetch([], []);
+    renderConnected();
+
+    expect(
+      await screen.findByText("There are no available lists.")
+    ).toBeInTheDocument();
+  });
+
+  it("shows a link to the list creator that carries the book title", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const creatorLink = screen.getByTestId("Link");
+    expect(creatorLink).toHaveTextContent("Create a new list");
+    expect(creatorLink).toHaveAttribute(
+      "data-pathname",
+      "/admin/web/lists/library/create"
+    );
+    expect(creatorLink).toHaveAttribute("data-book-title", "test title");
+    expect(
+      screen.getByText(
+        "(The book title will be automatically copied and searched on the list creator page.)"
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("fetches the book's lists and all custom lists on mount, without refreshing the catalog", async () => {
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const urls = fetchSpy.mock.calls.map(([u]) => String(u));
+    expect(urls).toContain("admin/works/book url/lists");
+    expect(urls.some((u) => u.includes("custom_lists"))).toBe(true);
+    expect(refreshCatalog).not.toHaveBeenCalled();
+  });
+
+  it("does not re-fetch all custom lists on mount when they are already loaded", () => {
+    // The mount guard (CustomListsForBook.tsx:158) fetches the full list of
+    // custom lists only when they are not already present; the book's own lists
+    // are still fetched. Drive the already-loaded case through the unconnected
+    // class, since the connected mount always starts from an empty store.
+    const fetchAllCustomLists = jest.fn();
+    const fetchCustomListsForBook = jest.fn();
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={fetchAllCustomLists}
+        fetchCustomListsForBook={fetchCustomListsForBook}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+      />
+    );
+
+    expect(fetchCustomListsForBook).toHaveBeenCalledTimes(1);
+    expect(fetchAllCustomLists).not.toHaveBeenCalled();
+  });
+
+  it("adds a list and posts the updated set of lists", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { container, refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    await user.selectOptions(
+      container.querySelector("select") as HTMLSelectElement,
+      "list 1"
+    );
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalled());
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/book url/lists");
+    const lists = JSON.parse(
+      ((postCall[1] as RequestInit).body as FormData).get("lists") as string
+    );
+    expect(lists).toStrictEqual([
+      { id: "2", name: "list 2", is_owner: true, is_shared: false },
+      { id: "1", name: "list 1", is_owner: true, is_shared: false },
+    ]);
+  });
+
+  it("removes a list and posts the emptied set of lists", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalled());
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/book url/lists");
+    const lists = JSON.parse(
+      ((postCall[1] as RequestInit).body as FormData).get("lists") as string
+    );
+    expect(lists).toStrictEqual([]);
+  });
+
+  it("shows an error message", () => {
+    // A mount-time fetch failure would reject the (uncaught) fetch promise and
+    // crash the worker, so drive the error through the prop connect derives.
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={jest.fn()}
+        fetchCustomListsForBook={jest.fn()}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+        fetchError={{ status: 400, response: "boom", url: "" } as any}
+      />
+    );
+    expect(screen.getByText(/Error: boom/)).toBeInTheDocument();
+  });
+
+  it("disables the remove and add controls while fetching", () => {
+    // isFetching is a connect-derived prop; inject it via the unconnected class.
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={jest.fn()}
+        fetchCustomListsForBook={jest.fn()}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+        isFetching={true}
+      />
+    );
+    expect(screen.getByRole("button", { name: "Delete" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+  });
+});