Start addressing the tests

.babelrc

@@ -0,0 +1,12 @@
+{ 
+  "env": {
+    "test": {
+      "plugins": [ "istanbul" ]
+    }
+  },
+  "presets": [
+    "env",
+    "stage-2",
+    "react"
+  ]
+}

.compilerc

@@ -14,9 +14,6 @@
           "stage-2",
           "react"
         ],
-        "plugins": [
-          "transform-async-to-generator"
-        ],
         "sourceMaps": "inline"
       }
     },
@@ -34,9 +31,6 @@
           "stage-2",
           "react"
         ],
-        "plugins": [
-          "transform-async-to-generator"
-        ],
         "sourceMaps": "none"
       }
     }

.gitignore

@@ -6,4 +6,8 @@ out
 *.lock
 package-lock.json
 dist
-*.zip
+*.zip
+coverage
+.nyc_output
+coverage.lcov
+.cache

.travis.yml

@@ -5,4 +5,5 @@ node_js:
 
 script:
   - npm run lint
-
+  - npm run test
+  - npm run coverage

README.md

@@ -13,6 +13,7 @@
 <p align="center">
   <a href="https://travis-ci.org/ipfs-shipyard/ipfs-desktop"><img src="https://travis-ci.org/ipfs-shipyard/ipfs-desktop.svg?branch=master" /></a>
   <a href="https://david-dm.org/ipfs-shipyard/ipfs-desktop"><img src="https://david-dm.org/ipfs-shipyard/ipfs-desktop.svg?style=flat-square" /></a>
+  <a href="https://codecov.io/gh/ipfs-shipyard/ipfs-desktop"><img src="https://img.shields.io/codecov/c/github/ipfs-shipyard/ipfs-desktop.svg?style=flat-square"></a>
   <a href="https://github.com/feross/standard"><img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"></a>
   <a href="https://github.com/RichardLitt/standard-readme"><img src="https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square" /></a>
 </p>

package.json

@@ -7,17 +7,18 @@
   "main": "src/index.js",
   "dependencies": {
     "auto-launch": "^5.0.5",
+    "bl": "^1.2.1",
     "debug": "^3.1.0",
     "electron-compile": "^6.4.2",
     "electron-menubar": "^1.0.1",
     "electron-squirrel-startup": "^1.0.0",
+    "file-extension": "^4.0.1",
     "go-ipfs-dep": "^0.4.13",
+    "ipfs-stats": "^1.2.1",
     "ipfsd-ctl": "^0.27.0",
-    "file-extension": "^4.0.1",
-    "ipfs-stats": "^1.0.4",
+    "is-ipfs": "^0.3.2",
     "moment": "^2.20.1",
     "multiaddr": "^3.0.2",
-    "is-ipfs": "^0.3.2",
     "normalize.css": "^7.0.0",
     "pretty-bytes": "^4.0.2",
     "prop-types": "^15.6.0",
@@ -28,26 +29,51 @@
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",
-    "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "babel-plugin-istanbul": "^4.1.5",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "chai": "^4.1.2",
+    "codecov": "^3.0.0",
+    "cross-env": "^5.1.3",
     "electron-forge": "^4.2.0",
-    "electron-prebuilt-compile": "1.8.1",
+    "electron-prebuilt-compile": "1.8.2-beta.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4",
     "eslint-config-aegir": "^1.0.1",
     "eslint-config-standard-react": "^5.0.0",
     "eslint-plugin-import": "^2",
     "eslint-plugin-jsx-a11y": "^6",
     "eslint-plugin-react": "^7",
-    "pre-commit": "^1.2.2"
+    "expect": "^22.1.0",
+    "istanbul": "^0.4.5",
+    "jsdom": "^11.6.1",
+    "mocha": "^5.0.0",
+    "nyc": "^11.4.1",
+    "pre-commit": "^1.2.2",
+    "sinon": "^4.2.2",
+    "spectron": "^3.8.0"
   },
   "scripts": {
     "start": "electron-forge start",
     "package": "electron-forge package",
     "make": "electron-forge make",
     "publish": "electron-forge publish",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "cross-env NODE_ENV=test nyc --all mocha --require babel-core/register --require ./test/setup.js --recursive",
+    "coverage": "(nyc report --reporter=text-lcov > coverage.lcov) && codecov"
+  },
+  "nyc": {
+    "include": [
+      "src/**/*.js*"
+    ],
+    "reporter": [
+      "lcov",
+      "text"
+    ],
+    "sourceMap": false,
+    "instrument": false
   },
   "config": {
     "forge": {

src/components/Block.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * It's a Block.
+ *
+ * @param {Object} props
+ *
+ * @prop {Any}      wrapped
+ * @prop {Any}      unwrapped
+ * @prop {Function} [onClick]
+ *
+ * @return {ReactElement}
+ */
+export default function Block (props) {
+  let className = 'block'
+  if (props.className !== '') {
+    className += ' ' + props.className
+  }
+
+  if (props.onClick !== null) {
+    className += ' clickable'
+  }
+
+  return (
+    <div className={className} {...props.onClick !== null && { onClick: props.onClick }}>
+      <div className='wrapper'>
+        {props.wrapped}
+      </div>
+      {props.unwrapped && props.unwrapped}
+    </div>
+  )
+}
+
+Block.propTypes = {
+  wrapped: PropTypes.any.isRequired,
+  unwrapped: PropTypes.any,
+  className: PropTypes.string,
+  onClick: PropTypes.func
+}
+
+Block.defaultProps = {
+  className: '',
+  onClick: null
+}

src/components/Breadcrumbs.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function makeBread (root) {
+  if (root.endsWith('/')) {
+    root = root.substring(0, root.length - 1)
+  }
+
+  let parts = root.split('/').map(part => {
+    return {
+      name: part,
+      path: part
+    }
+  })
+
+  for (let i = 1; i < parts.length; i++) {
+    parts[i] = {
+      name: parts[i].name,
+      path: parts[i - 1].path + '/' + parts[i].path
+    }
+  }
+
+  parts[0] = {
+    name: 'ipfs',
+    path: '/'
+  }
+
+  return parts
+}
+
+export default function Breadcrumbs ({path, navigate}) {
+  const bread = makeBread(path)
+  const res = []
+
+  bread.forEach((link, index) => {
+    res.push(<a key={`${index}link`} onClick={() => { navigate(link.path) }}>{link.name}</a>)
+    res.push(<span key={`${index}divisor`}>/</span>)
+  })
+
+  res.pop()
+  return (
+    <span className='breadcrumbs'>{res}</span>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  path: PropTypes.string.isRequired,
+  navigate: PropTypes.func.isRequired
+}

src/js/components/view/button.js → src/components/Button.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Input from './Input'
 
 /**
  * Is a Button.
@@ -13,9 +14,11 @@ import PropTypes from 'prop-types'
  */
 export default function Button (props) {
   return (
-    <button onClick={props.onClick} className='button'>
-      <span>{props.text}</span>
-    </button>
+    <Input class='button'>
+      <button onClick={props.onClick}>
+        <span>{props.text}</span>
+      </button>
+    </Input>
   )
 }
 

src/js/components/view/checkbox-block.js → src/components/CheckboxBlock.js

@@ -1,6 +1,9 @@
+
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Block from './Block'
+
 /**
  * Is a Checkbox Block.
  *
@@ -19,18 +22,21 @@ export default function CheckboxBlock (props) {
   }
 
   return (
-    <div onClick={_onClick} className='info-block checkbox'>
-      <div className='wrapper'>
+    <Block
+      onClick={_onClick}
+      className='checkbox'
+      wrapped={(
         <div>
-          <p className='label'>{props.title}</p>
-          <p className='info'>{props.info}</p>
-        </div>
-        <div className='right'>
-          <input type='checkbox' onChange={_onClick} checked={props.value} />
-          <span className='checkbox' />
+          <div>
+            <p className='label'>{props.title}</p>
+            <p className='info'>{props.info}</p>
+          </div>
+          <div className='right'>
+            <input type='checkbox' onChange={_onClick} checked={props.value} />
+            <span className='checkbox' />
+          </div>
         </div>
-      </div>
-    </div>
+      )} />
   )
 }