refactor

package-lock.json

@@ -7914,6 +7914,15 @@
         "@jest/types": "^24.9.0"
       }
     },
+    "jest-mock-axios": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/jest-mock-axios/-/jest-mock-axios-3.1.1.tgz",
+      "integrity": "sha512-3GCDj4aMk9+tRbU4wKZCHrewMdmyI/SuNF/2/ezzxRNAct+herwvy44Seeq7iLTAeFBiuEcL7gVfyf4TV+hUwg==",
+      "dev": true,
+      "requires": {
+        "synchronous-promise": "^2.0.10"
+      }
+    },
     "jest-pnp-resolver": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz",
@@ -13099,6 +13108,12 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "synchronous-promise": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.10.tgz",
+      "integrity": "sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A==",
+      "dev": true
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",

package.json

@@ -9,7 +9,7 @@
     "test": "npm run lint && react-scripts test --coverage --watchAll=false",
     "test:watch": "react-scripts test --coverage",
     "lint": "eslint --ignore-path .gitignore --ext .js .",
-    "format": "prettier ./src/**/*.{js,json} --write"
+    "format": "prettier ./src/**/*.{js,scss,json} --write"
   },
   "dependencies": {
     "@ethereum-navigator/atlas": "^0.4.0",
@@ -23,9 +23,11 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
+    "eslint": "^6.4.0",
     "eslint-config-oceanprotocol": "^1.5.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-prettier": "^3.1.0",
+    "jest-mock-axios": "^3.1.1",
     "node-sass": "^4.12.0",
     "prettier": "^1.18.2"
   },

src/App.module.scss

@@ -34,5 +34,6 @@ h1, h2 {
     display: grid;
     gap: $spacer;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    margin-top: $spacer * 2;
+    margin: $spacer * 2 auto;
+    max-width: 80rem;
 }

src/App.test.js

@@ -3,11 +3,7 @@ import { render } from '@testing-library/react'
 import App from './App'
 
 describe('App', () => {
-  it('should be able to run tests', () => {
-    expect(1 + 2).toEqual(3)
-  })
-
-  it('renders without crashing', async () => {
+  it('renders without crashing', () => {
     const { container } = render(<App />)
     expect(container.firstChild).toBeInTheDocument()
   })

src/Network.js

@@ -14,51 +14,54 @@ Network.propTypes = {
 }
 
 export default function Network({ network }) {
-  const [status, setStatus] = useState('...')
-  const [block, setBlock] = useState('...')
-  const [latency, setLatency] = useState('...')
-  const [clientVersion, setClientVersion] = useState('...')
+  const [status, setStatus] = useState('')
+  const [block, setBlock] = useState('')
+  const [latency, setLatency] = useState('')
+  const [clientVersion, setClientVersion] = useState('')
 
   useEffect(() => {
-    getStatusAndBlock(network, setStatus, setBlock, setLatency)
-    getClientVersion(network, setClientVersion)
-
-    const timer = setInterval(() => {
-      getStatusAndBlock(network, setStatus, setBlock, setLatency)
-      getClientVersion(network, setClientVersion)
-    }, 5000) // run every 5 sec.
-    return () => clearInterval(timer)
-  }, [network])
-
-  async function getStatusAndBlock(network, setStatus, setBlock, setLatency) {
+    async function getStatusAndBlock() {
       const response = await axiosRpcRequest(network.url, 'eth_blockNumber')
 
-    if (response.status !== 200) {
+      if (!response || response.status !== 200) {
         setStatus('Offline')
         return
       }
 
       setStatus('Online')
-    setLatency(response.duration)
+      response.duration && setLatency(response.duration)
 
-    const blockNumber = parseInt(response.data.result, 16)
+      const blockNumber =
+        response && response.data && parseInt(response.data.result, 16)
 
       setBlock(blockNumber)
     }
 
-  async function getClientVersion(network, setClientVersion) {
+    async function getClientVersion() {
       const response = await axiosRpcRequest(network.url, 'web3_clientVersion')
-    setClientVersion(response.data.result)
+      response && response.data && setClientVersion(response.data.result)
     }
 
+    getStatusAndBlock()
+    getClientVersion()
+
+    const timer = setInterval(() => {
+      getStatusAndBlock()
+      getClientVersion()
+    }, 5000) // run every 5 sec.
+    return () => {
+      clearInterval(timer)
+    }
+  }, [network.url])
+
   const isOnline = status === 'Online'
 
   return (
     <div className={styles.network}>
       <h2 className={styles.title}>
         {network.name}
-        <span>{network.type}</span>
         <code>{network.networkId}</code>
+        <span>{network.type}</span>
       </h2>
       <p>
         <code>{network.url}</code>
@@ -67,14 +70,18 @@ export default function Network({ network }) {
         <span className={isOnline ? styles.success : styles.error}>
           {status}
         </span>
+        {latency && (
           <span className={styles.latency} title="Latency">
             {latency} ms
           </span>
+        )}
       </p>
-      <p className={styles.block}>
+      {block && (
+        <p className={styles.block} title="Current block number">
           At block #<a href={`${network.explorer}/blocks/${block}`}>{block}</a>
         </p>
-      <p className={styles.clientVersion}>{clientVersion}</p>
+      )}
+      {clientVersion && <p className={styles.clientVersion}>{clientVersion}</p>}
     </div>
   )
 }

src/Network.test.js

@@ -1,7 +1,18 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitForElement } from '@testing-library/react'
+import mockAxios from 'axios'
 import Network from './Network'
 
+const mockResponse = {
+  status: 200,
+  duration: 1000,
+  data: { result: '0x345' }
+}
+
+afterEach(() => {
+  mockAxios.reset()
+})
+
 describe('Network', () => {
   const network = {
     name: 'Pacific',
@@ -12,8 +23,12 @@ describe('Network', () => {
     explorer: 'https://submarine.oceanprotocol.com'
   }
 
-  it('renders without crashing', () => {
-    const { container } = render(<Network network={network} />)
+  it('renders without crashing', async () => {
+    mockAxios.post.mockResolvedValueOnce(mockResponse)
+
+    const { container, getByTitle } = render(<Network network={network} />)
     expect(container.firstChild).toBeInTheDocument()
+    await waitForElement(() => getByTitle('Current block number'))
+    expect(mockAxios.post).toHaveBeenCalledTimes(2)
   })
 })

src/__mocks__/axios.js

@@ -0,0 +1,2 @@
+import mockAxios from 'jest-mock-axios'
+export default mockAxios

src/index.js

@@ -4,6 +4,16 @@ import './styles/global.scss'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+function renderToDOM() {
+  const rootElement = document.getElementById('root')
+
+  if (rootElement !== null) {
+    ReactDOM.render(<App />, rootElement)
+  }
+}
+
+export { renderToDOM }
+
+renderToDOM()
 
 serviceWorker.register()

src/index.test.js

@@ -0,0 +1,12 @@
+import { act } from '@testing-library/react'
+import { renderToDOM } from '.'
+
+describe('index', () => {
+  it('should be able to run tests', () => {
+    expect(1 + 2).toEqual(3)
+  })
+
+  it('renders without crashing', () => {
+    act(() => renderToDOM())
+  })
+})

src/rpc.js

@@ -35,7 +35,6 @@ async function axiosRpcRequest(url, method) {
 
     return response
   } catch (error) {
-    console.error(error.message)
     return error
   }
 }

src/styles/_variables.scss

@@ -31,8 +31,8 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
 $font-size-root: 16px;
 $font-size-base: 1rem;
 $font-size-large: 1.2rem;
-$font-size-small: .85rem;
-$font-size-mini: .65rem;
+$font-size-small: 0.85rem;
+$font-size-mini: 0.65rem;
 $font-size-text: $font-size-base;
 $font-size-label: $font-size-base;
 $font-size-title: 1.4rem;
@@ -49,7 +49,7 @@ $line-height: 1.6;
 
 // Sizes
 $spacer: 2rem;
-$page-frame: .75rem;
+$page-frame: 0.75rem;
 
 $break-point--small: 640px;
 $break-point--medium: 860px;
@@ -57,6 +57,6 @@ $break-point--large: 1140px;
 $break-point--huge: 1400px;
 $brand-border-width: 1px;
 
-$border-radius: .2rem;
+$border-radius: 0.2rem;
 
 $narrowWidth: 35rem;

src/styles/global.scss

@@ -41,13 +41,13 @@ body {
 a {
   text-decoration: none;
   color: $brand-pink;
-    transition: .2s ease-out;
+  transition: 0.2s ease-out;
 
   &:hover,
   &:focus {
     color: darken($brand-pink, 15%);
     text-decoration: none;
-        transform: translate3d(0, -.1rem, 0);
+    transform: translate3d(0, -0.1rem, 0);
   }
 
   &:active {
@@ -203,7 +203,7 @@ picture {
 hr {
   margin: $spacer 0;
   border: 0;
-    border-bottom: .1rem solid $brand-grey-lighter;
+  border-bottom: 0.1rem solid $brand-grey-lighter;
 }
 
 // Quotes
@@ -227,7 +227,7 @@ blockquote > p {
 blockquote {
   margin: 0 0 $spacer;
   padding-left: $spacer / 2;
-    border-left: .2rem solid $brand-grey-lighter;
+  border-left: 0.2rem solid $brand-grey-lighter;
 
   @media screen and (min-width: $break-point--small) {
     padding-left: $spacer / $line-height;