Merge pull request #90 from ligangty/2.0-refactor

Add unit test for change handler of PackageTypeSelect

src/main/webui/.eslintrc.json

@@ -143,7 +143,7 @@
       "no-div-regex": 2,
       "no-duplicate-imports": 2,
       "no-else-return": 2,
-      "no-empty-function": 2,
+      "no-empty-function": 0,
       "no-eq-null": 2,
       "no-eval": 2,
       "no-extend-native": 2,

src/main/webui/package.json

@@ -30,6 +30,7 @@
     "@babel/preset-react": "^7.22.15",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
     "eslint": "^8.51.0",

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

@@ -41,9 +41,7 @@ export const PackageTypeSelect = ({packageType,vauleChangeHandler}) =>{
   }());
 
   const selectedValue = packageType || "maven";
-  const onChangeHandler = vauleChangeHandler || (e => {
-    // do nothing
-  });
+  const onChangeHandler = vauleChangeHandler || (()=>{});
   return <span>
     <select value={selectedValue} onChange={onChangeHandler}>
       {

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

@@ -16,6 +16,7 @@
 
 import React from "react";
 import {render, screen, cleanup, waitFor} from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
 import '@testing-library/jest-dom';
 import {PackageTypeSelect} from "./PackageTypeSelect.jsx";
 
@@ -36,6 +37,7 @@ describe('PackageTypeSelect tests', () => {
       expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
 
       expect(screen.getByRole("option", {name: "maven"}).selected).toBe(true);
+      expect(screen.getByRole("combobox")).toHaveValue("maven");
     });
   });
 
@@ -50,8 +52,29 @@ describe('PackageTypeSelect tests', () => {
       expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
       expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
 
+      expect(screen.getByRole("combobox")).toHaveValue("npm");
       expect(screen.getByRole("option", {name: "npm"}).selected).toBe(true);
     });
   });
 
+  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 => {
+      value = e.target.value;
+    };
+    render(<PackageTypeSelect vauleChangeHandler={vauleChangeHandler}/>);
+    expect(value).toBe("");
+    await waitFor(() => {
+      expect(screen.getByRole("option", {name: "maven"}).selected).toBe(true);
+      expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
+      selectOptions(screen.getByRole("combobox"), "npm");
+      expect(value).toBe("npm");
+    });
+  });
+
 });