Merge pull request #97 from ligangty/2.0-refactor

Uset jest-fetch-mock instead of global jest mock for fetch API mock

src/main/webui/package.json

@@ -8,6 +8,13 @@
   "imports": {
     "#utils/*": "./src/app/utils/*"
   },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "verbose": true,
+    "automock": false,
+    "resetMocks": false,
+    "setupFiles": ["<rootDir>/setupTests.js"]
+  },
   "dependencies": {
     "bootstrap": "^5.3.2",
     "prop-types": "^15.8.1",
@@ -40,6 +47,7 @@
     "express": "^4.18.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "nodemon": "^3.0.1",
     "style-loader": "^3.3.3",
     "url-loader": "^4.1.1",

src/main/webui/setupTests.js

@@ -0,0 +1,3 @@
+import fetchMock, {FetchMock as fetch} from "jest-fetch-mock";
+
+fetchMock.enableMocks();

src/main/webui/src/app/components/content/common/PackageTypeSelect.test.jsx

@@ -16,20 +16,22 @@
 
 import React from "react";
 import {render, screen, cleanup, waitFor} from '@testing-library/react';
+import fetchMock from "jest-fetch-mock";
 import userEvent from "@testing-library/user-event";
 import '@testing-library/jest-dom';
 import {PackageTypeSelect} from "./PackageTypeSelect.jsx";
 
+beforeEach(() => {
+  fetchMock.resetMocks();
+  fetchMock.mockResponseOnce(JSON.stringify(["maven", "npm", "generic-http"]));
+});
+
 afterEach(() => {
   cleanup();
 });
 
 describe('PackageTypeSelect tests', () => {
   it("Verify PackageTypeSelect by default", async ()=>{
-    global.fetch = jest.fn(() => Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve(["maven", "npm", "generic-http"]),
-    }));
     render(<PackageTypeSelect />);
     await waitFor(()=>{
       expect(screen.getByRole("option", {name: "maven"})).toBeInTheDocument();
@@ -42,10 +44,6 @@ describe('PackageTypeSelect tests', () => {
   });
 
   it("Verify PackageTypeSelect for npm selected", async ()=>{
-    global.fetch = jest.fn(() => Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve(["maven", "npm", "generic-http"]),
-    }));
     render(<PackageTypeSelect packageType="npm" />);
     await waitFor(()=>{
       expect(screen.getByRole("option", {name: "maven"})).toBeInTheDocument();
@@ -58,10 +56,6 @@ describe('PackageTypeSelect tests', () => {
   });
 
   it("Verify PackageTypeSelect for value change", async ()=>{
-    global.fetch = jest.fn(() => Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve(["maven", "npm", "generic-http"]),
-    }));
     const {selectOptions} = userEvent.setup();
     let value = "";
     const vauleChangeHandler = e => {

src/main/webui/src/app/components/nav/NavFooter.test.jsx

@@ -17,8 +17,13 @@
 import React from "react";
 import {render, screen, cleanup, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom';
+import fetchMock from "jest-fetch-mock";
 import NavFooter from "./NavFooter.jsx";
 
+beforeEach(() => {
+  fetchMock.resetMocks();
+});
+
 afterEach(() => {
   cleanup();
 });
@@ -31,10 +36,8 @@ describe('Footer tests', () => {
       builder: "test-builder",
       timestamp: "2023-10-24 05:54 +0000"
     };
-    global.fetch = jest.fn(() => Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve(mockStats),
-    }));
+    fetchMock.mockResponseOnce(JSON.stringify(mockStats));
+
     render(<NavFooter />);
     expect(screen.getByRole("link", {name: "Docs"})).toHaveAttribute("href", "http://commonjava.github.io/indy/");
     expect(screen.getByRole("link", {name: "Issues"})).toHaveAttribute("href", "http://github.com/commonjava/indy/issues");