Merge pull request #80 from ligangty/2.0-refactor

Add test for StoreListingWidget

src/main/webui/src/app/components/content/RemoteList.jsx

@@ -98,7 +98,7 @@ export default function RemoteList() {
         handleCreateNew={handlers.createNew} />
       {
       listing?
-      <StoreListingWidget StoreList={listing} DisMap={disMap} StoreType="remote" />:
+      <StoreListingWidget storeList={listing} disableMap={disMap} storeType="remote" />:
       <div className="container-fluid">
         No content fetched!
       </div>

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

@@ -15,13 +15,47 @@
  */
 
 import React, {Fragment} from 'react';
+import {Link} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
 import {Utils} from '../../../utils/AppUtils.js';
-import {LocalURLSection,StoreNameSection,CapabilitiesSection} from './CommonPageWidget.jsx';
 
-export const StoreListingWidget = ({StoreList, DisMap, StoreType}) => {
-  const listing = StoreList;
-  const disMap = DisMap;
+const LocalURLSection = ({storeKey}) => <div className="left-half">
+    <label>Local URL:</label>{' '}
+    <a href={Utils.storeHref(storeKey)} target="_new">{Utils.storeHref(storeKey)}</a>
+  </div>;
+
+LocalURLSection.propTypes = {
+  storeKey: PropTypes.string
+};
+
+// For options, see AppUtils.remoteOptions|hostedOptions
+const CapabilitiesSection = ({options}) => <div className="left-half">
+    <label>Capabilities:</label>{' '}
+    {
+      options.map(option => <div key={option.title} className="options">
+          <span className="key">{option.icon} </span>
+        </div>)
+    }
+  </div>;
+
+CapabilitiesSection.propTypes = {
+  options: PropTypes.array
+};
+
+const StoreNameSection = ({store, storeClass}) => <div className="fieldset-caption">
+    <Link to={`/${store.type}/${store.packageType}/view/${store.name}`}>
+      <span className={storeClass}>{store.packageType}-{store.name}</span>
+    </Link>
+  </div>;
+
+StoreNameSection.propTypes = {
+  store: PropTypes.object,
+  storeClass: PropTypes.string
+};
+
+const StoreListingWidget = ({storeList, disableMap, storeType}) => {
+  const listing = storeList;
+  const disMap = disableMap;
   if(listing && listing.length >0){
     return (
       <div className="content-panel">
@@ -36,7 +70,7 @@ export const StoreListingWidget = ({StoreList, DisMap, StoreType}) => {
                     <div>
                       <LocalURLSection storeKey={store.key} />
                       {
-                        StoreType === "remote" && <div className="right-half">
+                        storeType === "remote" && <div className="right-half">
                           <label>Remote URL:</label>
                           <a href={store.url} target="_new">{store.url}</a>
                         </div>
@@ -59,7 +93,12 @@ export const StoreListingWidget = ({StoreList, DisMap, StoreType}) => {
 };
 
 StoreListingWidget.propTypes = {
-  StoreList: PropTypes.array,
-  DisMap: PropTypes.object,
-  StoreType: PropTypes.string
+  storeList: PropTypes.array,
+  disableMap: PropTypes.object,
+  storeType: PropTypes.string
 };
+
+export {LocalURLSection,
+   CapabilitiesSection,
+   StoreNameSection,
+   StoreListingWidget};

src/main/webui/src/app/components/content/common/CommonPageWidget.test.js → src/main/webui/src/app/components/content/common/StoreListingWidget.test.js

@@ -18,15 +18,18 @@ import React from "react";
 import {MemoryRouter} from 'react-router-dom';
 import {render, screen, cleanup} from '@testing-library/react';
 import '@testing-library/jest-dom';
-import {LocalURLSection, CapabilitiesSection, StoreNameSection} from "./CommonPageWidget.jsx";
+import {LocalURLSection,
+   CapabilitiesSection,
+   StoreNameSection,
+   StoreListingWidget} from "./StoreListingWidget.jsx";
 import {hostedOptionLegend} from '../../ComponentConstants.js';
 
 afterEach(() => {
   cleanup();
 });
 
-describe('CommonPageWidget tests', () => {
-  it("LocalURLSection", () => {
+describe('StoreListingWidget tests', () => {
+  it("Verify LocalURLSection", () => {
     render(<LocalURLSection storeKey="maven:remote:central"/>);
     const keyLink = screen.getByRole("link");
     expect(keyLink).toBeInTheDocument();
@@ -35,14 +38,14 @@ describe('CommonPageWidget tests', () => {
     expect(screen.getByText(urlPat)).toBeInTheDocument();
   });
 
-  it("CapabilitiesSection",()=>{
+  it("Verify CapabilitiesSection",()=>{
     render(<CapabilitiesSection options={hostedOptionLegend}/>);
     expect(screen.getByText(/\s*S\s*/u)).toBeInTheDocument();
     expect(screen.getByText(/\s*R\s*/u)).toBeInTheDocument();
     expect(screen.getByText(/\s*D\s*/u)).toBeInTheDocument();
   });
 
-  it("StoreNameSection", ()=>{
+  it("Verify StoreNameSection", ()=>{
     // As <Link> is in <StoreNameSection>, needs to use a Router to wrap it
     render(<MemoryRouter>
       <StoreNameSection
@@ -51,4 +54,25 @@ describe('CommonPageWidget tests', () => {
     </MemoryRouter>);
     expect(screen.getByText(/maven-central/u)).toBeInTheDocument();
   });
+
+  it("Verify StoreListingWidget", ()=>{
+    const mockRemoteStoreList = [
+      {name: "central", type: "remote", packageType: "maven",
+       key: "maven:remote:central", disabled: false,
+       url: "https://repo.maven.apache.org/maven2/",
+       description: "official maven central"},
+      {name: "mrrc", type: "remote", packageType: "maven",
+       key: "maven:remote:mrrc", disabled: false,
+       url: "https://maven.repository.redhat.com/ga/",
+       description: "Red Hat maven repository"},
+    ];
+    const mockDisableMap = {};
+    render(<MemoryRouter>
+    <StoreListingWidget storeList={mockRemoteStoreList} disableMap={mockDisableMap} storeType="remote"/>
+    </MemoryRouter>);
+    expect(screen.getByText(/https:\/\/repo.maven.apache.org\/maven2\//u)).toBeInTheDocument();
+    expect(screen.getByText(/official maven central/u)).toBeInTheDocument();
+    expect(screen.getByText(/https:\/\/maven.repository.redhat.com\/ga\//u)).toBeInTheDocument();
+    expect(screen.getByText(/Red Hat maven repository/u)).toBeInTheDocument();
+  });
 });