add unit tests

.babelrc

@@ -1,4 +1,14 @@
 {
-  "presets": ["@babel/env", "@babel/react"],
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/react"
+  ],
   "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.gitignore

@@ -3,3 +3,4 @@ yarn.lock
 package-lock.json
 build
 dist
+coverage

README.md

@@ -7,6 +7,7 @@
 <p align="center">
   <a href="https://travis-ci.com/kremalicious/blowfish"><img src="https://travis-ci.com/kremalicious/blowfish.svg?branch=master" /></a>
   <a href="https://codeclimate.com/github/kremalicious/blowfish/maintainability"><img src="https://api.codeclimate.com/v1/badges/beeab7902ee5307fc0a1/maintainability" /></a>
+  <a href="https://codeclimate.com/github/kremalicious/blowfish/test_coverage"><img src="https://api.codeclimate.com/v1/badges/beeab7902ee5307fc0a1/test_coverage" /></a>
   <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/blowfish.svg" /></a>
 </p>
 

package.json

@@ -5,7 +5,9 @@
   "description": "🐡 Simple Electron-based desktop app to retrieve and display your total Ocean Token balances.",
   "main": "./src/main/index.js",
   "scripts": {
-    "test": "eslint --ignore-path .gitignore ./src/**/*.{js,jsx} && stylelint --ignore-path .gitignore ./src/**/*.{css,scss}",
+    "test": "npm run lint && jest --config=src/renderer/jest.config.js --coverage",
+    "test:watch": "jest --config=src/renderer/jest.config.js --coverage --watch",
+    "lint": "eslint --ignore-path .gitignore ./src/**/*.{js,jsx} && stylelint --ignore-path .gitignore ./src/**/*.{css,scss}",
     "start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
     "build": "cross-env NODE_ENV=production webpack --config webpack.common.config.js",
     "package": "electron-builder build -mwl -p never && open ./dist",
@@ -30,41 +32,48 @@
     "ms": "^2.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
+    "@babel/core": "^7.6.2",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
+    "@jest-runner/electron": "^2.0.2",
     "@reach/router": "^1.2.1",
+    "@react-mock/state": "^0.1.8",
     "@svgr/webpack": "^4.3.2",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.1.4",
     "auto-changelog": "^1.16.1",
     "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.0.4",
     "cross-env": "^6.0.0",
     "css-loader": "^3.2.0",
-    "electron": "^6.0.7",
+    "electron": "^6.0.10",
     "electron-builder": "^21.2.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-store": "^5.0.0",
-    "eslint": "^6.3.0",
-    "eslint-config-prettier": "^6.2.0",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-react": "^7.14.3",
     "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.8.0",
     "prettier": "^1.18.2",
     "prettier-stylelint": "^0.4.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-pose": "^4.0.8",
-    "release-it": "^12.3.6",
+    "release-it": "^12.4.1",
     "style-loader": "^1.0.0",
     "stylelint": "^11.0.0",
-    "stylelint-config-css-modules": "^1.4.0",
+    "stylelint-config-css-modules": "^1.5.0",
     "stylelint-config-standard": "^19.0.0",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.8",
-    "webpack-dev-server": "^3.8.0"
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.1"
   },
   "browserslist": "electron >= 6.0",
   "build": {

src/renderer/App.jsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import {
   Router,
@@ -44,24 +44,22 @@ PosedRouter.propTypes = {
   children: PropTypes.any.isRequired
 }
 
-export default class App extends PureComponent {
-  componentDidMount() {
+export default function App() {
+  useEffect(() => {
     ipcRenderer.on('goTo', (evt, route) => {
       navigate(route)
     })
-  }
+  }, [])
 
-  render() {
-    return (
-      <>
-        {process.platform === 'darwin' && <Titlebar />}
-        <div className={styles.app}>
-          <PosedRouter>
-            <Home path="/" default />
-            <Preferences path="/preferences" />
-          </PosedRouter>
-        </div>
-      </>
-    )
-  }
+  return (
+    <>
+      {process.platform === 'darwin' && <Titlebar />}
+      <div className={styles.app}>
+        <PosedRouter>
+          <Home path="/" default />
+          <Preferences path="/preferences" />
+        </PosedRouter>
+      </div>
+    </>
+  )
 }

src/renderer/App.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import AppProvider from './store/AppProvider'
+import App from './App'
+
+describe('App', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <AppProvider>
+        <App />
+      </AppProvider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})

src/renderer/components/Animations.js

@@ -22,15 +22,3 @@ export const fadeIn = {
     transition: { duration: 100 }
   }
 }
-
-export const characterAnimation = {
-  exit: { opacity: 0, y: 10 },
-  enter: {
-    opacity: 1,
-    y: 0,
-    transition: ({ charInWordIndex }) => ({
-      type: 'spring',
-      delay: charInWordIndex * 20
-    })
-  }
-}

src/renderer/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/jest/__mocks__/file-mock.js',
+    '\\.svg': '<rootDir>/jest/__mocks__/svgr-mock.js'
+  },
+  testPathIgnorePatterns: ['node_modules', 'dist', 'build', 'coverage'],
+  testURL: 'http://localhost',
+  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.js'],
+  runner: '@jest-runner/electron',
+  testEnvironment: '@jest-runner/electron/environment'
+}

src/renderer/jest/__fixtures__/context.js

@@ -0,0 +1,34 @@
+const prices = new Map()
+prices.set('ocean', 1)
+prices.set('eur', 1)
+prices.set('usd', 1)
+prices.set('btc', 1)
+prices.set('eth', 1)
+
+const priceChanges = {
+  eur: -14.051056318029353,
+  usd: -14.051056318029268,
+  btc: -14.761248039421442,
+  eth: -17.538786176215627
+}
+
+export default {
+  accentColor: '#0a5fff',
+  accounts: [
+    {
+      address: '0xxxxxxxxxxxxxxxxxxx',
+      balance: {
+        ocean: 10000,
+        btc: 1.9,
+        eth: 10000,
+        eur: 10000,
+        usd: 10000
+      }
+    }
+  ],
+  currency: 'ocean',
+  isLoading: false,
+  needsConfig: false,
+  prices,
+  priceChanges
+}

src/renderer/jest/__mocks__/file-mock.js

@@ -0,0 +1 @@
+module.exports = 'div'

src/renderer/jest/__mocks__/svgr-mock.js

@@ -0,0 +1 @@
+module.exports = 'svg-mock'

src/renderer/jest/setup-test-env.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

src/renderer/screens/Home/Welcome.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Link } from '@reach/router'
-import { AppContext } from '../store/createContext'
-import IconRocket from '../images/rocket.svg'
+import { AppContext } from '../../store/createContext'
+import IconRocket from '../../images/rocket.svg'
 import styles from './Welcome.module.css'
 
 const Welcome = () => {

src/renderer/screens/Home/index.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Link } from '@reach/router'
 import { AppContext } from '../../store/createContext'
-import Welcome from '../../components/Welcome'
+import Welcome from './Welcome'
 import Spinner from '../../components/Spinner'
 import Divider from '../../components/Divider'
 import Total from './Total'
@@ -10,7 +10,7 @@ import Accounts from './Accounts'
 import IconCog from '../../images/cog.svg'
 import styles from './index.module.css'
 
-const Home = () => {
+export default function Home() {
   const { isLoading, needsConfig } = useContext(AppContext)
 
   return (
@@ -37,5 +37,3 @@ const Home = () => {
     </>
   )
 }
-
-export default Home

src/renderer/screens/Home/index.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { AppContext } from '../../store/createContext'
+import context from '../../jest/__fixtures__/context'
+import Home from '.'
+
+describe('Home', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <AppContext.Provider value={context}>
+        <Home />
+      </AppContext.Provider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+    fireEvent.click(getByText(/Ξ/))
+  })
+
+  it('renders Welcome without config', () => {
+    const { container } = render(
+      <AppContext.Provider value={{ ...context, needsConfig: true }}>
+        <Home />
+      </AppContext.Provider>
+    )
+    expect(container.firstChild).toHaveTextContent(
+      'Add your first address to get started.'
+    )
+  })
+})

src/renderer/screens/Preferences/Accounts/New.jsx

@@ -2,25 +2,32 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './New.module.css'
 
-const New = ({ input, handleInputChange, handleSave, accentColor }) => (
-  <li>
-    <input
-      type="text"
-      placeholder="0xxxxxxxx"
-      value={input}
-      onChange={e => handleInputChange(e)}
-      className={styles.input}
-    />
+export default function New({
+  input,
+  handleInputChange,
+  handleSave,
+  accentColor
+}) {
+  return (
+    <li>
+      <input
+        type="text"
+        placeholder="0xxxxxxxx"
+        value={input}
+        onChange={e => handleInputChange(e)}
+        className={styles.input}
+      />
 
-    <button
-      className={styles.button}
-      onClick={e => handleSave(e)}
-      style={{ color: accentColor }}
-    >
-      Add
-    </button>
-  </li>
-)
+      <button
+        className={styles.button}
+        onClick={e => handleSave(e)}
+        style={{ color: accentColor }}
+      >
+        Add
+      </button>
+    </li>
+  )
+}
 
 New.propTypes = {
   input: PropTypes.string.isRequired,
@@ -28,5 +35,3 @@ New.propTypes = {
   handleSave: PropTypes.func.isRequired,
   accentColor: PropTypes.string.isRequired
 }
-
-export default New

src/renderer/screens/Preferences/Accounts/Saved.jsx

@@ -5,36 +5,40 @@ import posed, { PoseGroup } from 'react-pose'
 import { fadeIn } from '../../../components/Animations'
 import styles from './Saved.module.css'
 
-const Item = posed.li(fadeIn)
+export default function Saved({ accounts, handleDelete }) {
+  const Item = posed.li(fadeIn)
 
-const Saved = ({ accounts, handleDelete }) => (
-  <PoseGroup>
-    {accounts.map(account => {
-      const identicon = account && toDataUrl(account)
+  return (
+    <PoseGroup>
+      {accounts.map(account => {
+        const identicon = toDataUrl(account)
 
-      return (
-        <Item key={account}>
-          <div>
-            <img className={styles.identicon} src={identicon} alt="Blockies" />
-            {account}
-          </div>
+        return (
+          <Item key={account}>
+            <div>
+              <img
+                className={styles.identicon}
+                src={identicon}
+                alt="Blockies"
+              />
+              {account}
+            </div>
 
-          <button
-            className={styles.delete}
-            onClick={e => handleDelete(e, account)}
-            title="Remove account"
-          >
-            &times;
-          </button>
-        </Item>
-      )
-    })}
-  </PoseGroup>
-)
+            <button
+              className={styles.delete}
+              onClick={e => handleDelete(e, account)}
+              title="Remove account"
+            >
+              &times;
+            </button>
+          </Item>
+        )
+      })}
+    </PoseGroup>
+  )
+}
 
 Saved.propTypes = {
   accounts: PropTypes.array.isRequired,
   handleDelete: PropTypes.func.isRequired
 }
-
-export default Saved

src/renderer/screens/Preferences/Accounts/index.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { AppContext } from '../../../store/createContext'
+import { StateMock } from '@react-mock/state'
+import Accounts from '.'
+
+describe('Accounts', () => {
+  const ui = (
+    <AppContext.Provider value={{ accentColor: '#0a5fff' }}>
+      <StateMock state={{ accounts: ['xxx'], input: '', error: '' }}>
+        <Accounts />
+      </StateMock>
+    </AppContext.Provider>
+  )
+
+  it('renders correctly', () => {
+    const { container } = render(ui)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('Address can be removed', () => {
+    const { getByTitle } = render(ui)
+    fireEvent.click(getByTitle('Remove account'))
+  })
+
+  it('New address can be added', () => {
+    const { getByPlaceholderText, getByText } = render(ui)
+
+    // error: empty
+    fireEvent.click(getByText('Add'))
+
+    // success
+    fireEvent.change(getByPlaceholderText('0xxxxxxxx'), {
+      target: { value: '0x139361162Fb034fa021d347848F0B1c593D1f53C' }
+    })
+    fireEvent.click(getByText('Add'))
+
+    // error: duplicate
+    fireEvent.change(getByPlaceholderText('0xxxxxxxx'), {
+      target: { value: '0x139361162Fb034fa021d347848F0B1c593D1f53C' }
+    })
+    fireEvent.click(getByText('Add'))
+
+    // error: not an ETH address
+    fireEvent.change(getByPlaceholderText('0xxxxxxxx'), {
+      target: { value: '0x000' }
+    })
+    fireEvent.click(getByText('Add'))
+  })
+})

src/renderer/screens/Preferences/index.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { AppContext } from '../../store/createContext'
+import Preferences from '.'
+
+describe('Preferences', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <AppContext.Provider value={{ accentColor: '#0a5fff' }}>
+        <Preferences />
+      </AppContext.Provider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})