@thepalaceproject/circulation-admin 1.19.0-post.2 → 1.19.0-post.4

package/jest.config.js

@@ -2,5 +2,9 @@
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: [""],
+  },
+  setupFiles: ["./jest.polyfills.js"],
   setupFilesAfterEnv: ["./tests/jest/jest-setup.ts"],
 };

package/jest.polyfills.js

@@ -0,0 +1,20 @@
+// jest.polyfills.js
+
+const globalThis = window;
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { ReadableStream, TextDecoder, TextEncoder } = require("node:util");
+Object.defineProperties(globalThis, {
+  ReadableStream: { value: ReadableStream },
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+});
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { fetch, Request, Response, Headers } = require("fetch-ponyfill")();
+Object.defineProperties(globalThis, {
+  fetch: { value: fetch, writable: true },
+  Headers: { value: Headers },
+  Request: { value: Request },
+  Response: { value: Response, writable: true },
+});

package/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@nypl/dgx-svg-icons": "0.3.4",
+    "@reduxjs/toolkit": "^2.2.5",
     "@tanstack/react-query": "^4.36.1",
     "@thepalaceproject/web-opds-client": "^1.0.1",
     "bootstrap": "^3.3.6",
@@ -57,7 +58,7 @@
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.0.5",
     "react-dom": "^16.8.6",
-    "react-redux": "^7.1.0",
+    "react-redux": "^7.2.9",
     "react-router": "^3.2.0",
     "recharts": "^1.8.6",
     "redux": "^4.0.1",
@@ -80,7 +81,8 @@
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.14.6",
     "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.16",
+    "@types/react-redux": "^7.1.33",
+    "@types/react-router": "^3.0.28",
     "@types/recharts": "^1.8.28",
     "@types/redux-mock-store": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
@@ -100,6 +102,7 @@
     "eslint-plugin-react-hooks": "^4.0.0",
     "fetch-mock": "^7.3.1",
     "fetch-mock-jest": "^1.5.1",
+    "fetch-ponyfill": "^7.1.0",
     "file-loader": "^6.2.0",
     "follow-redirects": "^1.15.6",
     "husky": "^4.3.0",
@@ -110,7 +113,7 @@
     "lint-staged": "^10.4.0",
     "mini-css-extract-plugin": "1.6.0",
     "mocha": "^10.2.0",
-    "msw": "^1.2.1",
+    "msw": "^2.3.0",
     "nightwatch": "^3.2.0",
     "prettier": "2.1.2",
     "react-axe": "^3.3.0",
@@ -146,5 +149,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.19.0-post.2"
+  "version": "1.19.0-post.4"
 }

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

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
-import { rest } from "msw";
 import { setupServer } from "msw/node";
+import { http, HttpResponse } from "msw";
 import CustomLists from "../../../src/components/CustomLists";
 import renderWithContext from "../testUtils/renderWithContext";
 import buildStore from "../../../src/store";
@@ -15,8 +14,8 @@ describe("CustomLists", () => {
   Element.prototype.scrollTo = () => {};
 
   const server = setupServer(
-    rest.get("*/search", (req, res, ctx) => res(ctx.xml("<feed />"))),
-    rest.get("*", (req, res, ctx) => res(ctx.json({})))
+    http.get("*/search", () => HttpResponse.xml("<feed />")),
+    http.get("*", () => HttpResponse.json({}))
   );
 
   beforeAll(() => {
@@ -111,10 +110,10 @@ describe("CustomLists", () => {
     let searchParams = null;
 
     server.use(
-      rest.get("*/search", (req, res, ctx) => {
-        searchParams = req.url.searchParams;
-
-        res(ctx.xml("<feed />"));
+      http.get("*/search", ({ request }) => {
+        const url = new URL(request.url);
+        searchParams = url.searchParams;
+        return HttpResponse.xml("<feed />");
       })
     );
 
@@ -154,10 +153,10 @@ describe("CustomLists", () => {
     let searchParams = null;
 
     server.use(
-      rest.get("*/search", (req, res, ctx) => {
-        searchParams = req.url.searchParams;
-
-        res(ctx.xml("<feed />"));
+      http.get("*/search", ({ request }) => {
+        const url = new URL(request.url);
+        searchParams = url.searchParams;
+        return HttpResponse.xml("<feed />");
       })
     );
 

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

@@ -7,7 +7,7 @@ import {
 } from "../testUtils/withProviders";
 import { QueryClient } from "@tanstack/react-query";
 import { setupServer } from "msw/node";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 import {
   ACK_RESPONSE_BUTTON_CONTENT,
   ACK_RESPONSE_HEADING,
@@ -45,12 +45,12 @@ const API_ENDPOINT_PARAMS: AdminAPI.InventoryReportRequestParams = {
 
 const setupMockServer = () => {
   return setupServer(
-    rest.get(MOCK_SERVER_API_ENDPOINT_PATH, async (_, res, ctx) => {
-      return res(ctx.status(200), ctx.json(INFO_SUCCESS_SOME_COLLECTIONS));
-    }),
-    rest.post(MOCK_SERVER_API_ENDPOINT_PATH, async (_, res, ctx) => {
-      return res(ctx.status(202), ctx.json(GENERATE_REPORT_SUCCESS));
-    })
+    http.get(MOCK_SERVER_API_ENDPOINT_PATH, () =>
+      HttpResponse.json(INFO_SUCCESS_SOME_COLLECTIONS, { status: 200 })
+    ),
+    http.post(MOCK_SERVER_API_ENDPOINT_PATH, () =>
+      HttpResponse.json(GENERATE_REPORT_SUCCESS, { status: 202 })
+    )
   );
 };
 
@@ -252,8 +252,9 @@ describe("InventoryReportRequestModal", () => {
     });
     it("returns an error value for unsuccessful report info (get) requests", async () => {
       server.use(
-        rest.get(MOCK_SERVER_API_ENDPOINT_PATH, (_, res, ctx) =>
-          res(ctx.status(404))
+        http.get(
+          MOCK_SERVER_API_ENDPOINT_PATH,
+          () => new HttpResponse(null, { status: 404 })
         )
       );
       let error = undefined;
@@ -271,8 +272,9 @@ describe("InventoryReportRequestModal", () => {
     });
     it("returns an error value for unsuccessful generate report (post) requests", async () => {
       server.use(
-        rest.post(MOCK_SERVER_API_ENDPOINT_PATH, (_, res, ctx) =>
-          res(ctx.status(404))
+        http.post(
+          MOCK_SERVER_API_ENDPOINT_PATH,
+          () => new HttpResponse(null, { status: 404 })
         )
       );
       let error = undefined;
@@ -452,9 +454,9 @@ describe("InventoryReportRequestModal", () => {
 
     it("disables report generation, if info indicates no collections", async () => {
       server.use(
-        rest.get(MOCK_SERVER_API_ENDPOINT_PATH, async (_, res, ctx) => {
-          return res(ctx.status(200), ctx.json(INFO_SUCCESS_NO_COLLECTIONS));
-        })
+        http.get(MOCK_SERVER_API_ENDPOINT_PATH, () =>
+          HttpResponse.json(INFO_SUCCESS_NO_COLLECTIONS, { status: 200 })
+        )
       );
 
       const {
@@ -499,8 +501,9 @@ describe("InventoryReportRequestModal", () => {
 
     it("displays minimal confirmation message, if report info request unsuccessful", async () => {
       server.use(
-        rest.get(MOCK_SERVER_API_ENDPOINT_PATH, (_, res, ctx) =>
-          res.once(ctx.status(404))
+        http.get(
+          MOCK_SERVER_API_ENDPOINT_PATH,
+          () => new HttpResponse(null, { status: 404 })
         )
       );
 
@@ -607,8 +610,9 @@ describe("InventoryReportRequestModal", () => {
 
     it("displays error message, when request is unsuccessful", async () => {
       server.use(
-        rest.post(MOCK_SERVER_API_ENDPOINT_PATH, (_, res, ctx) =>
-          res(ctx.status(404))
+        http.post(
+          MOCK_SERVER_API_ENDPOINT_PATH,
+          () => new HttpResponse(null, { status: 404 })
         )
       );
       const user = userEvent.setup();

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

@@ -2,10 +2,10 @@ import * as React from "react";
 import { screen, waitFor } from "@testing-library/react";
 
 import QuicksightDashboard from "../../../src/components/QuicksightDashboard";
-import { LibrariesData, LibraryData } from "../../../src/interfaces";
-import buildStore, { RootState } from "../../../src/store";
+import { LibrariesData } from "../../../src/interfaces";
+import buildStore from "../../../src/store";
 import { setupServer } from "msw/node";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 import renderWithContext from "../testUtils/renderWithContext";
 
 const libraries: LibrariesData = { libraries: [{ uuid: "my-uuid" }] };
@@ -15,15 +15,15 @@ const dashboardUrlData = { embedUrl: embedUrl };
 
 describe("QuicksightDashboard", () => {
   const server = setupServer(
-    rest.get("*/admin/libraries", (req, res, ctx) => res(ctx.json(libraries))),
-
-    rest.get(
-      "*/admin/quicksight_embed/" +
-        dashboardId +
-        "?libraryUuids=" +
-        libraries["libraries"][0]["uuid"],
-      (req, res, ctx) => res(ctx.json(dashboardUrlData))
-    )
+    http.get("/admin/libraries", () => HttpResponse.json(libraries)),
+    http.get(`/admin/quicksight_embed/${dashboardId}`, ({ request }) => {
+      const url = new URL(request.url);
+      const libraryUuids = url.searchParams.get("libraryUuids");
+
+      if (libraryUuids === libraries["libraries"][0]["uuid"]) {
+        return HttpResponse.json(dashboardUrlData);
+      }
+    })
   );
 
   beforeAll(() => {