@thepalaceproject/circulation-admin 1.43.0 → 1.44.0-post.4

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

@@ -0,0 +1,237 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { Provider } from "react-redux";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import buildStore from "../../../src/store";
+import { getBookData } from "../../../src/features/book/bookEditorSlice";
+
+// Each tab panel is a connected component that fetches over the network on mount.
+// This container's behavior is the tab SET, tab SWITCHING, and clearing book data,
+// not the panels' internals, so mock each panel to a marker echoing the props the
+// container is responsible for threading into it.
+jest.mock("../../../src/components/BookDetailsEditor", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-details-editor"
+      data-csrf-token={props.csrfToken}
+      data-book-url={props.bookUrl}
+    />
+  ),
+}));
+jest.mock("../../../src/components/Classifications", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="classifications" data-book-url={props.bookUrl} />
+  ),
+}));
+jest.mock("../../../src/components/CustomListsForBook", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists-for-book"
+      data-book-url={props.bookUrl}
+      data-library={props.library}
+    />
+  ),
+}));
+jest.mock("../../../src/components/BookCoverEditor", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="book-cover-editor" data-book-url={props.bookUrl} />
+  ),
+}));
+
+import BookDetailsTabContainerConnected, {
+  BookDetailsTabContainer,
+} from "../../../src/components/BookDetailsTabContainer";
+
+// The container reads `router` and `pathFor` from the legacy React context the
+// app supplies in production. Wrap it in a small provider that hands it those.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    router: PropTypes.object,
+    pathFor: PropTypes.func,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const TEST_BOOK_URL = "book url";
+const TEST_COLLECTION_URL = "collection url";
+
+describe("BookDetailsTabContainer", () => {
+  const pathFor = (collectionUrl: string, bookUrl: string, tab?: string) =>
+    `${collectionUrl}::${bookUrl}::${tab}`;
+
+  type Overrides = {
+    bookData?: any;
+    bookUrl?: string;
+    clearBook?: jest.Mock;
+    push?: jest.Mock;
+  };
+
+  const renderContainer = (overrides: Overrides = {}) => {
+    const push = overrides.push || jest.fn();
+    const clearBook = overrides.clearBook || jest.fn();
+    const context = { router: { push }, pathFor };
+    // One store for the lifetime of the render: a fresh one per element() call
+    // would hand the panels a new store identity on every rerender.
+    const store = buildStore();
+    const element = (bookUrl: string, bookData: any) => (
+      <LegacyContextProvider context={context}>
+        <BookDetailsTabContainer
+          bookUrl={bookUrl}
+          collectionUrl={TEST_COLLECTION_URL}
+          csrfToken="token"
+          refreshCatalog={jest.fn()}
+          store={store}
+          library={() => "library"}
+          canSuppress={true}
+          complaintsCount={0}
+          bookData={bookData}
+          clearBook={clearBook}
+          tab={null}
+        >
+          <div className="bookDetails">Moby Dick</div>
+        </BookDetailsTabContainer>
+      </LegacyContextProvider>
+    );
+    const result = render(
+      element(overrides.bookUrl ?? TEST_BOOK_URL, overrides.bookData ?? null)
+    );
+    const rerenderWith = (bookUrl: string, bookData: any = null) =>
+      result.rerender(element(bookUrl, bookData));
+    return { ...result, push, clearBook, rerenderWith };
+  };
+
+  it("shows book details", () => {
+    renderContainer();
+    expect(screen.getByText("Moby Dick")).toBeInTheDocument();
+  });
+
+  it("shows details, edit, and classifications tabs", () => {
+    renderContainer();
+    for (const name of ["Details", "Edit", "Classifications"]) {
+      expect(screen.getByRole("link", { name })).toBeInTheDocument();
+    }
+  });
+
+  it("only shows cover tab when the book data has a change cover link", () => {
+    const { rerenderWith } = renderContainer();
+    expect(
+      screen.queryByRole("link", { name: "Cover" })
+    ).not.toBeInTheDocument();
+
+    rerenderWith(TEST_BOOK_URL, {
+      title: "title",
+      changeCoverLink: {
+        href: "/change-cover",
+        rel: "http://librarysimplified.org/terms/rel/change_cover",
+      },
+    });
+    expect(screen.getByRole("link", { name: "Cover" })).toBeInTheDocument();
+  });
+
+  it("shows editor", () => {
+    renderContainer();
+    const editor = screen.getByTestId("book-details-editor");
+    expect(editor).toHaveAttribute("data-csrf-token", "token");
+    expect(editor).toHaveAttribute("data-book-url", TEST_BOOK_URL);
+  });
+
+  it("shows classifications", () => {
+    renderContainer();
+    expect(screen.getByTestId("classifications")).toHaveAttribute(
+      "data-book-url",
+      TEST_BOOK_URL
+    );
+  });
+
+  it("shows lists", () => {
+    renderContainer();
+    const lists = screen.getByTestId("custom-lists-for-book");
+    expect(lists).toHaveAttribute("data-book-url", TEST_BOOK_URL);
+    expect(lists).toHaveAttribute("data-library", "library");
+  });
+
+  it("uses router to navigate when tab is clicked", async () => {
+    const { push } = renderContainer();
+    await userEvent.click(screen.getByRole("link", { name: "Edit" }));
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledWith(
+      pathFor(TEST_COLLECTION_URL, TEST_BOOK_URL, "edit")
+    );
+  });
+
+  it("clears book data when receiving new book url", () => {
+    const clearBook = jest.fn();
+    const { rerenderWith } = renderContainer({ clearBook });
+    rerenderWith("new book url");
+    expect(clearBook).toHaveBeenCalledTimes(1);
+  });
+
+  it("clears book data on unmount", () => {
+    const clearBook = jest.fn();
+    const { unmount } = renderContainer({ clearBook });
+    unmount();
+    expect(clearBook).toHaveBeenCalledTimes(1);
+  });
+
+  // Render the CONNECTED default export so mapStateToProps / mapDispatchToProps
+  // (which run only when the connected component mounts) are exercised.
+  const renderConnected = (store = buildStore()) =>
+    render(
+      <Provider store={store}>
+        <LegacyContextProvider
+          context={{ router: { push: jest.fn() }, pathFor }}
+        >
+          <BookDetailsTabContainerConnected
+            bookUrl={TEST_BOOK_URL}
+            collectionUrl={TEST_COLLECTION_URL}
+            csrfToken="token"
+            refreshCatalog={jest.fn()}
+            library={() => "library"}
+            canSuppress={true}
+            tab={null}
+          >
+            <div className="bookDetails">Moby Dick</div>
+          </BookDetailsTabContainerConnected>
+        </LegacyContextProvider>
+      </Provider>
+    );
+
+  it("wires up store and dispatch when connected", () => {
+    renderConnected();
+    expect(screen.getByRole("link", { name: "Details" })).toBeInTheDocument();
+    expect(screen.getByText("Moby Dick")).toBeInTheDocument();
+  });
+
+  it("takes book data from the store when connected", () => {
+    const store = buildStore();
+    store.dispatch(
+      getBookData.fulfilled(
+        {
+          title: "title",
+          changeCoverLink: {
+            href: "/change-cover",
+            rel: "http://librarysimplified.org/terms/rel/change_cover",
+          },
+        } as any,
+        "request-id",
+        { url: TEST_BOOK_URL } as any
+      )
+    );
+    renderConnected(store);
+    // The cover tab appears only when bookData carries a changeCoverLink, so it
+    // is the observable proof that mapStateToProps threaded the store's book
+    // data into the container.
+    expect(screen.getByRole("link", { name: "Cover" })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,352 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import BookEditForm from "../../../src/components/BookEditForm";
+import {
+  BookData,
+  RolesData,
+  MediaData,
+  LanguagesData,
+} from "../../../src/interfaces";
+installFormDataShim();
+
+describe("BookEditForm", () => {
+  const roles: RolesData = {
+    aut: "Author",
+    nar: "Narrator",
+  };
+
+  const media: MediaData = {
+    "http://schema.org/AudioObject": "Audio",
+    "http://schema.org/Book": "Book",
+  };
+
+  const languages: LanguagesData = {
+    eng: ["English"],
+    spa: ["Spanish", "Castilian"],
+  };
+
+  const bookData: BookData = {
+    id: "id",
+    title: "title",
+    subtitle: "subtitle",
+    authors: [{ name: "An Author", role: "aut" }],
+    contributors: [
+      { name: "A Narrator", role: "nar" },
+      { name: "Another Narrator", role: "nar" },
+    ],
+    fiction: true,
+    audience: "Young Adult",
+    targetAgeRange: ["12", "16"],
+    summary: "summary",
+    series: "series",
+    seriesPosition: 3,
+    medium: "http://schema.org/AudioObject",
+    language: "eng",
+    publisher: "publisher",
+    imprint: "imprint",
+    issued: "2017-04-03",
+    rating: 4,
+    editLink: {
+      href: "href",
+      rel: "edit",
+    },
+  };
+
+  type Props = React.ComponentProps<typeof BookEditForm>;
+
+  const makeProps = (overrides: Partial<Props> = {}): Props => ({
+    ...(bookData as Props),
+    roles,
+    media,
+    languages,
+    disabled: false,
+    refresh: jest.fn(),
+    editBook: jest.fn().mockResolvedValue(undefined),
+    ...overrides,
+  });
+
+  const renderForm = (overrides: Partial<Props> = {}) => {
+    const props = makeProps(overrides);
+    const result = render(<BookEditForm {...props} />);
+    const rerender = (nextOverrides: Partial<Props>) =>
+      result.rerender(<BookEditForm {...makeProps(nextOverrides)} />);
+    return { ...result, rerender, props };
+  };
+
+  const inputsByName = (container: HTMLElement, name: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLInputElement>(`input[name="${name}"]`)
+    );
+  const selectsByName = (container: HTMLElement, name: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLSelectElement>(`select[name="${name}"]`)
+    );
+
+  describe("rendering", () => {
+    it("shows editable input with title", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(container.querySelector('input[name="title"]')).toHaveValue(
+        "title"
+      );
+    });
+
+    it("shows editable input with subtitle", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Subtitle")).toBeInTheDocument();
+      expect(container.querySelector('input[name="subtitle"]')).toHaveValue(
+        "subtitle"
+      );
+    });
+
+    it("shows authors and contributors", () => {
+      const { container } = renderForm();
+
+      const names = inputsByName(container, "contributor-name");
+      const contributorRoles = selectsByName(container, "contributor-role");
+      expect(names).toHaveLength(4);
+      expect(contributorRoles).toHaveLength(4);
+
+      expect(names[0]).toHaveValue("An Author");
+      expect(contributorRoles[0]).toHaveValue("Author");
+      expect(names[1]).toHaveValue("A Narrator");
+      expect(contributorRoles[1]).toHaveValue("Narrator");
+      expect(names[2]).toHaveValue("Another Narrator");
+      expect(contributorRoles[2]).toHaveValue("Narrator");
+
+      // The last inputs are for adding a new contributor.
+      expect(names[3]).toHaveValue("");
+      expect(contributorRoles[3]).toHaveValue("Author");
+      expect(
+        container.querySelector("button.add-contributor")
+      ).toBeInTheDocument();
+
+      // Existing authors and contributors are removable.
+      expect(
+        container.querySelectorAll(".with-remove-button .remove-btn")
+      ).toHaveLength(3);
+
+      // All role inputs have the same options.
+      [contributorRoles[1], contributorRoles[3]].forEach((select) => {
+        const options = within(select).getAllByRole("option");
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveValue("Author");
+        expect(options[1]).toHaveValue("Narrator");
+      });
+    });
+
+    it("shows editable input with series", () => {
+      const { container } = renderForm();
+      expect(container.querySelector('input[name="series"]')).toHaveValue(
+        "series"
+      );
+    });
+
+    it("shows editable input with series position", () => {
+      const { container } = renderForm();
+      expect(
+        container.querySelector('input[name="series_position"]')
+      ).toHaveValue("3");
+    });
+
+    it("shows editable input with medium", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Medium")).toBeInTheDocument();
+      expect(container.querySelector('select[name="medium"]')).toHaveValue(
+        "Audio"
+      );
+    });
+
+    it("shows a language field", () => {
+      const { container, rerender } = renderForm();
+      expect(screen.getByText("Language")).toBeInTheDocument();
+      expect(container.querySelector('input[name="language"]')).toHaveValue(
+        "English"
+      );
+
+      rerender({ language: "fre" });
+      expect(container.querySelector('input[name="language"]')).toHaveValue(
+        "fre"
+      );
+    });
+
+    it("shows editable input with publisher", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Publisher")).toBeInTheDocument();
+      expect(container.querySelector('input[name="publisher"]')).toHaveValue(
+        "publisher"
+      );
+    });
+
+    it("shows editable input with imprint", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Imprint")).toBeInTheDocument();
+      expect(container.querySelector('input[name="imprint"]')).toHaveValue(
+        "imprint"
+      );
+    });
+
+    it("shows editable input with publication date", () => {
+      const { container } = renderForm();
+      expect(screen.getByText("Publication Date")).toBeInTheDocument();
+      expect(container.querySelector('input[name="issued"]')).toHaveValue(
+        "2017-04-03"
+      );
+    });
+
+    it("shows editable input with rating", () => {
+      const { container } = renderForm();
+      expect(screen.getByText(/Rating/)).toBeInTheDocument();
+      const rating = container.querySelector<HTMLInputElement>(
+        'input[name="rating"]'
+      );
+      expect(rating).toHaveValue(4);
+    });
+
+    it("shows editable textarea with summary", () => {
+      const { container } = renderForm();
+      const editor = container.querySelector<HTMLElement>(".editor");
+      expect(within(editor).getByText("Summary")).toBeInTheDocument();
+      expect(editor.querySelector(".DraftEditor-root")).toHaveTextContent(
+        "summary"
+      );
+    });
+  });
+
+  it("removes a contributor", async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    let removeButtons = screen.getAllByRole("button", { name: "Delete" });
+    expect(removeButtons).toHaveLength(3);
+
+    // Remove the first narrator (index 1: An Author, A Narrator, Another Narrator).
+    await user.click(removeButtons[1]);
+
+    removeButtons = screen.getAllByRole("button", { name: "Delete" });
+    expect(removeButtons).toHaveLength(2);
+
+    const names = inputsByName(container, "contributor-name");
+    const contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(3);
+    expect(contributorRoles).toHaveLength(3);
+    expect(names[0]).toHaveValue("An Author");
+    expect(contributorRoles[0]).toHaveValue("Author");
+    expect(names[1]).toHaveValue("Another Narrator");
+    expect(contributorRoles[1]).toHaveValue("Narrator");
+    expect(names[2]).toHaveValue("");
+    expect(contributorRoles[2]).toHaveValue("Author");
+  });
+
+  it("adds a contributor", async () => {
+    const user = userEvent.setup();
+    const { container } = renderForm();
+
+    let names = inputsByName(container, "contributor-name");
+    let contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(4);
+    expect(contributorRoles).toHaveLength(4);
+
+    // Fill in the empty "add" name field (the last one); its role defaults to
+    // Author. Typing enables the Add button.
+    await user.type(names[3], "New Author");
+    await user.click(container.querySelector("button.add-contributor"));
+
+    names = inputsByName(container, "contributor-name");
+    contributorRoles = selectsByName(container, "contributor-role");
+    expect(names).toHaveLength(5);
+    expect(contributorRoles).toHaveLength(5);
+
+    expect(names[0]).toHaveValue("An Author");
+    expect(contributorRoles[0]).toHaveValue("Author");
+    expect(names[1]).toHaveValue("A Narrator");
+    expect(contributorRoles[1]).toHaveValue("Narrator");
+    expect(names[2]).toHaveValue("Another Narrator");
+    expect(contributorRoles[2]).toHaveValue("Narrator");
+    expect(names[3]).toHaveValue("New Author");
+    expect(contributorRoles[3]).toHaveValue("Author");
+    expect(names[4]).toHaveValue("");
+    expect(contributorRoles[4]).toHaveValue("Author");
+  });
+
+  it("calls editBook on submit", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    renderForm({ editBook });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(editBook).toHaveBeenCalledTimes(1);
+    const [url, data] = editBook.mock.calls[0];
+    expect(url).toBe("href");
+    expect(data.get("title")).toBe(bookData.title);
+    expect(data.get("subtitle")).toBe(bookData.subtitle);
+
+    // The last contributor field is the empty one for adding a new contributor.
+    // If the user had filled it in without clicking "Add", it would still be
+    // submitted.
+    expect(data.getAll("contributor-name")).toStrictEqual([
+      "An Author",
+      "A Narrator",
+      "Another Narrator",
+      "",
+    ]);
+    expect(data.getAll("contributor-role")).toStrictEqual([
+      "Author",
+      "Narrator",
+      "Narrator",
+      "Author",
+    ]);
+
+    expect(data.get("series")).toBe(bookData.series);
+    expect(data.get("series_position")).toBe(String(bookData.seriesPosition));
+    expect(data.get("medium")).toBe("Audio");
+    expect(data.get("language")).toBe("English");
+    expect(data.get("publisher")).toBe(bookData.publisher);
+    expect(data.get("imprint")).toBe(bookData.imprint);
+    expect(data.get("issued")).toBe(bookData.issued);
+    expect(data.get("rating")).toBe("4");
+    expect(data.get("summary")).toContain(bookData.summary);
+  });
+
+  it("refreshes book after editing", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    const refresh = jest.fn().mockResolvedValue(undefined);
+    renderForm({ editBook, refresh });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
+  });
+
+  it("only adds updated summary content if it's not empty", async () => {
+    const user = userEvent.setup();
+    const editBook = jest.fn().mockResolvedValue(undefined);
+    const refresh = jest.fn().mockResolvedValue(undefined);
+    // Since we are adding an empty string, there should be no `summary` value
+    // in the FormData object that gets passed to the `editBook` function.
+    renderForm({
+      editBook,
+      refresh,
+      summary: "<p></p>",
+      editLink: { href: "test-url", rel: "something" },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(editBook).toHaveBeenCalledTimes(1));
+    expect(editBook.mock.calls[0][1].get("summary")).toBeNull();
+  });
+
+  it("disables all inputs", () => {
+    const { container } = renderForm({ disabled: true });
+
+    container
+      .querySelectorAll("input, select")
+      .forEach((input) => expect(input).toBeDisabled());
+  });
+});

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

@@ -7,7 +7,6 @@ import {
   PER_LIBRARY_UNSUPPRESS_REL,
 } from "../../../src/features/book/bookEditorSlice";
 import { BookDetailsEditor } from "../../../src/components/BookDetailsEditor";
-import { expect } from "chai";
 import { store } from "../../../src/store";
 import * as fetchMock from "fetch-mock-jest";
 
@@ -93,8 +92,8 @@ describe("BookDetails", () => {
     const hideButton = queryByRole("button", { name: "Hide" });
     const restoreButton = queryByRole("button", { name: "Restore" });
 
-    expect(hideButton).to.be.null;
-    expect(restoreButton).to.be.null;
+    expect(hideButton).toBeNull();
+    expect(restoreButton).toBeNull();
   });
 
   it("don't show restore button if not a library's admin", () => {
@@ -110,8 +109,8 @@ describe("BookDetails", () => {
     const hideButton = queryByRole("button", { name: "Hide" });
     const restoreButton = queryByRole("button", { name: "Restore" });
 
-    expect(hideButton).to.be.null;
-    expect(restoreButton).to.be.null;
+    expect(hideButton).toBeNull();
+    expect(restoreButton).toBeNull();
   });
 
   it("uses modal for suppress book confirmation", async () => {
@@ -149,8 +148,8 @@ describe("BookDetails", () => {
     await user.click(cancelButton);
     confirmButton = queryByRole("button", { name: "Suppress Availability" });
     cancelButton = queryByRole("button", { name: "Cancel" });
-    expect(confirmButton).to.be.null;
-    expect(cancelButton).to.be.null;
+    expect(confirmButton).toBeNull();
+    expect(cancelButton).toBeNull();
 
     // Clicking `Hide` again should show the modal again.
     await user.click(hideButton);
@@ -163,15 +162,15 @@ describe("BookDetails", () => {
     getByRole("button", { name: "Dismiss" });
 
     // Check that the API was invoked.
-    expect(suppressBook.mock.calls.length).to.equal(1);
-    expect(suppressBook.mock.calls[0][0]).to.equal("/suppress/href");
+    expect(suppressBook.mock.calls.length).toBe(1);
+    expect(suppressBook.mock.calls[0][0]).toBe("/suppress/href");
     const fetchCalls = fetchMock.calls();
-    expect(fetchCalls.length).to.equal(1);
+    expect(fetchCalls.length).toBe(1);
     const fetchCall = fetchCalls[0];
     const fetchOptions = fetchCalls[0][1];
-    expect(fetchCall[0]).to.equal("/suppress/href");
-    expect(fetchOptions["headers"]["X-CSRF-Token"]).to.contain("token");
-    expect(fetchOptions["method"]).to.equal("POST");
+    expect(fetchCall[0]).toBe("/suppress/href");
+    expect(fetchOptions["headers"]["X-CSRF-Token"]).toContain("token");
+    expect(fetchOptions["method"]).toBe("POST");
   });
   it("uses modal for unsuppress book confirmation", async () => {
     // Configure standard constructors so that RTK Query works in tests with FetchMockJest
@@ -213,8 +212,8 @@ describe("BookDetails", () => {
     await user.click(cancelButton);
     confirmButton = queryByRole("button", { name: "Restore Availability" });
     cancelButton = queryByRole("button", { name: "Cancel" });
-    expect(confirmButton).to.be.null;
-    expect(cancelButton).to.be.null;
+    expect(confirmButton).toBeNull();
+    expect(cancelButton).toBeNull();
 
     // Clicking `Restore` again should show the modal again.
     await user.click(restoreButton);
@@ -227,14 +226,14 @@ describe("BookDetails", () => {
     getByRole("button", { name: "Dismiss" });
 
     // Check that the API was invoked.
-    expect(unsuppressBook.mock.calls.length).to.equal(1);
-    expect(unsuppressBook.mock.calls[0][0]).to.equal("/unsuppress/href");
+    expect(unsuppressBook.mock.calls.length).toBe(1);
+    expect(unsuppressBook.mock.calls[0][0]).toBe("/unsuppress/href");
     const fetchCalls = fetchMock.calls();
-    expect(fetchCalls.length).to.equal(1);
+    expect(fetchCalls.length).toBe(1);
     const fetchCall = fetchCalls[0];
     const fetchOptions = fetchCalls[0][1];
-    expect(fetchCall[0]).to.equal("/unsuppress/href");
-    expect(fetchOptions["headers"]["X-CSRF-Token"]).to.contain("token");
-    expect(fetchOptions["method"]).to.equal("DELETE");
+    expect(fetchCall[0]).toBe("/unsuppress/href");
+    expect(fetchOptions["headers"]["X-CSRF-Token"]).toContain("token");
+    expect(fetchOptions["method"]).toBe("DELETE");
   });
 });