@thepalaceproject/circulation-admin 1.21.0-post.1 → 1.21.0-post.3

package/package.json

@@ -61,8 +61,8 @@
     "react-redux": "^7.2.9",
     "react-router": "^3.2.0",
     "recharts": "^1.8.6",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2",
     "request": "^2.85.0",
     "stream-browserify": "^3.0.0",
     "timers-browserify": "^2.0.12",
@@ -100,7 +100,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
-    "fetch-mock": "^7.3.1",
+    "fetch-mock": "^10.0.7",
     "fetch-mock-jest": "^1.5.1",
     "fetch-ponyfill": "^7.1.0",
     "file-loader": "^6.2.0",
@@ -149,5 +149,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.21.0-post.1"
+  "version": "1.21.0-post.3"
 }

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

@@ -0,0 +1,199 @@
+import * as React from "react";
+import { renderWithProviders } from "../testUtils/withProviders";
+import userEvent from "@testing-library/user-event";
+import {
+  bookEditorApiEndpoints,
+  PER_LIBRARY_SUPPRESS_REL,
+  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";
+
+describe("BookDetails", () => {
+  const suppressPerLibraryLink = {
+    href: "/suppress/href",
+    rel: PER_LIBRARY_SUPPRESS_REL,
+  };
+  const unsuppressPerLibraryLink = {
+    href: "/unsuppress/href",
+    rel: PER_LIBRARY_UNSUPPRESS_REL,
+  };
+
+  let fetchBookData;
+  let fetchRoles;
+  let fetchMedia;
+  let fetchLanguages;
+  let postBookData;
+  let dispatchProps;
+  const suppressBook = jest.fn().mockImplementation((url: string) =>
+    store.dispatch(
+      bookEditorApiEndpoints.endpoints.suppressBook.initiate({
+        url,
+        csrfToken: "token",
+      })
+    )
+  );
+  const unsuppressBook = jest.fn().mockImplementation((url: string) =>
+    store.dispatch(
+      bookEditorApiEndpoints.endpoints.unsuppressBook.initiate({
+        url,
+        csrfToken: "token",
+      })
+    )
+  );
+
+  beforeAll(() => {
+    fetchMock
+      .post("/suppress/href", {
+        status: 200,
+        body: { message: "Successfully suppressed book availability." },
+      })
+      .delete("/unsuppress/href", {
+        status: 200,
+        body: { message: "Successfully unsuppressed book availability." },
+      });
+  });
+  beforeEach(() => {
+    fetchBookData = jest.fn();
+    fetchRoles = jest.fn();
+    fetchMedia = jest.fn();
+    fetchLanguages = jest.fn();
+    postBookData = jest.fn();
+    dispatchProps = {
+      fetchBookData,
+      fetchRoles,
+      fetchMedia,
+      fetchLanguages,
+      postBookData,
+      suppressBook,
+      unsuppressBook,
+    };
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.resetHistory();
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+    fetchMock.restore();
+  });
+
+  it("uses modal for suppress book confirmation", async () => {
+    // Configure standard constructors so that RTK Query works in tests with FetchMockJest
+    Object.assign(fetchMock.config, {
+      fetch,
+      Headers,
+      Request,
+      Response,
+    });
+
+    const user = userEvent.setup();
+
+    const { getByRole, getByText, queryByRole } = renderWithProviders(
+      <BookDetailsEditor
+        bookData={{ id: "id", title: "title", suppressPerLibraryLink }}
+        bookUrl="url"
+        csrfToken="token"
+        {...dispatchProps}
+      />
+    );
+
+    // The `Hide` button should be present.
+    const hideButton = getByRole("button", { name: "Hide" });
+
+    // Clicking `Hide` should show the book suppression modal.
+    await user.click(hideButton);
+    getByRole("heading", { level: 4, name: "Suppressing Availability" });
+    getByText(/to hide this title from your library's catalog/);
+    let confirmButton = getByRole("button", { name: "Suppress Availability" });
+    let cancelButton = getByRole("button", { name: "Cancel" });
+
+    // Clicking `Cancel` should close the modal.
+    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;
+
+    // Clicking `Hide` again should show the modal again.
+    await user.click(hideButton);
+    confirmButton = getByRole("button", { name: "Suppress Availability" });
+
+    // Clicking the confirmation button should invoke the API and show a confirmation.
+    await user.click(confirmButton);
+    getByRole("heading", { level: 4, name: "Result" });
+    getByText(/Successfully suppressed book availability/);
+    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");
+    const fetchCalls = fetchMock.calls();
+    expect(fetchCalls.length).to.equal(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");
+  });
+  it("uses modal for unsuppress book confirmation", async () => {
+    // Configure standard constructors so that RTK Query works in tests with FetchMockJest
+    Object.assign(fetchMock.config, {
+      fetch,
+      Headers,
+      Request,
+      Response,
+    });
+
+    const user = userEvent.setup();
+
+    const { getByRole, getByText, queryByRole } = renderWithProviders(
+      <BookDetailsEditor
+        bookData={{ id: "id", title: "title", unsuppressPerLibraryLink }}
+        bookUrl="url"
+        csrfToken="token"
+        {...dispatchProps}
+      />
+    );
+
+    // The `Restore` button should be present.
+    const restoreButton = getByRole("button", { name: "Restore" });
+
+    // Clicking `Restore` should show the book un/suppression modal.
+    await user.click(restoreButton);
+    getByRole("heading", { level: 4, name: "Restoring Availability" });
+    getByText(/to make this title visible in your library's catalog/);
+    let confirmButton = getByRole("button", { name: "Restore Availability" });
+    let cancelButton = getByRole("button", { name: "Cancel" });
+
+    // Clicking `Cancel` should close the modal.
+    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;
+
+    // Clicking `Restore` again should show the modal again.
+    await user.click(restoreButton);
+    confirmButton = getByRole("button", { name: "Restore Availability" });
+
+    // Clicking the confirmation button should invoke the API and show a confirmation.
+    await user.click(confirmButton);
+    getByRole("heading", { level: 4, name: "Result" });
+    getByText(/Successfully unsuppressed book availability/);
+    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");
+    const fetchCalls = fetchMock.calls();
+    expect(fetchCalls.length).to.equal(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");
+  });
+});

package/tests/jest/features/book.test.ts

@@ -0,0 +1,396 @@
+import reducer, {
+  initialState,
+  getBookData,
+  GetBookDataArgs,
+  submitBookData,
+} from "../../../src/features/book/bookEditorSlice";
+import { expect } from "chai";
+import * as fetchMock from "fetch-mock-jest";
+import { store } from "../../../src/store";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+import { RequestError } from "@thepalaceproject/web-opds-client/lib/DataFetcher";
+import { AsyncThunkAction, Dispatch } from "@reduxjs/toolkit";
+import ActionCreator from "@thepalaceproject/web-opds-client/lib/actions";
+
+const SAMPLE_BOOK_ADMIN_DETAIL = `
+<entry xmlns="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:opds="http://opds-spec.org/2010/catalog" xmlns:opf="http://www.idpf.org/2007/opf" xmlns:drm="http://librarysimplified.org/terms/drm" xmlns:schema="http://schema.org/" xmlns:simplified="http://librarysimplified.org/terms/" xmlns:bibframe="http://bibframe.org/vocab/" xmlns:bib="http://bib.schema.org/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/" xmlns:lcp="http://readium.org/lcp-specs/ns" schema:additionalType="http://schema.org/EBook">
+    <title>Tea-Cup Reading and Fortune-Telling by Tea Leaves</title>
+    <schema:alternativeHeadline>by a Highland Seer</schema:alternativeHeadline>
+    <summary>First written in the year 1881 by A Highland Seer, it contains a list of omens, both good and bad, many of which are very familiar. Folklore, mystic paths, and enlightenment of the divine are laid out in simple terms to help the everyday person interpret patterns found in tea leaves. (Google Books)</summary>
+    <simplified:pwid>60c23c76-f789-a51d-cd0b-31d2decf1271</simplified:pwid>
+    <dcterms:language>en</dcterms:language>
+    <dcterms:publisher>GEORGE SULLY AND COMPANY</dcterms:publisher>
+    <dcterms:issued>1921-01-01</dcterms:issued>
+    <id>urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1</id>
+    <bibframe:distribution bibframe:ProviderName="Palace Bookshelf"/>
+    <published>2022-12-17T00:00:00Z</published>
+    <updated>2023-05-03T16:31:10+00:00</updated>
+    <category scheme="http://schema.org/audience" term="Adult" label="Adult"/>
+    <author>
+        <name>Homer</name>
+        <link href="http://localhost:8080/minotaur-test-library/works/contributor/Homer/eng/Adult,Adults+Only,All+Ages,Children,Young+Adult" rel="contributor" type="application/atom+xml;profile=opds-catalog;kind=acquisition" title="Homer"/>
+    </author>
+    <link href="https://palace-bookshelf-downloads.dp.la/assets/0d970df7-275e-45ee-a90e-884f1a93beef?fit=inside&amp;width=10000&amp;height=560" rel="http://opds-spec.org/image" type="image/png"/>
+    <link href="https://palace-bookshelf-downloads.dp.la/0d970df7-275e-45ee-a90e-884f1a93beef.jpeg" rel="http://opds-spec.org/image/thumbnail" type="image/jpeg"/>
+    <link href="http://localhost:8080/minotaur-test-library/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/borrow" rel="http://opds-spec.org/acquisition/borrow" type="application/atom+xml;type=entry;profile=opds-catalog">
+        <opds:indirectAcquisition type="application/epub+zip"/>
+        <opds:availability status="available"/>
+    </link>
+    <link href="http://localhost:8080/minotaur-test-library/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1" rel="alternate" type="application/atom+xml;type=entry;profile=opds-catalog"/>
+    <link href="http://localhost:8080/minotaur-test-library/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/related_books" rel="related" type="application/atom+xml;profile=opds-catalog;kind=acquisition" title="Recommended Works"/>
+    <link href="http://localhost:8080/minotaur-test-library/annotations/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1" rel="http://www.w3.org/ns/oa#annotationService" type="application/ld+json; profile=&quot;http://www.w3.org/ns/anno.jsonld&quot;"/>
+    <link href="http://localhost:8080/minotaur-test-library/analytics/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/open_book" rel="http://librarysimplified.org/terms/rel/analytics/open-book"/>
+    <link href="http://localhost:8080/minotaur-test-library/admin/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/suppression" rel="http://palaceproject.io/terms/rel/suppress-for-library"/>
+    <link href="http://localhost:8080/admin/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/edit" rel="edit"/>
+</entry>
+`;
+const SAMPLE_BOOK_DATA_BROKEN_XML = `BROKEN ${SAMPLE_BOOK_ADMIN_DETAIL}`;
+const FETCH_OPDS_PARSE_ERROR_MESSAGE = "Failed to parse OPDS data";
+
+describe("Redux bookEditorSlice...", () => {
+  const bookData = { id: "urn:something:something", title: "test title" };
+
+  const fetchedState = {
+    url: "test url",
+    data: { ...bookData },
+    isFetching: false,
+    fetchError: null,
+    editError: null,
+  };
+
+  describe("reducers...", () => {
+    it("should return the initial state from undefined, if no action is passed", () => {
+      expect(reducer(undefined, { type: "unknown" })).to.deep.equal(
+        initialState
+      );
+    });
+    it("should return the initial state from initialState, if no action is passed", () => {
+      expect(reducer(initialState, { type: "unknown" })).to.deep.equal(
+        initialState
+      );
+    });
+    it("should handle BOOK_CLEAR", () => {
+      // This is dispatched by `web-opds`client`, but we need to handle it, too.
+      const action = { type: ActionCreator.BOOK_CLEAR };
+
+      expect(reducer(fetchedState, action)).to.deep.equal(initialState);
+    });
+
+    it("should handle getBookData.pending", () => {
+      const action = {
+        type: getBookData.pending.type,
+        meta: { arg: { url: "https://example.com/book" } },
+      };
+      const previousState = { ...initialState, url: null, isFetching: false };
+      const state = reducer(previousState, action);
+
+      expect(state.url).to.equal("https://example.com/book");
+      expect(state.data).to.be.null;
+      expect(state.isFetching).to.equal(true);
+      expect(state.fetchError).to.be.null;
+      expect(state.editError).to.be.null;
+    });
+    it("should handle getBookData.fulfilled", () => {
+      const action = {
+        type: getBookData.fulfilled.type,
+        meta: { arg: { url: "https://example.com/book" } },
+        payload: bookData,
+      };
+      const previousState = {
+        ...initialState,
+        url: null,
+        data: null,
+        isFetching: true,
+      };
+      const state = reducer(previousState, action);
+
+      expect(state.url).to.equal("https://example.com/book");
+      expect(state.data).to.deep.equal(bookData);
+      expect(state.isFetching).to.equal(false);
+      expect(state.fetchError).to.be.null;
+      expect(state.editError).to.be.null;
+    });
+    it("should handle getBookData.rejected", () => {
+      const errorObject = { error: "some error object" };
+      const action = {
+        type: getBookData.rejected.type,
+        meta: { arg: { url: "https://example.com/book" } },
+        payload: errorObject,
+      };
+      const previousState = {
+        ...initialState,
+        url: null,
+        data: null,
+        isFetching: true,
+      };
+      const state = reducer(previousState, action);
+
+      expect(state.url).to.equal("https://example.com/book");
+      expect(state.data).to.be.null;
+      expect(state.isFetching).to.equal(false);
+      expect(state.fetchError).to.deep.equal(errorObject);
+      expect(state.editError).to.be.null;
+    });
+
+    it("should handle submitBookData.pending", () => {
+      const action = { type: submitBookData.pending.type };
+      const previousState = { ...fetchedState, isFetching: false };
+      const state = reducer(previousState, action);
+
+      expect(state).to.deep.equal({ ...fetchedState, isFetching: true });
+    });
+    it("should handle submitBookData.fulfilled", () => {
+      const action = {
+        type: submitBookData.fulfilled.type,
+        payload: "some value",
+      };
+      const previousState = { ...fetchedState, isFetching: true };
+      const state = reducer(previousState, action);
+
+      expect(state).to.deep.equal({
+        ...fetchedState,
+        isFetching: false,
+        editError: null,
+      });
+    });
+    it("should handle submitBookData.rejected", () => {
+      const action = {
+        type: submitBookData.rejected.type,
+        payload: "some value",
+      };
+      const previousState = { ...fetchedState, isFetching: true };
+      const state = reducer(previousState, action);
+
+      expect(state).to.deep.equal({
+        ...fetchedState,
+        isFetching: false,
+        editError: "some value",
+      });
+    });
+  });
+
+  describe("thunks...", () => {
+    describe("getBookData...", () => {
+      const goodBookUrl = "https://example.com/book";
+      const brokenBookUrl = "https://example.com/broken-book";
+      const errorBookUrl = "https://example.com/error-book";
+
+      const dispatch = jest.fn();
+      const getState = jest.fn().mockReturnValue({
+        bookEditor: initialState,
+      });
+
+      beforeAll(() => {
+        fetchMock
+          .get(goodBookUrl, { body: SAMPLE_BOOK_ADMIN_DETAIL, status: 200 })
+          .get(brokenBookUrl, {
+            body: SAMPLE_BOOK_DATA_BROKEN_XML,
+            status: 200,
+          })
+          .get(errorBookUrl, { body: "Internal server error", status: 400 });
+      });
+
+      afterEach(() => {
+        fetchMock.resetHistory();
+        dispatch.mockClear();
+      });
+      afterAll(() => fetchMock.restore());
+
+      it("should return the book data on the happy path", async () => {
+        const action = getBookData({ url: goodBookUrl });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+
+        const payload = result.payload as BookData;
+        expect(payload.id).to.equal(
+          "urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1"
+        );
+        expect(payload.title).to.equal(
+          "Tea-Cup Reading and Fortune-Telling by Tea Leaves"
+        );
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(getBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        expect(dispatchCalls[0][0].meta.arg).to.deep.equal({
+          url: goodBookUrl,
+        });
+        expect(dispatchCalls[1][0].type).to.equal(getBookData.fulfilled.type);
+        expect(dispatchCalls[1][0].payload).to.deep.equal(payload);
+        expect(dispatchCalls[1][0].meta.arg).to.deep.equal({
+          url: goodBookUrl,
+        });
+      });
+      it("should return an error, if the data is malformed", async () => {
+        const action = getBookData({ url: brokenBookUrl });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+
+        const payload = result.payload as RequestError;
+        expect(payload.response).to.equal(FETCH_OPDS_PARSE_ERROR_MESSAGE);
+        expect(payload.url).to.equal(brokenBookUrl);
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(getBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        expect(dispatchCalls[0][0].meta.arg).to.deep.equal({
+          url: brokenBookUrl,
+        });
+        expect(dispatchCalls[1][0].type).to.equal(getBookData.rejected.type);
+        expect(dispatchCalls[1][0].payload).to.deep.equal(payload);
+        expect(dispatchCalls[1][0].meta.arg).to.deep.equal({
+          url: brokenBookUrl,
+        });
+      });
+      it("should return an error, if the HTTP request fails", async () => {
+        const action = getBookData({ url: errorBookUrl });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+
+        const payload = result.payload as RequestError;
+
+        expect(result.type).to.equal(getBookData.rejected.type);
+        expect(result.meta.arg).to.deep.equal({ url: errorBookUrl });
+        expect(payload.response).to.equal("Internal server error");
+        expect(payload.url).to.equal(errorBookUrl);
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(getBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        expect(dispatchCalls[0][0].meta.arg).to.deep.equal({
+          url: errorBookUrl,
+        });
+        expect(dispatchCalls[1][0].type).to.equal(getBookData.rejected.type);
+        expect(dispatchCalls[1][0].payload).to.deep.equal(payload);
+        expect(dispatchCalls[1][0].meta.arg).to.deep.equal({
+          url: errorBookUrl,
+        });
+      });
+    });
+
+    describe("submitBookData...", () => {
+      const goodBookUrl = "https://example.com/book";
+      const editBookUrl = `${goodBookUrl}/edit`;
+      const brokenBookUrl = "https://example.com/broken-book";
+      const errorBookUrl = "https://example.com/error-book";
+      const csrfTokenHeader = "X-CSRF-Token";
+      const validCsrfToken = "valid-csrf-token";
+
+      const badCsrfTokenResponseBody = {
+        type: "http://librarysimplified.org/terms/problem/invalid-csrf-token",
+        title: "Invalid CSRF token",
+        status: 400,
+        detail: "There was an error saving your changes.",
+      };
+
+      const dispatch = jest.fn();
+      const getState = jest.fn().mockReturnValue({
+        bookEditor: initialState,
+      });
+
+      beforeAll(() => {
+        fetchMock
+          .post(
+            {
+              name: "valid-csrf-token-post",
+              url: editBookUrl,
+              headers: { [csrfTokenHeader]: validCsrfToken },
+            },
+            { body: "Success!", status: 201 }
+          )
+          .post(
+            { name: "invalid-csrf-token-post", url: editBookUrl },
+            { body: badCsrfTokenResponseBody, status: 400 }
+          )
+          .get(goodBookUrl, { body: SAMPLE_BOOK_ADMIN_DETAIL, status: 200 });
+      });
+
+      afterEach(() => {
+        fetchMock.resetHistory();
+        dispatch.mockClear();
+      });
+
+      afterEach(fetchMock.resetHistory);
+      afterAll(() => fetchMock.restore());
+
+      it("should post the book data on the happy path", async () => {
+        const csrfToken = validCsrfToken;
+        const formData = new FormData();
+        formData.append("id", "urn:something:something");
+        formData.append("title", "title");
+
+        const action = submitBookData({
+          url: editBookUrl,
+          data: formData,
+          csrfToken,
+        });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+        const fetchCalls = fetchMock.calls();
+
+        expect(fetchCalls.length).to.equal(1);
+        expect(fetchCalls[0].identifier).to.equal("valid-csrf-token-post");
+        expect(
+          (fetchCalls[0][1].headers as Headers).get(csrfTokenHeader)
+        ).to.equal(validCsrfToken);
+
+        expect(fetchCalls[0][0]).to.equal(editBookUrl);
+        expect(fetchCalls[0][1].method).to.equal("POST");
+        expect(fetchCalls[0][1].body).to.equal(formData);
+
+        expect(dispatchCalls.length).to.equal(3);
+        expect(dispatchCalls[0][0].type).to.equal(submitBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        // On a successful update, the second dispatch is to re-fetch the updated book data.
+        // The third dispatch is for the fulfilled action.
+        expect(dispatchCalls[2][0].type).to.equal(
+          submitBookData.fulfilled.type
+        );
+        expect(dispatchCalls[2][0].payload.body.toString()).to.equal(
+          "Success!"
+        );
+      });
+      it("should fail, if the user is unauthorized", async () => {
+        const csrfToken = "invalid-token";
+        const formData = new FormData();
+        formData.append("id", "urn:something:something");
+        formData.append("title", "title");
+
+        const action = submitBookData({
+          url: editBookUrl,
+          data: formData,
+          csrfToken,
+        });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+        const fetchCalls = fetchMock.calls();
+
+        expect(fetchCalls.length).to.equal(1);
+        expect(fetchCalls[0].identifier).to.equal("invalid-csrf-token-post");
+        expect(
+          (fetchCalls[0][1].headers as Headers).get(csrfTokenHeader)
+        ).not.to.equal(validCsrfToken);
+
+        expect(fetchCalls[0][0]).to.equal(editBookUrl);
+        expect(fetchCalls[0][1].method).to.equal("POST");
+        expect(fetchCalls[0][1].body).to.equal(formData);
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(submitBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        // There is no re-fetch on a failed request, ...
+        // ...so the second dispatch is for the rejected action.
+        expect(dispatchCalls[1][0].type).to.equal(submitBookData.rejected.type);
+        expect(dispatchCalls[1][0].payload.status).to.equal(400);
+        expect(dispatchCalls[1][0].payload.response).to.equal(
+          "There was an error saving your changes."
+        );
+      });
+    });
+  });
+});

package/tests/jest/testUtils/withProviders.tsx

@@ -1,12 +1,15 @@
 import * as React from "react";
+import { Provider, ProviderProps } from "react-redux";
 import ContextProvider, {
   ContextProviderProps,
 } from "../../../src/components/ContextProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+import { store } from "../../../src/store";
 
 export type TestProviderWrapperOptions = {
+  reduxProviderProps?: ProviderProps;
   contextProviderProps?: Partial<ContextProviderProps>;
   queryClient?: QueryClient;
 };
@@ -14,6 +17,10 @@ export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
   renderOptions?: Omit<RenderOptions, "queries">;
 };
 
+// The `store` argument is required for the Redux Provider and should
+// be the same for both the Redux Provider and the ContextProvider.
+const defaultReduxStore = store;
+
 // The `csrfToken` context provider prop is required, so we provide
 // a default value here, so it can be easily merged with other props.
 const defaultContextProviderProps: ContextProviderProps = {
@@ -26,11 +33,15 @@ const defaultContextProviderProps: ContextProviderProps = {
  * a React element for testing.
  *
  * @param {TestProviderWrapperOptions} options
+ * @param options.reduxProviderProps Props to pass to the Redux `Provider` wrapper
  * @param {ContextProviderProps} options.contextProviderProps Props to pass to the ContextProvider wrapper
  * @param {QueryClient} options.queryClient A `tanstack/react-query` QueryClient
  * @returns {React.FunctionComponent} A React component that wraps children with our providers
  */
 export const componentWithProviders = ({
+  reduxProviderProps = {
+    store: defaultReduxStore,
+  },
   contextProviderProps = {
     csrfToken: "",
     featureFlags: defaultFeatureFlags,
@@ -40,11 +51,16 @@ export const componentWithProviders = ({
   const effectiveContextProviderProps = {
     ...defaultContextProviderProps,
     ...contextProviderProps,
+    ...reduxProviderProps.store, // Context and Redux Provider stores must match.
   };
   const wrapper = ({ children }) => (
-    <ContextProvider {...effectiveContextProviderProps}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </ContextProvider>
+    <Provider {...reduxProviderProps}>
+      <ContextProvider {...effectiveContextProviderProps}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </ContextProvider>
+    </Provider>
   );
   wrapper.displayName = "TestWrapperComponent";
   return wrapper;