Add ava testing suite

.babelrc

@@ -4,5 +4,13 @@
     "typecheck",
     "react-hot-loader/babel",
     "lodash"
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        [ "webpack-loaders", { "config": "${CONFIG}" } ],
+        [ "resolver", { "resolveDirs": [ "./" ] } ]
+      ]
+    }
+  }
 }

.gitignore

@@ -9,5 +9,5 @@ dist
 .env
 .c9
 .nyc_output
-lcov.info
 server/build.js
+coverage.lcov

README.md

@@ -4,6 +4,8 @@
 
 [![dependencies](https://david-dm.org/iam4x/futureRX.svg)](https://david-dm.org/iam4x/futureRX#info=dependencies&view=table)
 [![devDependencies](https://david-dm.org/iam4x/futureRX/dev-status.svg)](https://david-dm.org/iam4x/futureRX#info=devDependencies&view=table)
+[![codecov](https://codecov.io/gh/iam4x/futureRX/branch/master/graph/badge.svg)](https://codecov.io/gh/iam4x/futureRX)
+
 
 WARNING: This is a proof of concept running on bleeding edge libraries, it has not been running in production yet. If you do [contact me](http://twitter.com/iam4x).
 
@@ -36,7 +38,17 @@ This project aim frontend applications which are using an external API to work w
   * #### server side rendering
     * [koa ^2.0.0](http://koajs.com/)
 
-  * #### tools
+  * #### testing tools
+    * [ava ^0.15.2](https://github.com/sindresorhus/ava)
+    * [jsdom ^9.4.0](https://github.com/tmpvar/jsdom)
+    * [enzyme ^2.3.0](https://github.com/airbnb/enzyme)
+    * [chai-enzyme ^0.5.0](https://github.com/producthunt/chai-enzyme)
+    * [faux-jax ^5.0.1](https://github.com/algolia/faux-jax)
+    * [sinon ^1.17.4](https://github.com/sinonjs/sinon)
+    * [sinon-chai ^2.8.0](https://github.com/domenic/sinon-chai)
+    * [nyc ^7.0.0-alpha.5](https://github.com/bcoe/nyc)
+
+  * #### dev/building tools
     * [webpack ^2.1.0-beta.15](http://webpack.github.io/)
     * [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware)
     * [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)

circle.yml

@@ -0,0 +1,9 @@
+machine:
+  node:
+    version: 6.3.0
+dependencies:
+  pre:
+    - npm set progress=false
+test:
+  post:
+    - npm run coverage

core/connect.js

@@ -20,7 +20,7 @@ export default (params) => (Component) => {
 
     if (isArray(params)) {
       return params.reduce((result, storeKey) =>
-        ({ ...result, [storeKey]: store(storeKey) }))
+        ({ ...result, [storeKey]: store(storeKey) }), {})
     }
 
     return ({ store })

package.json

@@ -5,10 +5,35 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint . --ext .jsx,.js",
-    "dev": "node run/dev"
+    "dev": "node run/dev",
+    "ava": "CONFIG=$(pwd)/webpack/test.config.babel.js BABEL_DISABLE_CACHE=1 NODE_ENV=test ava spec/**/*.spec.js",
+    "test": "nyc npm run ava",
+    "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov -t 8bba035a-a292-4daa-b6d4-68acc439495f"
   },
   "author": "iam4x",
   "license": "ISC",
+  "ava": {
+    "babel": "inherit",
+    "failFast": true,
+    "verbose": true,
+    "require": [
+      "./spec/helpers/setup-browser-env",
+      "babel-register",
+      "babel-polyfill"
+    ]
+  },
+  "nyc": {
+    "extension": [
+      ".jsx",
+      ".js"
+    ],
+    "exclude": [
+      "spec/",
+      "webpack/",
+      "node_modules/",
+      "dist/"
+    ]
+  },
   "dependencies": {
     "autoprefixer": "^6.3.6",
     "axios": "^0.12.0",
@@ -61,13 +86,25 @@
     "webpack-node-externals": "^1.2.0"
   },
   "devDependencies": {
+    "ava": "^0.15.2",
+    "babel-plugin-resolver": "0.0.7",
+    "babel-plugin-webpack-loaders": "^0.7.0",
     "browser-sync": "^2.13.0",
     "browser-sync-webpack-plugin": "^1.0.3",
+    "chai": "^3.5.0",
+    "chai-enzyme": "^0.5.0",
+    "codecov": "^1.0.1",
+    "enzyme": "^2.3.0",
+    "faux-jax": "^5.0.1",
+    "jsdom": "^9.4.0",
     "koa-webpack-dev-middleware": "^1.2.1",
     "koa-webpack-hot-middleware": "^1.0.3",
     "mobx-react-devtools": "^4.2.0",
     "node-watch": "^0.3.5",
+    "nyc": "^7.0.0-alpha.5",
     "open": "0.0.5",
+    "sinon": "^1.17.4",
+    "sinon-chai": "^2.8.0",
     "source-map-support": "^0.4.1",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0",

spec/app.spec.js

@@ -0,0 +1,21 @@
+import test from 'ava'
+import React from 'react'
+import chai, { expect } from 'chai'
+import chaiEnzyme from 'chai-enzyme'
+
+import mount from 'spec/helpers/mount'
+import App from 'app/components/app'
+
+chai.use(chaiEnzyme())
+
+test('it should display basic layout', () => {
+  const { wrapper } = mount(App)
+  expect(wrapper.find('.navbar-brand')).to.exist
+  expect(wrapper.find('.navbar-right')).to.exist
+})
+
+test('it should render child', () => {
+  const { wrapper } = mount(App, { children: <h1>Foobar</h1> })
+  expect(wrapper.find('h1')).to.exist
+  expect(wrapper.find('h1')).to.have.text('Foobar')
+})

spec/core/connect.spec.js

@@ -0,0 +1,52 @@
+import { noop } from 'lodash'
+
+import test from 'ava'
+import React from 'react'
+import chai, { expect } from 'chai'
+import chaiEnzyme from 'chai-enzyme'
+
+import createStore from 'app/store'
+import mount from 'spec/helpers/mount'
+import connect from 'core/connect'
+
+chai.use(chaiEnzyme())
+
+const Example = ({ todos }: { todos: any }) =>
+  <ul>{ todos.map(({ title }) => <li key={ title }>{ title }</li>) }</ul>
+
+Example.fetchData = noop
+
+const Example2 = ({ store }: { store: any }) =>
+  <ul>{ store('todos').map(({ title }) => <li key={ title }>{ title }</li>) }</ul>
+
+const data = { todos: [ { title: 'foo' } ] }
+
+test('it should decorate component', t => {
+  const Decorated = connect('todos')(Example)
+  t.is(Decorated.displayName, 'connect(Example)')
+  t.is(Decorated.fetchData, Example.fetchData)
+})
+
+test('it should connect store with store key', () => {
+  const store = createStore(data)
+  const Decorated = connect('todos')(Example)
+  const { wrapper } = mount(Decorated, {}, store)
+  expect(wrapper.find('li')).to.exist
+  expect(wrapper.find('li')).to.have.text('foo')
+})
+
+test('it should connect whole store without params', () => {
+  const store = createStore(data)
+  const Decorated = connect()(Example2)
+  const { wrapper } = mount(Decorated, {}, store)
+  expect(wrapper.find('li')).to.exist
+  expect(wrapper.find('li')).to.have.text('foo')
+})
+
+test('it should connect with an array as params', () => {
+  const store = createStore(data)
+  const Decorated = connect([ 'todos' ])(Example)
+  const { wrapper } = mount(Decorated, {}, store)
+  expect(wrapper.find('li')).to.exist
+  expect(wrapper.find('li')).to.have.text('foo')
+})

spec/core/fetch-data.spec.js

@@ -0,0 +1,21 @@
+import test from 'ava'
+
+import createStore from 'app/store'
+import fetchData from 'core/fetch-data'
+
+const ExampleComponent = {
+  fetchData: (store) => new Promise(resolve => {
+    setTimeout(() => {
+      store('todos').replace([ { title: 'foo' } ])
+      resolve()
+    }, 100)
+  })
+}
+
+test('it should resolve `fetchData` promises', async (t) => {
+  const store = createStore()
+  const components = [ ExampleComponent ]
+  await fetchData(store, { components, params: {}, location: { query: '' } })
+  t.is(store('todos').length, 1)
+  t.is(store('todos')[0].title, 'foo')
+})

spec/core/hydrate.spec.js

@@ -0,0 +1,20 @@
+import test from 'ava'
+
+import createStore from 'app/store'
+import { dehydrate, rehydrate } from 'core/hydrate'
+
+test('it should dehydrate store data', t => {
+  const store = createStore({ todos: [ { title: 'foo' } ] })
+  const json = dehydrate(store)
+  t.is(json, '{"todos":[{"title":"foo"}]}')
+})
+
+test('it should rehydrate store data', t => {
+  const store = createStore()
+
+  window.__appState__ = JSON.parse('{"todos":[{"title":"foo"}]}')
+  rehydrate(store)
+
+  const [ todo ] = store('todos')
+  t.is(todo.title, 'foo')
+})

spec/core/provide-insert-css.spec.js

@@ -0,0 +1,20 @@
+import { noop } from 'lodash'
+
+import test from 'ava'
+import React, { PropTypes } from 'react'
+import { mount } from 'enzyme'
+
+import ProvideInsertCss from 'core/provide-insert-css'
+
+const App = () => <h1>Foobar</h1>
+App.contextTypes = { insertCss: PropTypes.func.isRequired }
+
+const Example = () =>
+  <ProvideInsertCss insertCss={ noop }>
+    <App />
+  </ProvideInsertCss>
+
+test('it should provide `insertCss` function through context', t => {
+  const wrapper = mount(<Example />)
+  t.is(wrapper.find('App').node.context.insertCss, noop)
+})

spec/helpers/mount.js

@@ -0,0 +1,20 @@
+import { noop } from 'lodash'
+
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-tunnel'
+
+import createStore from 'app/store'
+import ProvideInsertCss from 'core/provide-insert-css'
+
+export default (Component, props = {}, store = createStore()) => {
+  const wrapper = mount(
+    <Provider provide={ { store } }>
+      { () =>
+        <ProvideInsertCss insertCss={ noop }>
+          <Component { ...props } />
+        </ProvideInsertCss> }
+    </Provider>
+  )
+  return { store, wrapper }
+}

spec/helpers/setup-browser-env.js

@@ -0,0 +1,3 @@
+global.document = require('jsdom').jsdom('<body></body>')
+global.window = document.defaultView
+global.navigator = window.navigator

webpack/shared.config.js

@@ -35,14 +35,8 @@ export default {
           'postcss'
         ]
       },
-      {
-        test: /global\.css$/,
-        loader: 'style!css!postcss'
-      },
-      {
-        test: /\.md$/,
-        loader: 'raw'
-      }
+      { test: /global\.css$/, loader: 'style!css!postcss' },
+      { test: /\.md$/, loader: 'raw' }
     ]
   },
 

webpack/test.config.babel.js

@@ -0,0 +1,14 @@
+export default {
+  devtool: 'inline-source-map',
+  module: {
+    loaders: [
+      { test: /\.json$/, loader: 'json' },
+      { test: /\.css$/, loader: 'css?modules!postcss' },
+      { test: /\.md$/, loader: 'raw' }
+    ]
+  },
+  output: { libraryTarget: 'commonjs2' },
+  resolve: {
+    extensions: [ '', '.js', '.json', '.jsx' ]
+  }
+}