Added ability to unit test features.

README.md

@@ -7,7 +7,7 @@ The following features are planned to be included in the final version:
 
 - [x] Webpack and Webpack-Dev-Server, including hot-loader
 - [x] Babel and JSX
-- [ ] Mocha Unit tests (*optional*)
+- [x] Mocha Unit tests (*optional*)
 - [ ] React.Router
 - [x] EsLint Support
 - [x] No dependency on grunt, gulp or the next hot taskrunner!
@@ -31,6 +31,9 @@ npm run dist
 
 # Run unit tests
 npm test
+
+# Lint all files in src (also automatically done AFTER tests are run)
+npm run lint
 ```
 
 You can also use your globally installed version of webpack like this:

karma.conf.js

@@ -0,0 +1,56 @@
+var path = require('path');
+var srcPath = __dirname + '/src/';
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    browsers: ['PhantomJS'],
+    files: [
+      'test/loadtests.js'
+    ],
+    port: 8080,
+    captureTimeout: 60000,
+    frameworks: ['phantomjs-shim', 'mocha', 'chai'],
+    client: {
+      mocha: {
+
+      }
+    },
+    singleRun: true,
+    reporters: ['mocha'],
+    preprocessors: {
+      'test/loadtests.js': ['webpack', 'sourcemap']
+    },
+    webpack: {
+      cache: true,
+      devtool: 'inline-source-map',
+      module: {
+        loaders: [
+          {
+            test: /\.(css|png|jpg|gif|woff|woff2)$/,
+            loader: 'null-loader'
+          },
+          {
+            test: /\.(js|jsx)$/,
+            loader: 'babel-loader',
+            exclude: /node_modules/
+          }
+        ]
+      },
+      resolve: {
+        extensions: ['', '.js', '.jsx'],
+        alias: {
+          actions: srcPath + '/actions/',
+          helpers: path.join(__dirname, 'test', 'helpers'),
+          components: srcPath + '/components/',
+          sources: srcPath + '/sources/',
+          stores: srcPath + '/stores/',
+          styles: srcPath + '/styles/'
+        }
+      }
+    },
+    webpackServer: {
+      noInfo: true
+    }
+  });
+};

package.json

@@ -6,10 +6,12 @@
   "private": true,
   "scripts": {
     "start": "node server.js --env=dev",
+    "test": "karma start",
+    "posttest": "npm run lint",
     "serve": "node server.js --env=dev",
     "servedist": "node server.js --env=dist",
     "dist": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint ./src"
   },
   "repository": {
     "type": "git",
@@ -29,13 +31,25 @@
   "devDependencies": {
     "babel-core": "^5.8.22",
     "babel-loader": "^5.3.2",
+    "chai": "^3.2.0",
     "css-loader": "^0.16.0",
     "eslint": "^1.2.1",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^3.3.0",
     "file-loader": "^0.8.4",
+    "karma": "^0.13.9",
+    "karma-chai": "^0.1.0",
+    "karma-mocha": "^0.2.0",
+    "karma-mocha-reporter": "^1.1.1",
+    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-phantomjs-shim": "^1.1.1",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.7.0",
     "minimist": "^1.2.0",
+    "mocha": "^2.2.5",
+    "null-loader": "^0.1.1",
     "open": "0.0.5",
+    "phantomjs": "^1.9.18",
     "react-hot-loader": "^1.2.9",
     "style-loader": "^0.12.3",
     "url-loader": "^0.5.6",

src/components/Main.js

@@ -6,7 +6,7 @@ import React from 'react/addons';
 class AppComponent extends React.Component {
   render() {
     return (
-      <div>
+      <div className="index">
         Content
       </div>
     );

test/components/MainTest.js

@@ -0,0 +1,27 @@
+/*eslint-env node, mocha */
+/*global expect */
+/*eslint no-console: 0*/
+'use strict';
+
+// Uncomment the following lines to use the react test utilities
+// import React from 'react/addons';
+// const TestUtils = React.addons.TestUtils;
+import createComponent from 'helpers/shallowRenderHelper';
+
+import Main from 'components/Main';
+
+describe('MainComponent', () => {
+    let MainComponent;
+
+    beforeEach(() => {
+      MainComponent = createComponent(Main);
+    });
+
+    it('should have its component name as default className', () => {
+      expect(MainComponent._store.props.className).to.equal('index');
+    });
+
+    it('should do something!', () => {
+      expect(true).to.be.true;
+    });
+});

test/helpers/shallowRenderHelper.js

@@ -0,0 +1,23 @@
+/**
+ * Function to get the shallow output for a given component
+ * As we are using phantom.js, we also need to include the fn.proto.bind shim!
+ *
+ * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/
+ * @author somonsmith
+ */
+import React from 'react/addons';
+const TestUtils = React.addons.TestUtils;
+
+/**
+ * Get the shallow rendered component
+ *
+ * @param  {Object} component The component to return the output for
+ * @param  {Object} props [optional] The components properties
+ * @param  {Mixed} ...children [optional] List of children
+ * @return {Object} Shallow rendered output
+ */
+export default function createComponent(component, props = {}, ...children) {
+  const shallowRenderer = TestUtils.createRenderer();
+  shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
+  return shallowRenderer.getRenderOutput();
+}

test/loadtests.js

@@ -0,0 +1,2 @@
+var testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/);
+testsContext.keys().forEach(testsContext);