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

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"
+  "version": "1.22.0-post.1"
 }

package/tests/__data__/statisticsApiResponseData.ts

@@ -1,6 +1,7 @@
 import { StatisticsData } from "../../src/interfaces";
 
 export const testLibraryKey = "lyrasis-reads";
+export const testLibraryName = "LYRASIS Reads";
 export const noCollectionsLibraryKey = "unfunded-library";
 export const noInventoryLibraryKey = "unfunded-library";
 export const noPatronsLibraryKey = "unused-library";

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

@@ -0,0 +1,235 @@
+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("don't show hide button if not a library's admin", () => {
+    const { queryByRole } = renderWithProviders(
+      <BookDetailsEditor
+        bookData={{ id: "id", title: "title", suppressPerLibraryLink }}
+        bookUrl="url"
+        csrfToken="token"
+        canSuppress={false}
+        {...dispatchProps}
+      />
+    );
+    const hideButton = queryByRole("button", { name: "Hide" });
+    const restoreButton = queryByRole("button", { name: "Restore" });
+
+    expect(hideButton).to.be.null;
+    expect(restoreButton).to.be.null;
+  });
+
+  it("don't show restore button if not a library's admin", () => {
+    const { queryByRole } = renderWithProviders(
+      <BookDetailsEditor
+        bookData={{ id: "id", title: "title", unsuppressPerLibraryLink }}
+        bookUrl="url"
+        csrfToken="token"
+        canSuppress={false}
+        {...dispatchProps}
+      />
+    );
+    const hideButton = queryByRole("button", { name: "Hide" });
+    const restoreButton = queryByRole("button", { name: "Restore" });
+
+    expect(hideButton).to.be.null;
+    expect(restoreButton).to.be.null;
+  });
+
+  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"
+        canSuppress={true}
+        {...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"
+        canSuppress={true}
+        {...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/components/Stats.test.tsx

@@ -3,24 +3,245 @@ import { render } from "@testing-library/react";
 import LibraryStats, {
   CustomTooltip,
 } from "../../../src/components/LibraryStats";
-import { renderWithProviders } from "../testUtils/withProviders";
+import {
+  componentWithProviders,
+  renderWithProviders,
+} from "../testUtils/withProviders";
 import { ContextProviderProps } from "../../../src/components/ContextProvider";
 
 import {
   statisticsApiResponseData,
   testLibraryKey as sampleLibraryKey,
+  testLibraryName as sampleLibraryName,
 } from "../../__data__/statisticsApiResponseData";
-import { normalizeStatistics } from "../../../src/components/Stats";
+
+import { normalizeStatistics } from "../../../src/features/stats/normalizeStatistics";
+import { useGetStatsQuery } from "../../../src/features/stats/statsSlice";
+import * as fetchMock from "fetch-mock-jest";
+import { STATS_API_ENDPOINT } from "../../../src/features/stats/statsSlice";
+import Stats from "../../../src/components/Stats";
+import { renderHook } from "@testing-library/react-hooks";
+import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+import { store } from "../../../src/store";
+import { api } from "../../../src/features/api/apiSlice";
+
+const normalizedData = normalizeStatistics(statisticsApiResponseData);
 
 describe("Dashboard Statistics", () => {
   // NB: This adds test to the already existing tests in:
-  // - `src/components/__tests__/Stats-test.tsx`.
   // - `src/components/__tests__/LibraryStats-test.tsx`.
   // - `src/components/__tests__/SingleStatListItem-test.tsx`.
   //
   // Those tests should eventually be migrated here and
   // adapted to the Jest/React Testing Library paradigm.
 
+  // Configure standard constructors so that RTK Query works in tests with FetchMockJest
+  Object.assign(fetchMock.config, {
+    fetch,
+    Headers,
+    Request,
+    Response,
+  });
+
+  describe("query hook correctly handles fetch responses", () => {
+    const wrapper = componentWithProviders();
+
+    beforeEach(() => {
+      store.dispatch(api.util.resetApiState());
+      fetchMock.restore();
+    });
+    afterAll(() => {
+      store.dispatch(api.util.resetApiState());
+      fetchMock.restore();
+    });
+
+    it("returns data when fetch successful", async () => {
+      fetchMock.get(
+        `path:${STATS_API_ENDPOINT}`,
+        {
+          body: JSON.stringify(statisticsApiResponseData),
+          status: 200,
+        },
+        { overwriteRoutes: true }
+      );
+
+      const { result, waitFor } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+
+      // Expect loading status immediately after first use of the hook.
+      let { isSuccess, isError, error, data } = result.current;
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(undefined);
+
+      // Once loaded, we should have our data.
+      await waitFor(() => !result.current.isLoading);
+      ({ isSuccess, isError, error, data } = result.current);
+
+      expect(isSuccess).toBe(true);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(normalizedData);
+
+      // But if we use the hook again, we should get the data back from
+      // the cache immediately, without loading state.
+      const { result: result2 } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+      ({ isSuccess, isError, error, data } = result2.current);
+
+      expect(isSuccess).toBe(true);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(normalizedData);
+    });
+
+    it("returns error and no data when request fails", async () => {
+      fetchMock.get(
+        `path:${STATS_API_ENDPOINT}`,
+        {
+          status: 500,
+        },
+        {
+          overwriteRoutes: true,
+        }
+      );
+
+      const { result, waitFor } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+
+      // Expect loading status immediately after first use of the hook.
+      let { isSuccess, isError, error, data } = result.current;
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(undefined);
+
+      await waitFor(() => !result.current.isLoading);
+      ({ isSuccess, isError, error, data } = result.current);
+
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(true);
+      expect(data).toBe(undefined);
+      expect((error as FetchErrorData).status).toBe(500);
+
+      // But if we use the hook again, we should get our error back from
+      // the cache immediately, without loading state.
+      const { result: result2 } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+      ({ isSuccess, isError, error, data } = result2.current);
+
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(true);
+      expect(data).toBe(undefined);
+      expect((error as FetchErrorData).status).toBe(500);
+    });
+  });
+
+  describe("rendering", () => {
+    beforeAll(() => {
+      fetchMock.get(`path:${STATS_API_ENDPOINT}`, {
+        body: JSON.stringify(statisticsApiResponseData),
+        status: 200,
+      });
+    });
+    afterAll(() => {
+      fetchMock.restore();
+    });
+    afterEach(() => {
+      fetchMock.resetHistory();
+    });
+
+    const assertLoadingState = ({ getByRole }) => {
+      getByRole("dialog", { name: "Loading" });
+      getByRole("heading", { level: 1, name: "Loading" });
+    };
+    const assertNotLoadingState = ({ queryByRole }) => {
+      const missingLoadingDialog = queryByRole("dialog", { name: "Loading" });
+      const missingLoadingHeading = queryByRole("heading", {
+        level: 1,
+        name: "Loading",
+      });
+      expect(missingLoadingDialog).not.toBeInTheDocument();
+      expect(missingLoadingHeading).not.toBeInTheDocument();
+    };
+
+    it("shows/hides the loading indicator", async () => {
+      // We haven't tried to fetch anything yet.
+      expect(fetchMock.calls()).toHaveLength(0);
+
+      const { rerender, getByRole, queryByRole } = renderWithProviders(
+        <Stats />
+      );
+
+      // We should start in the loading state.
+      assertLoadingState({ getByRole });
+
+      // Wait a tick for the statistics to render.
+      await new Promise(process.nextTick);
+      // Now we've fetched something.
+      expect(fetchMock.calls()).toHaveLength(1);
+
+      rerender(<Stats />);
+
+      // We should show our content without the loading state.
+      assertNotLoadingState({ queryByRole });
+      getByRole("heading", { level: 2, name: "Statistics for All Libraries" });
+
+      // We haven't made another call, since the response is cached.
+      expect(fetchMock.calls()).toHaveLength(1);
+    });
+
+    it("doesn't fetch again, because response is cached", async () => {
+      const { getByRole, queryByRole } = renderWithProviders(<Stats />);
+
+      // We should show our content immediately, without entering the loading state.
+      assertNotLoadingState({ queryByRole });
+      getByRole("heading", { level: 2, name: "Statistics for All Libraries" });
+
+      // We never tried to fetch anything because the result is cached.
+      expect(fetchMock.calls()).toHaveLength(0);
+    });
+
+    it("show stats for a library, if a library is specified", async () => {
+      const { getByRole, queryByRole, getByText } = renderWithProviders(
+        <Stats library={sampleLibraryKey} />
+      );
+
+      // We should show our content immediately, without entering the loading state.
+      assertNotLoadingState({ queryByRole });
+      getByRole("heading", {
+        level: 2,
+        name: `${sampleLibraryName} Statistics`,
+      });
+      getByRole("heading", { level: 3, name: "Patrons" });
+      getByText("132");
+
+      // We never tried to fetch anything because the result is cached.
+      expect(fetchMock.calls()).toHaveLength(0);
+    });
+
+    it("shows site-wide stats when no library specified", async () => {
+      const { getByRole, getByText, queryByRole } = renderWithProviders(
+        <Stats />
+      );
+
+      // We should show our content immediately, without entering the loading state.
+      assertNotLoadingState({ queryByRole });
+
+      getByRole("heading", { level: 2, name: "Statistics for All Libraries" });
+      getByRole("heading", { level: 3, name: "Patrons" });
+      getByText("145");
+
+      // We never tried to fetch anything because the result is cached.
+      expect(fetchMock.calls()).toHaveLength(0);
+    });
+  });
+
   describe("requesting inventory reports", () => {
     // Convert from the API format to our in-app format.
     const statisticsData = normalizeStatistics(statisticsApiResponseData);
@@ -212,9 +433,7 @@ describe("Dashboard Statistics", () => {
         payload: defaultPayload,
       });
 
-      const { container, getByRole } = render(
-        <CustomTooltip {...tooltipProps} />
-      );
+      const { container } = render(<CustomTooltip {...tooltipProps} />);
       const tooltipContent = container.querySelectorAll(".customTooltip");
 
       expect(tooltipContent).toHaveLength(0);