chore(*): add test-coverage on es6 source code

Since es6+ and JSX are transpiled, regular code coverage reports would be done on transpiled code. The previous way to to test coverage on original es6 source code was through isparta (which has been flagged as "No maintenance intended" by its maintainer). The best way now is to use babel-plugin-__coverage__ (directly a babel loader): https://github.com/dtinth/babel-plugin-__coverage__

The combo is:
* babel-plugin-__coverage__ to instrument the es6 code while transpilation and add meta data that will be used by karma-coverage https://github.com/dtinth/babel-plugin-__coverage__
* karma-coverage to process this meta data and make reports (in html or for tools like jenkins, coveralls ...) https://github.com/karma-runner/karma-coverage

Special thanks to @douglasduteil for https://github.com/douglasduteil/isparta which has been helpful.

Author: topheman

.babelrc

@@ -5,6 +5,12 @@
     // only enable it when process.env.NODE_ENV is 'development' or undefined
     "development": {
       "presets": ["react-hmre"]
+    },
+    // configuration for babel-plugin-__coverage__ - see https://github.com/dtinth/babel-plugin-__coverage__#readme
+    // only enables the coverage loader when process.env.NODE_ENV=mock (used by karma-coverage to create coverage reports)
+    // I use "mock", you might use "test"
+    "mock": {
+      "plugins": [ [ "__coverage__", { "ignore": "src/**/*.spec.js" } ] ]
     }
   }
 }

karma.conf.js

@@ -1,7 +1,24 @@
+// retrieve args
+const argv = require('minimist')(process.argv.slice(2));
+const COVERAGE = argv.coverage === true;
+
+// the following env vars are used in webpack.config.js
+process.env.UNIT_TEST = true;
+
 const path = require('path');
 const webpackConfig = require('./webpack.config');
+const log = require('npmlog');
+log.level = 'silly';
 
-process.env.UNIT_TEST = true;
+const reporters = ['mocha'];
+const coverageReporter_reporters = [
+  {type: 'lcov', dir: './build/reports/coverage'}
+];
+
+if (COVERAGE) {
+  log.info('karma', 'COVERAGE mode enabled');
+  reporters.push('coverage');
+}
 
 module.exports = function(config) {
   config.set({
@@ -38,7 +55,8 @@ module.exports = function(config) {
       'karma-mocha-reporter',
       'karma-sourcemap-loader',
       'karma-chrome-launcher',
-      'karma-phantomjs-launcher'
+      'karma-phantomjs-launcher',
+      'karma-coverage'
     ],
 
 
@@ -47,7 +65,10 @@ module.exports = function(config) {
     //    presets: ['airbnb']
     //  }
     //},
-    reporters: ['mocha'],
+    coverageReporter: {
+      reporters: coverageReporter_reporters
+    },
+    reporters: reporters,
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -8,8 +8,9 @@
     "postinstall": "npm run webdriver-manager-update",
     "test": "npm run lint && npm run karma",
     "test-build": "./bin/test-build.sh",
-    "karma": "npm run karma-watch -- --single-run --browsers PhantomJS",
+    "karma": "npm run karma-watch -- --single-run",
     "karma-watch": "NODE_ENV=mock LINTER=false ./node_modules/karma/bin/karma start",
+    "karma-coverage": "npm run karma -- --coverage",
     "mocha": "NODE_ENV=mock mocha 'src/**/*.spec.js' --compilers js:babel-core/register --recursive --require ./test/unit/setup.js",
     "mocha-watch": "npm run mocha -- --watch",
     "unit-test": "echo 'Deprecated, please use \"npm run karma\"' && exit 0",
@@ -58,6 +59,7 @@
     "babel-core": "^6.7.4",
     "babel-eslint": "^5.0.0",
     "babel-loader": "^6.2.4",
+    "babel-plugin-__coverage__": "^0.11111.0",
     "babel-plugin-add-module-exports": "^0.1.2",
     "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-plugin-transform-es2015-destructuring": "^6.6.5",
@@ -85,6 +87,7 @@
     "karma": "^0.13.22",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chrome-launcher": "^0.2.3",
+    "karma-coverage": "^0.5.5",
     "karma-mocha": "^0.2.2",
     "karma-mocha-reporter": "^2.0.0",
     "karma-phantomjs-launcher": "^1.0.0",