Karma, mocha & sinon with working sourcemaps! Refs badsyntax#8

.travis.yml

@@ -2,4 +2,4 @@ language: node_js
 node_js:
   - "0.10"
 script:
-  - npm test
+  - npm run test-travis

app/app.tests.js

@@ -0,0 +1,6 @@
+'use strict';
+
+import 'babel-core/polyfill';
+
+let context = require.context('.', true, /-test\.js$/);
+context.keys().forEach(context);

app/stores/__tests__/BaseStore-test.js

@@ -23,57 +23,58 @@ describe('BaseStore', () => {
   it('Should set, get and remove data', function() {
 
     let store = new TestStore();
-    expect(store.getAll()).to.equal([]);
+
+    expect(store.getAll()).to.eql([]);
 
     let item = {
       foo: 'bar'
     };
 
     store.setAll([item]);
-    expect(store.getAll()).to.equal([item]);
+    expect(store.getAll()).to.eql([item]);
 
     let item2 = {
       foobaz: 'bar'
     };
 
     store.set(item2);
     store.set(item2); // intentional check for unique items
-    expect(store.getAll()).to.equal([item, item2]);
+    expect(store.getAll()).to.eql([item, item2]);
 
     store.remove(item);
-    expect(store.getAll()).to.equal([item2]);
+    expect(store.getAll()).to.eql([item2]);
   });
 
   it('Should call the change listener when data changes', () => {
 
-    // let store = new TestStore();
-    // let onChange = jest.genMockFunction();
-    // store.addChangeListener(onChange);
-
-    // store.setAll([{
-    //   foo: 'bar'
-    // }]);
-    // store.set([{
-    //   foobaz: 'bar'
-    // }]);
-    // store.remove({
-    //   foo: 'bar'
-    // });
-    // expect(onChange.mock.calls.length).to.equal(3);
+    let store = new TestStore();
+    let onChange = sinon.spy();
+    store.addChangeListener(onChange);
+
+    store.setAll([{
+      foo: 'bar'
+    }]);
+    store.set([{
+      foobaz: 'bar'
+    }]);
+    store.remove({
+      foo: 'bar'
+    });
+    expect(onChange.callCount).to.equal(3);
   });
 
   it('Should remove the change listener', () => {
 
-    // let store = new TestStore();
-    // let onChange = jest.genMockFunction();
-    // store.addChangeListener(onChange);
-    // store.setAll([{
-    //   foo: 'bar'
-    // }]);
-    // store.removeChangeListener(onChange);
-    // store.setAll([{
-    //   foo: 'bar'
-    // }]);
-    // expect(onChange.mock.calls.length).to.equal(1);
+    let store = new TestStore();
+    let onChange = sinon.spy();
+    store.addChangeListener(onChange);
+    store.setAll([{
+      foo: 'bar'
+    }]);
+    store.removeChangeListener(onChange);
+    store.setAll([{
+      foo: 'bar'
+    }]);
+    expect(onChange.callCount).to.equal(1);
   });
 });

karma.conf.js

@@ -0,0 +1,27 @@
+var webpackConfig = require('./webpack.config.test.js');
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['source-map-support', 'mocha', 'sinon'],
+    files: [
+      'app/app.tests.js'
+    ],
+    exclude: [],
+    preprocessors: {
+      'app/app.tests.js': ['webpack', 'sourcemap'],
+    },
+    reporters: ['mocha'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: [/*'Chrome', */'PhantomJS'],
+    singleRun: false,
+    webpack: webpackConfig,
+    webpackMiddleware: {},
+    webpackServer: {
+      noInfo: true
+    }
+  });
+};

package.json

@@ -6,57 +6,67 @@
   "config": {
     "buildDir": "./build",
     "buildDirTests": "./build_tests",
-    "devPort": 8000,
-    "devHost": "localhost"
+    "devHost": "localhost",
+    "devPort": 8000
   },
   "scripts": {
+    "build": "NODE_ENV=production npm run webpack",
+    "clean": "rimraf $npm_package_config_buildDir && mkdir $npm_package_config_buildDir",
     "env": "env",
-    "prerelease": "npm test",
+    "lint": "eslint --ext .js --ext .jsx ./app && echo No linting errors.",
+    "prebuild": "npm run clean",
     "prestart": "npm install",
     "pretest": "npm install",
-    "prewebpack": "npm run clean",
-    "clean": "rimraf $npm_package_config_buildDir && mkdir $npm_package_config_buildDir",
+    "pretest-travis": "npm install",
     "start": "NODE_ENV=development node dev-server ./webpack.config.js",
-    "webpack": "webpack --colors --progress --config ./webpack.config.js",
-    "start-dev-server": "webpack-dev-server --output-pathinfo --inline",
-    "build": "NODE_ENV=production npm run webpack",
-    "lint": "eslint --ext .js --ext .jsx ./app && echo No linting errors.",
-    "test": "NODE_ENV=development node dev-server ./webpack.config.test.js"
+    "test": "karma start",
+    "test-travis": "karma start --single-run",
+    "webpack": "webpack --colors --progress --config ./webpack.config.js"
   },
   "dependencies": {
-    "classnames": "^1.2.0",
-    "flux": "^2.0.1",
+    "classnames": "^2.1.1",
+    "flux": "^2.0.3",
     "normalize.css": "^3.0.3",
-    "react": "^0.13.2"
+    "react": "^0.13.3"
   },
   "devDependencies": {
     "autoprefixer-core": "^5.1.11",
-    "babel-core": "^5.1.11",
-    "babel-jest": "^4.0.0",
+    "babel-core": "^5.3.3",
+    "babel-jest": "^5.2.0",
     "babel-loader": "^5.0.0",
-    "babel-runtime": "^5.1.11",
+    "babel-runtime": "^5.3.3",
     "chai": "^2.3.0",
-    "css-loader": "^0.10.1",
-    "eslint": "^0.19.0",
-    "eslint-plugin-react": "^2.1.1",
-    "extract-text-webpack-plugin": "^0.5.0",
+    "css-loader": "^0.12.1",
+    "eslint": "^0.21.0",
+    "eslint-plugin-react": "^2.3.0",
+    "extract-text-webpack-plugin": "^0.8.0",
     "file-loader": "^0.8.1",
-    "glob": "^5.0.5",
-    "html-loader": "^0.2.3",
-    "jest-cli": "^0.4.0",
+    "glob": "^5.0.6",
+    "html-loader": "^0.3.0",
+    "jest-cli": "^0.4.3",
     "json-loader": "^0.5.1",
-    "lodash": "^3.7.0",
+    "karma": "^0.12.31",
+    "karma-chrome-launcher": "^0.1.12",
+    "karma-cli": "0.0.4",
+    "karma-mocha": "^0.1.10",
+    "karma-mocha-reporter": "^1.0.2",
+    "karma-phantomjs-launcher": "^0.1.4",
+    "karma-sinon": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.4",
+    "karma-webpack": "^1.5.1",
+    "lodash": "^3.8.0",
     "mocha": "^2.2.4",
     "mocha-loader": "^0.7.1",
-    "opn": "^1.0.1",
-    "postcss-loader": "^0.4.0",
-    "react-hot-loader": "^1.2.5",
-    "rimraf": "^2.3.2",
+    "node-libs-browser": "^0.5.0",
+    "opn": "^1.0.2",
+    "postcss-loader": "^0.4.3",
+    "react-hot-loader": "^1.2.7",
+    "rimraf": "^2.3.3",
     "sass-loader": "^0.4.2",
     "source-map-support": "^0.2.10",
-    "style-loader": "^0.10.2",
+    "style-loader": "^0.12.2",
     "template-html-loader": "0.0.3",
-    "webpack": "^1.8.8",
+    "webpack": "^1.9.5",
     "webpack-dev-server": "^1.8.2"
   },
   "engines": {

webpack.config.test.js

@@ -7,64 +7,19 @@ var pkg = require('./package.json');
 
 var DEBUG = process.env.NODE_ENV !== 'production';
 
-var cssBundle = path.join('css', util.format('[name].%s.css', pkg.version));
-var jsBundle = path.join('js', util.format('[name].%s.js', pkg.version));
-
-var entry = {
-  app: ['./run-tests.jsx']
-};
-
-entry.app.push(
-  util.format(
-    'webpack-dev-server/client?http://%s:%d',
-    pkg.config.devHost,
-    pkg.config.devPort
-  )
-);
-entry.app.push('webpack/hot/only-dev-server');
-
 var config = {
-  context: path.join(__dirname, 'app'),
-  cache: DEBUG,
-  debug: DEBUG,
-  target: 'web',
-  devtool: DEBUG ? 'inline-source-map' : false,
-  entry: entry,
-  output: {
-    path: path.resolve(pkg.config.buildDir),
-    publicPath: '/',
-    filename: jsBundle,
-    pathinfo: false
-  },
+  devtool: 'inline-source-map',
   module: {
     loaders: getLoaders()
   },
   postcss: [
     autoprefixer
   ],
-  plugins: getPlugins(),
   resolve: {
     extensions: ['', '.js', '.json', '.jsx']
-  },
-  devServer: {
-    contentBase: path.resolve(pkg.config.buildDir),
-    hot: true,
-    noInfo: false,
-    inline: true,
-    stats: { colors: true }
   }
 };
 
-function getPlugins() {
-  var plugins = [
-    new webpack.optimize.OccurenceOrderPlugin()
-  ];
-  plugins.push(
-    new webpack.HotModuleReplacementPlugin()
-  );
-  return plugins;
-}
-
 function getLoaders() {
 
   var jsxLoader;
@@ -89,19 +44,19 @@ function getLoaders() {
     'includePaths[]=' + path.resolve(__dirname, './node_modules')
   ];
 
-    jsxLoader = ['react-hot', 'babel-loader?optional=runtime'];
-    sassParams.push('sourceMap', 'sourceMapContents=true')
-    sassLoader = [
-      'style-loader',
-      'css-loader?sourceMap',
-      'postcss-loader',
-      'sass-loader?' + sassParams.join('&')
-    ].join('!');
-    cssLoader = [
-      'style-loader',
-      'css-loader?sourceMap',
-      'postcss-loader'
-    ].join('!');
+  jsxLoader = ['babel-loader?optional=runtime'];
+  sassParams.push('sourceMap', 'sourceMapContents=true')
+  sassLoader = [
+    'style-loader',
+    'css-loader?sourceMap',
+    'postcss-loader',
+    'sass-loader?' + sassParams.join('&')
+  ].join('!');
+  cssLoader = [
+    'style-loader',
+    'css-loader?sourceMap',
+    'postcss-loader'
+  ].join('!');
 
   return [
     {