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

.github/workflows/check.yaml

@@ -0,0 +1,51 @@
+name: Check
+
+on:
+  push:
+    branches:
+      - 'master'
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      ## Try getting the node modules from cache, if failed npm ci
+      - uses: actions/cache@v2
+        id: cache-npm
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
+            ${{ runner.OS }}-node-${{ matrix.node-version }}-
+
+      - name: Install npm deps
+        if: steps.cache-npm.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Commit linting
+        uses: wagoid/commitlint-github-action@v2
+
+      # - name: Code linting
+      #   run: npm run lint:check
+      #   env:
+      #     CI: true
+
+      - name: Build
+        run: npm run build

.github/workflows/release_github.yaml

@@ -0,0 +1,20 @@
+# On each new commit to master, create/update a PR with release
+# automatically bumps version and creates changelog as per conventional commits
+name: Release Github
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: GoogleCloudPlatform/release-please-action@v2
+        id: release
+        with:
+          token: ${{ secrets.REPO_GHA_PAT }}
+          release-type: node
+          package-name: bee-status
+          bump-minor-pre-major: true

.github/workflows/tests.yaml

@@ -0,0 +1,45 @@
+name: Tests
+
+on:
+  push:
+    branches:
+      - 'master'
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      ## Try getting the node modules from cache, if failed npm ci
+      - uses: actions/cache@v2
+        id: cache-npm
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
+            ${{ runner.OS }}-node-${{ matrix.node-version }}-
+
+      - name: Install npm deps
+        if: steps.cache-npm.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test
+
+

package.json

@@ -21,19 +21,19 @@
     "url": "https://github.com/ethersphere/bee-status.git"
   },
   "dependencies": {
-    "@ethersphere/bee-js": "^0.5.1",
+    "@ethersphere/bee-js": "^0.7.1",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
-    "@types/react-router": "^5.1.12",
+    "@types/react-router": "^5.1.13",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
     "feather-icons": "^4.28.0",
     "material-ui-dropzone": "^3.5.0",
     "qrcode.react": "^1.0.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-identicons": "^1.2.5",
     "react-router-dom": "^5.2.0",
@@ -41,19 +41,19 @@
     "web3": "^1.3.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.1",
+    "@testing-library/user-event": "^13.1.1",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^26.0.22",
-    "@types/node": "^12.0.0",
+    "@types/node": "^14.14.37",
     "@types/qrcode.react": "^1.0.1",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.3",
     "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^17.0.3",
     "@types/react-syntax-highlighter": "^13.5.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.2.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.test.tsx

@@ -1,9 +1,23 @@
-import React from 'react';
+import { render } from '@testing-library/react';
-import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+// Mocks methods that are not implemented in JSDOM
-  render(<App />);
+// see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-  const linkElement = screen.getByText(/learn react/i);
+Object.defineProperty(window, 'matchMedia', {
-  expect(linkElement).toBeInTheDocument();
+  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 => {
+    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e.matches ? "dark" : "light")
+      toggleThemeMode(e?.matches ? "dark" : "light")
     });
 
-    return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {
+    return () => window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-      toggleThemeMode(e.matches ? "dark" : "light")
+      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 => {
+      window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-        toggleThemeMode(e.matches ? "dark" : "light")
+        toggleThemeMode(e?.matches ? "dark" : "light")
       });
 
-      return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => {
+      return () => window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e.matches ? "dark" : "light")
+        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)
+    setStatusChecksVisible(false)
-  };
-
-  const handleComplete = (index: number) => {
-    const newCompleted = completed;
-    newCompleted[index] = true;
-    setCompleted(newCompleted);
   };
 
   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>