Merge pull request #89 from ligangty/2.0-refactor

Add unit test for PackageTypeSelect

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

@@ -17,8 +17,9 @@
 import React, {useState, useEffect} from 'react';
 import {PropTypes} from 'prop-types';
 import {jsonRest} from '#utils/RestClient.js';
+import {Utils} from '#utils/AppUtils';
 
-export const PackageTypeSelect = ({pkgType,vauleChangeHandler}) =>{
+export const PackageTypeSelect = ({packageType,vauleChangeHandler}) =>{
   const [state, setState] = useState({
     pkgTypes: []
   });
@@ -31,27 +32,28 @@ export const PackageTypeSelect = ({pkgType,vauleChangeHandler}) =>{
         if (response.ok){
           const pkgTypes = await response.json();
           setState({pkgTypes});
+        }else{
+          Utils.logMessage(response);
         }
       };
       fetchPkgTypes();
     }, []);
   }());
 
+  const selectedValue = packageType || "maven";
+  const onChangeHandler = vauleChangeHandler || (e => {
+    // do nothing
+  });
   return <span>
-    <select onChange={vauleChangeHandler}>
+    <select value={selectedValue} onChange={onChangeHandler}>
       {
-        state.pkgTypes.map(type => {
-          if (pkgType === type){
-            return <option key={`pkgType:${type}`} value={type} selected="true">{type}</option>;
-          }
-          return <option key={`pkgType:${type}`} value={type}>{type}</option>;
-        })
+        state.pkgTypes.map(type => <option key={`pkgType:${type}`} value={type}>{type}</option>)
       }
     </select>
   </span>;
 };
 
 PackageTypeSelect.propTypes = {
-  pkgType: PropTypes.strings,
+  packageType: PropTypes.string,
   vauleChangeHandler: PropTypes.func
 };

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

@@ -0,0 +1,57 @@
+/**
+ * Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import {render, screen, cleanup, waitFor} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {PackageTypeSelect} from "./PackageTypeSelect.jsx";
+
+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();
+      expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
+      expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
+
+      expect(screen.getByRole("option", {name: "maven"}).selected).toBe(true);
+    });
+  });
+
+  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();
+      expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
+      expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
+
+      expect(screen.getByRole("option", {name: "npm"}).selected).toBe(true);
+    });
+  });
+
+});

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

@@ -89,7 +89,7 @@ const StoreEditControlPanel = ({mode, store}) =>{
 
   const handleCancel = () => {
     if(mode === 'edit'){
-      navigate(`/${store.type}/${store.packageType}/view/${store.name}`);
+      navigate(`${Utils.detailHref(store.key)}`);
     }
     if(mode==='new'){
       navigate(`/${store.type}/${store.packageType}`);

src/main/webui/src/app/components/content/remote/RemoteEdit.jsx

@@ -165,8 +165,8 @@ export default function RemoteEdit() {
               mode==='new'||mode==='edit'?
               <React.Fragment>
                 <PackageTypeSelect
-                  pkgType={store.packageType}
-                  handler={e => handleValueChange(e, "packageType")} />
+                  packageType={store.packageType}
+                  vauleChangeHandler={e => handleValueChange(e, "packageType")} />
               </React.Fragment>:
               <span className="key">{store.packageType}</span>
             }