Merge branch 'feature/karma'

.travis.yml

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

README.md

@@ -6,8 +6,8 @@ A boilerplate for building React apps with ES6 and webpack.
 
 * React 0.13
 * Compilation of ES6 & JSX to ES5
-* Jest testing framework
-* webpack bundling with react hot loader (as well as html, css & sass loaders)
+* webpack module loader with react hot loader (as well as html, css & sass loaders)
+* Karma, mocha, chai & sinon for testing
 * Basic flux architecture with app actions, stores and example web API usage
 * React router ([feature/react-router](https://github.com/badsyntax/react-seed/tree/feature/react-router))
 * Material UI ([feature/material-ui](https://github.com/badsyntax/react-seed/tree/feature/material-ui))
@@ -87,10 +87,6 @@ export default Menu;
 'use strict';
 
 import React from 'react/addons';
-
-jest.dontMock('../Menu.jsx');
-jest.dontMock('../../MenuItem/MenuItem.jsx');
-
 import Menu from '../Menu.jsx';
 
 let { TestUtils } = React.addons;
@@ -108,7 +104,7 @@ describe('Menu', () => {
   let menuElem = React.findDOMNode(menu);
 
   it('Renders the menu items', () => {
-    expect(menuElem.querySelectorAll('li').length).toEqual(2);
+    expect(menuElem.querySelectorAll('li').length).to.equal(2);
   });
 });
 ```
@@ -123,7 +119,7 @@ import 'normalize.css/normalize.css';
 import './scss/app.scss';
 ```
 
-* Sass include paths can be adjusted in the `webpack.config.js` file.
+* Sass include paths can be adjusted in the `webpack/loaders.js` file.
 * All CSS (compiled or otherwise) is run through Autoprefixer.
 * CSS files are combined in the order in which they are imported in JavaScript, thus
 you should always import your CSS/Sass before importing any other JavaScript files.
@@ -139,7 +135,7 @@ All required `.html` files are compiled with lodash.template and synced into the
 import './index.html';
 ```
 
-* You can adjust the lodash template data in the `webpack.config.js` file.
+* You can adjust the lodash template data in the `webpack/loaders.js` file.
 
 ## Conventions
 

app/app.tests.js

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

app/components/Footer/__tests__/Footer-test.js → app/components/Footer/__tests__/Footer-test.jsx

@@ -1,10 +1,8 @@
 'use strict';
 
 import React from 'react/addons';
-
-jest.dontMock('../Footer.jsx');
-
 import Footer from '../Footer.jsx';
+import { expect } from 'chai';
 
 let { TestUtils } = React.addons;
 
@@ -14,6 +12,6 @@ describe('Footer', () => {
       <Footer />
     );
     let footerElem = React.findDOMNode(footer);
-    expect(footerElem.className).toEqual('footer');
+    expect(footerElem.className).to.equal('footer');
   });
 });

app/stores/__tests__/BaseStore-test.js

@@ -1,10 +1,8 @@
 'use strict';
 
-jest.dontMock('babel-core/polyfill');
-jest.dontMock('../BaseStore.js');
-
 import 'babel-core/polyfill';
 import BaseStore from '../BaseStore.js';
+import { expect } from 'chai';
 
 const ITEMS_UPDATED = 'ITEMS_UPDATED';
 
@@ -25,31 +23,32 @@ describe('BaseStore', () => {
   it('Should set, get and remove data', function() {
 
     let store = new TestStore();
-    expect(store.getAll()).toEqual([]);
+
+    expect(store.getAll()).to.eql([]);
 
     let item = {
       foo: 'bar'
     };
 
     store.setAll([item]);
-    expect(store.getAll()).toEqual([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()).toEqual([item, item2]);
+    expect(store.getAll()).to.eql([item, item2]);
 
     store.remove(item);
-    expect(store.getAll()).toEqual([item2]);
+    expect(store.getAll()).to.eql([item2]);
   });
 
   it('Should call the change listener when data changes', () => {
 
     let store = new TestStore();
-    let onChange = jest.genMockFunction();
+    let onChange = sinon.spy();
     store.addChangeListener(onChange);
 
     store.setAll([{
@@ -61,13 +60,13 @@ describe('BaseStore', () => {
     store.remove({
       foo: 'bar'
     });
-    expect(onChange.mock.calls.length).toEqual(3);
+    expect(onChange.callCount).to.equal(3);
   });
 
   it('Should remove the change listener', () => {
 
     let store = new TestStore();
-    let onChange = jest.genMockFunction();
+    let onChange = sinon.spy();
     store.addChangeListener(onChange);
     store.setAll([{
       foo: 'bar'
@@ -76,6 +75,6 @@ describe('BaseStore', () => {
     store.setAll([{
       foo: 'bar'
     }]);
-    expect(onChange.mock.calls.length).toEqual(1);
+    expect(onChange.callCount).to.equal(1);
   });
 });

dev-server.js

@@ -1,13 +1,16 @@
 var util = require('util');
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
-var config = require('./webpack.config');
 var opn = require('opn');
 var pkg = require('./package.json');
 
 var port = pkg.config.devPort;
 var host = pkg.config.devHost;
 
+var configPath = process.argv[2] || './webpack/config';
+console.log('CONFIGPATH', configPath);
+var config = require(configPath);
+
 var server = new WebpackDevServer(
   webpack(config),
   config.devServer

karma.conf.js

@@ -0,0 +1,24 @@
+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: require('./webpack/config.test'),
+    webpackMiddleware: {
+      noInfo: true
+    }
+  });
+};

package.json

@@ -5,74 +5,72 @@
   "repository": "https://github.com/badsyntax/react-seed",
   "config": {
     "buildDir": "./build",
-    "devPort": 8000,
-    "devHost": "localhost"
+    "buildDirTests": "./build_tests",
+    "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 ./webpack && echo No linting errors.",
+    "prebuild": "npm run clean",
     "prestart": "npm install",
     "pretest": "npm install && npm run lint",
-    "prewebpack": "npm run clean",
-    "clean": "rimraf $npm_package_config_buildDir && mkdir $npm_package_config_buildDir",
-    "start": "NODE_ENV=development node dev-server",
-    "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": "jest"
+    "pretest-travis": "npm install && npm run lint",
+    "start": "NODE_ENV=development node dev-server ./webpack/config",
+    "test": "NODE_ENV=test karma start",
+    "test-travis": "NODE_ENV=test karma start --single-run",
+    "webpack": "webpack --colors --progress --config ./webpack/config"
   },
   "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-loader": "^5.0.0",
-    "babel-runtime": "^5.1.11",
-    "css-loader": "^0.10.1",
-    "eslint": "^0.19.0",
-    "eslint-plugin-react": "^2.1.1",
-    "extract-text-webpack-plugin": "^0.5.0",
+    "babel-runtime": "^5.3.3",
+    "chai": "^2.3.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",
-    "html-loader": "^0.2.3",
-    "jest-cli": "^0.4.0",
+    "glob": "^5.0.6",
+    "html-loader": "^0.3.0",
     "json-loader": "^0.5.1",
-    "lodash": "^3.7.0",
-    "opn": "^1.0.1",
-    "postcss-loader": "^0.4.0",
-    "react-hot-loader": "^1.2.5",
-    "rimraf": "^2.3.2",
+    "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-source-map-support": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.4",
+    "karma-webpack": "^1.5.1",
+    "lodash": "^3.8.0",
+    "mocha": "^2.2.4",
+    "mocha-loader": "^0.7.1",
+    "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",
-    "style-loader": "^0.10.2",
+    "source-map-support": "^0.2.10",
+    "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": {
     "node": ">=0.10.0"
   },
-  "jest": {
-    "scriptPreprocessor": "./jest-preprocessor.js",
-    "testPathDirs": [
-      "./app"
-    ],
-    "testFileExtensions": [
-      "js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "jsx"
-    ],
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/react"
-    ]
-  },
   "eslintConfig": {
     "env": {
       "browser": true,
@@ -84,10 +82,9 @@
       "jsx": true
     },
     "globals": {
-      "jest": true,
       "describe": true,
       "it": true,
-      "expect": true
+      "sinon": true
     },
     "plugins": [
       "react"