ci: added commit lint, build check, test and release (#31)

* ci: added commit lint, build check, test and release

* refactor: fix compilation errors

* ci: add checkout to the tests

* test: resolved issues with running tests

* chore: addressed PR comments

* chore: renamed package-name in release-please

src/App.test.tsx

@@ -1,9 +1,23 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+// Mocks methods that are not implemented in JSDOM
+// see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// TODO: this is not a good test and should be removed. Keeping it in to make sure the whole app renders (to be used in CI)
+test('should render the app', async () => {
+  render(<App />);
 });

src/App.tsx

@@ -81,16 +81,16 @@ function App() {
 
     if (theme) {
       toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
       toggleThemeMode('dark')
     }
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-      toggleThemeMode(e.matches ? "dark" : "light")
+    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
+      toggleThemeMode(e?.matches ? "dark" : "light")
     });
 
-    return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {
-      toggleThemeMode(e.matches ? "dark" : "light")
+    return () => window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
+      toggleThemeMode(e?.matches ? "dark" : "light")
     })
 
   }, []);

src/components/CodeBlock.tsx

@@ -1,5 +1,4 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { hybrid } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 interface IProps {
     code: string,
@@ -12,7 +11,6 @@ const CodeBlock = (props: IProps) => {
     <div style={{textAlign:'left'}}>
         <SyntaxHighlighter 
         language={props.language} 
-        style={hybrid}
         showLineNumbers={props.showLineNumbers}
         >
         {props.code}

src/hooks/apiHooks.tsx

@@ -261,7 +261,7 @@ export const useApiPeerLastCheque = (peerId: string) => {
         .finally(() => {
             setLoading(false)
         })
-    }, [])
+    }, [peerId])
 
     return { peerCheque, isLoadingPeerCheque, error };
 }
@@ -306,7 +306,7 @@ export const useApiPingPeer = (peerId: string) => {
         .finally(() => {
             setPingingPeer(false)
         })
-    }, [])
+    }, [peerId])
 
     return { peerRTP, isPingingPeer, error };
 }
@@ -328,7 +328,7 @@ export const useApiPeerLastCashout = (peerId: string) => {
         .finally(() => {
             setLoading(false)
         })
-    }, [])
+    }, [peerId])
 
     return { peerCashout, isLoadingPeerCashout, error };
 }

src/layout/Dashboard.tsx

@@ -50,16 +50,16 @@ const Dashboard = (props: any) => {
 
       if (theme) {
         toggleThemeMode(String(localStorage.getItem('theme')))
-      } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
         toggleThemeMode('dark')
       }
   
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-        toggleThemeMode(e.matches ? "dark" : "light")
+      window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
+        toggleThemeMode(e?.matches ? "dark" : "light")
       });
 
-      return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {
-        toggleThemeMode(e.matches ? "dark" : "light")
+      return () => window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
+        toggleThemeMode(e?.matches ? "dark" : "light")
       })
     }, [])
 

src/pages/peers/PeerTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Button, Paper, Tooltip, Container, CircularProgress } from '@material-ui/core';
-import { Cancel, Autorenew } from '@material-ui/icons';
+import { Autorenew } from '@material-ui/icons';
 
 import { beeDebugApi } from '../../services/bee';
 
@@ -16,7 +16,6 @@ function PeerTable(props: any) {
     const classes = useStyles();
 
     const [peerLatency, setPeerLatency] = useState([{ peerId: '', rtt: '', loading: false }]);
-    const [removingPeer, setRemovingPeer] = useState(false);
 
     const PingPeer = async (peerId: string) => {
         
@@ -30,21 +29,6 @@ function PeerTable(props: any) {
         })
     }
 
-    const removePeer = (peerId: string) => {
-        setRemovingPeer(true)
-        beeDebugApi.connectivity.removePeer(peerId)
-        .then(res => {
-            window.location.reload()
-            setRemovingPeer(false)
-        })
-        .catch(error => {
-            console.log(error)
-        })
-        .finally(() => {
-            setRemovingPeer(false)
-        })
-    }
-
     return (
         <div>
             {props.loading ? 
@@ -77,12 +61,6 @@ function PeerTable(props: any) {
                                 <Autorenew />}
                                 </Button>
                             </Tooltip>
-                            
-                            {/* <Tooltip title="Remove peer">
-                                <Button color="primary" onClick={() => removePeer(peer.address)} >
-                                    <Cancel />
-                                </Button>
-                            </Tooltip> */}
                         </TableCell>
                         </TableRow>
                     ))}

src/pages/status/NodeSetupWorkflow.tsx

@@ -55,45 +55,47 @@ function getStepContent(step: number, props: any) {
 }
 
 export default function NodeSetupWorkflow(props: any) {
+  const {nodeHealth, nodeApiHealth, nodeAddresses, chequebookAddress, chequebookBalance, beeRelease, nodeTopology, setStatusChecksVisible} = props
   const classes = useStyles();
   const [activeStep, setActiveStep] = useState(0);
   const [completed, setCompleted] = useState<{ [k: number]: boolean }>({});
   const steps = getSteps();
 
-  const evaluateNodeStatus = () => {
-    if (props.nodeHealth?.status === 'ok' && props.nodeApiHealth) {
-      handleComplete(0)
-      setActiveStep(1)
-    }
-
-    if (props.beeRelease && props.beeRelease.name === `v${props.nodeHealth?.version?.split('-')[0]}`) {
-      handleComplete(1)
-      setActiveStep(2)
-    }
-
-    if (props.nodeAddresses?.ethereum) {
-      handleComplete(2)
-      setActiveStep(3)
-    }
-
-    if (props.chequebookAddress?.chequebookaddress && props.chequebookBalance.totalBalance > 0) {
-      handleComplete(3)
-      setActiveStep(4)
-    }
-
-    if (props.nodeTopology.connected && props.nodeTopology.connected > 0) {
-      handleComplete(4)
-      setActiveStep(5)
-    }
-  }
-
   useEffect(() => {
-    evaluateNodeStatus()
-  }, [])
+    const handleComplete = (index: number) => {
+      const newCompleted = completed;
+      newCompleted[index] = true;
+      setCompleted(newCompleted);
+    };
 
-  useEffect(() => {
+    const evaluateNodeStatus = () => {
+      if (nodeHealth?.status === 'ok' && nodeApiHealth) {
+        handleComplete(0)
+        setActiveStep(1)
+      }
+
+      if (beeRelease && beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}`) {
+        handleComplete(1)
+        setActiveStep(2)
+      }
+
+      if (nodeAddresses?.ethereum) {
+        handleComplete(2)
+        setActiveStep(3)
+      }
+
+      if (chequebookAddress?.chequebookaddress && chequebookBalance.totalBalance > 0) {
+        handleComplete(3)
+        setActiveStep(4)
+      }
+
+      if (nodeTopology.connected && nodeTopology.connected > 0) {
+        handleComplete(4)
+        setActiveStep(5)
+      }
+    }
     evaluateNodeStatus()
-  }, [props])
+  }, [nodeHealth, nodeApiHealth, nodeAddresses, chequebookAddress, beeRelease, chequebookBalance, nodeTopology, completed])
 
   const handleNext = () => {
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -104,13 +106,7 @@ export default function NodeSetupWorkflow(props: any) {
   };
 
   const handleSetupComplete = () => {
-    props.setStatusChecksVisible(false)
-  };
-
-  const handleComplete = (index: number) => {
-    const newCompleted = completed;
-    newCompleted[index] = true;
-    setCompleted(newCompleted);
+    setStatusChecksVisible(false)
   };
 
   return (

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Typography } from '@material-ui/core/';
 import { CheckCircle, Warning } from '@material-ui/icons/';
 import EthereumAddress from '../../../components/EthereumAddress';
@@ -26,7 +25,7 @@ export default function ChequebookDeployFund(props: any) {
                 :
                 <div>
                     <Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
-                    <span>Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit ETH. Then visit the BZZaar here <a href='#'>https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]</a> to get BZZ</span>
+                    <span>Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit ETH. Then visit the BZZaar here <Typography variant='button'>https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]</Typography> to get BZZ</span>
                     <CodeBlockTabs
                     showLineNumbers
                     linux={`bee-get-addr`}

src/pages/status/SetupSteps/NodeConnectionCheck.tsx

@@ -16,13 +16,13 @@ export default function NodeConnectionCheck(props: any) {
               :
               <Error style={{color:'#c9201f', marginRight: '7px', height: '18px'}} />
             }
-            <span style={{marginRight:'15px'}}>Node API  (<a href='#'>{props.apiHost}</a>)</span>
+            <span style={{marginRight:'15px'}}>Node API  (<Typography variant="button">{props.apiHost}</Typography>)</span>
             <ConnectToHost hostName='api_host' defaultHost={props.apiHost} />
           </div>
           <div>
           { !props.nodeApiHealth ? 
             <Typography component="div" variant="body2" gutterBottom style={{margin: '15px'}}>
-              We cannot connect to your nodes API at <a href='#'>{props.apiHost}</a>. Please check the following to troubleshoot your issue.
+              We cannot connect to your nodes API at <Typography variant="button">{props.apiHost}</Typography>. Please check the following to troubleshoot your issue.
               <Accordion style={{marginTop:'20px'}}>
                   <AccordionSummary
                     expandIcon={<ExpandMoreSharp />}
@@ -67,13 +67,13 @@ export default function NodeConnectionCheck(props: any) {
                 :
                 <Error style={{color:'#c9201f', marginRight: '7px', height: '18px'}} />
               }
-              <span style={{marginRight:'15px'}}>Debug API  (<a href='#'>{props.debugApiHost}</a>)</span>
+              <span style={{marginRight:'15px'}}>Debug API  (<Typography variant="button">{props.debugApiHost}</Typography>)</span>
               <ConnectToHost hostName={'debug_api_host'} defaultHost={props.debugApiHost} />
             </div>
             <div>
             { props.nodeHealth?.status !== 'ok' ? 
               <Typography component="div" variant="body2" gutterBottom style={{margin: '15px'}}>
-                We cannot connect to your nodes debug API at <a href='#'>{props.debugApiHost}</a>. Please check the following to troubleshoot your issue.
+                We cannot connect to your nodes debug API at <Typography variant="button">{props.debugApiHost}</Typography>. Please check the following to troubleshoot your issue.
                 <Accordion style={{marginTop:'20px'}}>
                   <AccordionSummary
                     expandIcon={<ExpandMoreSharp />}

src/pages/status/StatusCard.tsx

@@ -120,7 +120,7 @@ function StatusCard(props: IProps) {
                                 props.loadingBeeRelease ?
                                 '' 
                                 :
-                                <a href='#'>update</a>
+                                <Typography variant="button">update</Typography>
                             }
                         </Typography>
                         <Typography component="div" variant="subtitle2" gutterBottom>