TASK: Move from mocha standalone to karma in an effort to add behavio…

…r tests to the code base #18
neos · Feb 1, 2016 · 56b7483 · 56b7483
1 parent edff0c6
commit 56b7483
Show file tree

Hide file tree

Showing 26 changed files with 94 additions and 134 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -13,6 +13,10 @@
         "commonjs": true,
         "mocha": true
     },
+    "globals": {
+        "expect": true,
+        "sinon": false
+    },
     "rules": {
         // Errors
         "comma-dangle": [2, "never"],

diff --git a/README.md b/README.md
@@ -41,6 +41,10 @@ Done. Open the sub-route `/che!` to login to the new interface.
 
 ## Contributing
 In lieu of a formal styleguide, take care to maintain the existing coding style.
+We also embrace the testability of our code, so make sure to add tests and/or maintain the current coverage level.
+
+### Writing tests
+By default, our tests are ran with Karma and PhantomJS. Instead of relying on the default settings of Karma, we use [chai]('http://chaijs.com/') as our assertion library and [sinon](http://sinonjs.org/) for spies. If you want to add tests for React Components, we recommend [skin-deep](https://github.com/glenjamin/skin-deep) which utilizes the shallow render test utility of React.
 
 ## License
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

diff --git a/Resources/Private/JavaScript/Host/Components/Button/index.spec.js b/Resources/Private/JavaScript/Host/Components/Button/index.spec.js
@@ -1,10 +1,7 @@
 import React from 'react';
-import chai from 'chai';
 import {shallowRender} from 'skin-deep';
 import Button from './index.js';
 
-const {expect} = chai;
-
 function renderTree(props) {
     return shallowRender(
         <Button {...props}>

diff --git a/Resources/Private/JavaScript/Host/Components/DropDown/index.spec.js b/Resources/Private/JavaScript/Host/Components/DropDown/index.spec.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import chai from 'chai';
 import {renderIntoDocument, Simulate} from 'react-addons-test-utils';
 import {findDOMNode} from 'react-dom';
 import DropDown from './index.js';
 
-const expect = chai.expect;
-
 describe('DropDown Component', () => {
     it('should be hidden initially.', () => {
         const component = renderIntoDocument(

diff --git a/Resources/Private/JavaScript/Host/Redux/Transient/Changes/index.spec.js b/Resources/Private/JavaScript/Host/Redux/Transient/Changes/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {add, clear} = actions;
-const {expect} = chai;
 
 describe('"host.redux.transient.changes" ', () => {
     const changeFixture = {

diff --git a/Resources/Private/JavaScript/Host/Redux/Transient/Nodes/index.spec.js b/Resources/Private/JavaScript/Host/Redux/Transient/Nodes/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {add, addBulk} = actions;
-const {expect} = chai;
 
 describe('"host.redux.transient.nodes" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/FlashMessages/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/FlashMessages/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {add, remove} = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.flashMessages" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/FullScreen/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/FullScreen/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {toggle} = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.fullScreen" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/LeftSideBar/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/LeftSideBar/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {toggle} = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.leftSideBar" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/OffCanvas/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/OffCanvas/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {toggle, hide} = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.offCanvas" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/PageTree/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/PageTree/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {setData, setSubTree, setNode} = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.pageTree" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/Remote/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/Remote/index.spec.js
@@ -1,4 +1,3 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
@@ -11,7 +10,6 @@ const {
     startDiscarding,
     finishDiscarding
 } = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.remote" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/RightSideBar/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/RightSideBar/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {toggle} = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.rightSideBar" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/UI/Tabs/index.spec.js b/Resources/Private/JavaScript/Host/Redux/UI/Tabs/index.spec.js
@@ -1,4 +1,3 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
@@ -10,7 +9,6 @@ const {
     setMetaData,
     updateWorkspaceInfo
 } = actions;
-const {expect} = chai;
 
 describe('"host.redux.ui.tabs" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Host/Redux/User/Name/index.spec.js b/Resources/Private/JavaScript/Host/Redux/User/Name/index.spec.js
@@ -1,10 +1,7 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer} from './index.js';
 
-const {expect} = chai;
-
 describe('"host.redux.user.name" ', () => {
     let store = null;
 

diff --git a/Resources/Private/JavaScript/Host/Redux/User/Settings/index.spec.js b/Resources/Private/JavaScript/Host/Redux/User/Settings/index.spec.js
@@ -1,10 +1,8 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {createStore} from 'redux';
 import {reducer, actions} from './index.js';
 
 const {toggleAutoPublishing} = actions;
-const {expect} = chai;
 
 describe('"host.redux.user.settings" ', () => {
     let store = null;

diff --git a/Resources/Private/JavaScript/Shared/Utilities/ExecuteCallback.spec.js b/Resources/Private/JavaScript/Shared/Utilities/ExecuteCallback.spec.js
@@ -1,13 +1,5 @@
-import chai from 'chai';
-import sinon from 'sinon';
-import sinonMiddleware from 'sinon-chai';
 import executeCallback, {ERROR_INVALID_EVENT} from './ExecuteCallback.js';
 
-const {expect} = chai;
-
-chai.should();
-chai.use(sinonMiddleware);
-
 describe('"shared.utilities.executeCallback"', () => {
     let eventMock = null;
 

diff --git a/Resources/Private/JavaScript/Shared/Utilities/FilterDeep.spec.js b/Resources/Private/JavaScript/Shared/Utilities/FilterDeep.spec.js
@@ -1,13 +1,5 @@
-import chai from 'chai';
-import sinon from 'sinon';
-import sinonMiddleware from 'sinon-chai';
 import filterDeep, {ERROR_INVALID_COMPARATOR} from './FilterDeep.js';
 
-const {expect} = chai;
-
-chai.should();
-chai.use(sinonMiddleware);
-
 describe('"shared.utilities.filterDeep"', () => {
     it('should throw an error if no comparator function was passed as the second argument.', () => {
         const fn = () => filterDeep({

diff --git a/Resources/Private/JavaScript/Shared/Utilities/ImmutableOperations.spec.js b/Resources/Private/JavaScript/Shared/Utilities/ImmutableOperations.spec.js
@@ -1,4 +1,3 @@
-import chai from 'chai';
 import Immutable from 'immutable';
 import {
     $get,
@@ -10,8 +9,6 @@ import {
     $delete
 } from './ImmutableOperations.js';
 
-const {expect} = chai;
-
 describe('"shared.utilities.immutableOperations" ', () => {
     describe('$get helper', () => {
         it('should return the given value of the passed key in a immutable map.', () => {

diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,56 @@
+const webpackConfig = require('./webpack.config.js');
+const filePattern = 'Resources/Private/JavaScript/**/*.spec.js';
+
+//
+// Delay the coverage until all tests are run.
+//
+webpackConfig.devtool = 'inline-source-map';
+webpackConfig.module.postLoaders = [{
+    test: /\.js$/,
+    exclude: /(test|node_modules|bower_components)\//,
+    loader: 'istanbul-instrumenter'
+}];
+
+//
+// Workaround for sinon since it requires itself, and webpack can't find the circular dependencies.
+//
+// @see https://github.com/webpack/webpack/issues/177
+//
+webpackConfig.module.loaders.push({
+    test: /sinon\.js$/,
+    loader: 'imports?define=>false,require=>false'
+});
+
+module.exports = function (config) {
+    config.set({
+        browsers: ['Chrome'],
+        singleRun: Boolean(process.env.CONTINUOUS_INTEGRATION),
+        frameworks: ['mocha', 'sinon-chai'],
+        files: [filePattern],
+        plugins: [
+            'karma-chrome-launcher',
+            'karma-chai',
+            'karma-sinon-chai',
+            'karma-mocha',
+            'karma-sourcemap-loader',
+            'karma-webpack',
+            'karma-coverage',
+            'karma-mocha-reporter'
+        ],
+        preprocessors: {
+            [filePattern]: [
+                'webpack',
+                'sourcemap'
+            ]
+        },
+        reporters: ['mocha', 'coverage'],
+        webpack: webpackConfig,
+        webpackServer: {
+            noInfo: true
+        },
+        coverageReporter: {
+            type: 'html',
+            dir: 'Coverage/'
+        }
+    });
+};
diff --git a/mocha.runTests.js b/mocha.runTests.js
diff --git a/package.json b/package.json
@@ -21,10 +21,18 @@
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-react": "^3.15.0",
     "extract-text-webpack-plugin": "^1.0.1",
-    "glob": "^6.0.4",
     "imports-loader": "^0.6.5",
-    "jsdom": "^7.2.2",
-    "mocha": "^2.3.4",
+    "istanbul-instrumenter-loader": "^0.1.3",
+    "karma": "^0.13.19",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-coverage": "^0.5.3",
+    "karma-mocha": "^0.2.1",
+    "karma-mocha-reporter": "^1.1.5",
+    "karma-sinon-chai": "^1.1.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.4.5",
     "postcss-hexrgba": "^0.2.0",
     "postcss-import": "^7.1.3",
     "postcss-loader": "^0.8.0",
@@ -66,12 +74,11 @@
   },
   "scripts": {
     "postinstall": "npm run build",
-    "build": "webpack --config webpack.build.config.js",
-    "watch": "webpack --config webpack.build.config.js --progress --colors --watch",
-    "premocha": "webpack --config webpack.testing.config.js --target node",
-    "mocha": "mocha mocha.runTests.js",
+    "build": "webpack",
+    "watch": "webpack --progress --colors --watch",
+    "karma": "karma start",
     "lint": "eslint Resources/Private/JavaScript/**",
-    "test": "npm run lint && npm run mocha"
+    "test": "npm run lint && npm run karma"
   },
   "contributors": [
     {

diff --git a/webpack.build.config.js b/webpack.build.config.js
diff --git a/webpack.shared.config.js → webpack.config.js b/webpack.shared.config.js → webpack.config.js
@@ -58,5 +58,16 @@ module.exports = {
     plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),
         new ExtractTextPlugin('./Styles/[name].css', {allChunks: true})
-    ]
+    ],
+
+    entry: {
+        Host: './Resources/Private/JavaScript/Host/index.js',
+        Guest: './Resources/Private/JavaScript/Guest/index.js',
+        Login: './Resources/Private/JavaScript/Login/index.js'
+    },
+
+    output: {
+        filename: 'JavaScript/[name].js',
+        path: path.resolve('./Resources/Public/')
+    }
 };