Add unit test for content-browse frontend component

src/main/webui/package.json

@@ -49,12 +49,12 @@
     "build-dev": "npm run clean && npm run compile-dev && npm run test && npm run deploy && cp ./src/content-browse/html/* ./dist/content-browse/",
     "build": "npm run clean && npm run compile && npm run test && npm run deploy && cp ./src/content-browse/html/* ./dist/content-browse/",
     "clean": "rm -rf ./dist/*",
-    "compile-dev": "NODE_ENV=production webpack --config ./webpack.config.js --progress && webpack --config ./webpack-content-browse.dev.config.js --progress",
+    "compile-dev": "NODE_ENV=development webpack --config ./webpack.config.js --progress && webpack --config ./webpack-content-browse.dev.config.js --progress",
     "compile": "NODE_ENV=production webpack --config ./webpack.config-prod.js --progress && webpack --config ./webpack-content-browse.prod.config.js --progress",
     "deploy": "cp -r ./src/app/html/* ./dist/",
     "dev": "webpack-dev-server --open --hot",
     "lint": "eslint './src/**'",
     "lint-fix": "eslint './src/**' --fix",
-    "test": "jest"
+    "test": "NODE_ENV=test jest"
   }
 }

src/main/webui/src/content-browse/DirectoryListing.jsx

@@ -13,8 +13,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-/* eslint-disable react/prop-types */
+
 import React, {useState, useEffect} from 'react';
+import {PropTypes} from 'prop-types';
 import axios from 'axios';
 import {styles} from './style.js';
 
@@ -55,6 +56,11 @@ const URLList = props => {
   );
 };
 
+URLList.propTypes = {
+  urls: PropTypes.array.isRequired,
+  parentUrl: PropTypes.string
+};
+
 const Footer = props => {
   const elems = props.sources && props.sources.map((src, index)=>{
       let url = src.replace(/http(s{0,1}):\/\/.*?\//u, getFullHost()+"/");
@@ -70,6 +76,32 @@ const Footer = props => {
   );
 };
 
+Footer.propTypes = {
+  sources: PropTypes.array.isRequired
+};
+
+const getStoreKey = storeKey => {
+  let storeElems = storeKey.split(":");
+  return {
+    "packageType": storeElems[0],
+    "type": storeElems[1],
+    "name": storeElems[2]
+  };
+};
+
+export const URLPage = props => {
+  const data = props.listingData;
+  return <div>
+    <h2 style={styles.Header} key="title">Directory listing for {data.path} on {getStoreKey(data.storeKey).name}</h2>
+    <URLList key="urllist" parentUrl={data.parentUrl} urls={data.listingUrls} />
+    <Footer key="footer" sources={data.sources} />
+  </div>;
+};
+
+URLPage.propTypes = {
+  listingData: PropTypes.object.isRequired
+};
+
 const init = setState => {
   const url =`/api${document.location.pathname}`;
   useEffect(()=>{
@@ -98,16 +130,7 @@ const init = setState => {
   }, []);
 };
 
-const getStoreKey = state => {
-  let storeElems = state.data.storeKey.split(":");
-  return {
-    "packageType": storeElems[0],
-    "type": storeElems[1],
-    "name": storeElems[2]
-  };
-};
-
-export const URLPage = ()=>{
+export default function DirectoryListing () {
   const [state, setState] = useState({
       error: null,
       isLoaded: false,
@@ -122,12 +145,6 @@ export const URLPage = ()=>{
   } else if (!isLoaded) {
     return <div>Loading...</div>;
   }
-  document.title = `Directory listing for ${data.path} on ${getStoreKey(state).name}`;
-  return (
-    <div>
-      <h2 style={styles.Header} key="title">Directory listing for {data.path} on {getStoreKey(state).name}</h2>
-      <URLList key="urllist" parentUrl={data.parentUrl} urls={data.listingUrls} />
-      <Footer key="footer" sources={data.sources} />
-    </div>
-  );
-};
+  document.title = `Directory listing for ${data.path} on ${getStoreKey(data.storeKey).name}`;
+  return <URLPage listingData={data} />;
+}

src/main/webui/src/content-browse/DirectoryListing.test.js

@@ -0,0 +1,60 @@
+//
+// 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} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {URLPage} from "./DirectoryListing";
+
+const mockData = {
+  "storeKey": "maven:remote:central",
+  "parentUrl": "http://localhost/api/browse/maven/remote/central/",
+  "parentPath": "/",
+  "path": "ant/",
+  "storeBrowseUrl": "http://localhost/api/browse/maven/remote/central",
+  "storeContentUrl": "http://localhost/api/content/maven/remote/central",
+  "baseBrowseUrl": "http://localhost/api/browse/maven",
+  "baseContentUrl": "http://localhost/api/content/maven",
+  "sources": ["http://localhost/api/browse/maven/remote/central"],
+  "listingUrls": [
+    {
+      "path": "/ant/ant-junit/",
+      "listingUrl": "http://localhost/api/browse/maven/remote/central/ant/ant-junit/",
+      "sources": ["https://repo.maven.apache.org/maven2/ant/ant-junit/"]
+    }, {
+      "path": "/ant/ant-launcher/",
+      "listingUrl": "http://localhost/api/browse/maven/remote/central/ant/ant-launcher/",
+      "sources": ["https://repo.maven.apache.org/maven2/ant/ant-launcher/"]
+    }, {
+      "path": "/ant/ant-nodeps/",
+      "listingUrl": "http://localhost/api/browse/maven/remote/central/ant/ant-nodeps/",
+      "sources": ["https://repo.maven.apache.org/maven2/ant/ant-nodeps/"]
+    }
+  ]
+};
+
+describe("DirectoryListing Component testing in conent-browse", () => {
+  it("URLPage component rendering with a list of urls and parent", ()=>{
+    render(<URLPage listingData={mockData}/>);
+    const allListItems = screen.getAllByRole("listitem");
+    expect(allListItems.length).toBe(5);
+    expect(screen.getByText(/\.\./ui)).toBeInTheDocument();
+    expect(screen.getByText(/ant-junit\//ui)).toBeInTheDocument();
+    expect(screen.getByText(/ant-launcher\//ui)).toBeInTheDocument();
+    expect(screen.getByText(/ant-nodeps\//ui)).toBeInTheDocument();
+    expect(screen.getByText(/http:\/\/localhost\/api\/browse\/maven\/remote\/central/ui)).toBeInTheDocument();
+  });
+});

src/main/webui/src/content-browse/index.js

@@ -16,8 +16,8 @@
 
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-import {URLPage} from './DirectoryListing.jsx';
+import DirectoryListing from './DirectoryListing.jsx';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(<URLPage/>);
+root.render(<DirectoryListing/>);