*FEATURE*: Unittests: Added support for React ShallowRendering as described in http://simonsmith.io/unit-testing-react-components-without-a-dom/.

templates/common/_package.json

@@ -20,34 +20,33 @@
     "normalize.css": "~3.0.3"
   },
   "devDependencies": {
+    "babel": "^5.0.0",
+    "babel-loader": "^5.0.0",
     "grunt": "~0.4.5",
     "eslint": "^0.21.2",
     "eslint-loader": "^0.11.2",
     "eslint-plugin-react": "^2.4.0",
     "load-grunt-tasks": "~0.6.0",
     "grunt-contrib-connect": "~0.8.0",
-    "webpack": "~1.4.3",
     "grunt-webpack": "~1.0.8",
+    "jasmine-core": "^2.3.4",
+    "karma": "~0.12.21",
+    "karma-jasmine": "^0.3.5",
+    "karma-phantomjs-launcher": "~0.1.3",
+    "karma-script-launcher": "~0.1.0",
+    "karma-webpack": "^1.5.0",
     "style-loader": "~0.8.0",
     "url-loader": "~0.5.5",
     "css-loader": "~0.9.0",
-    "karma-script-launcher": "~0.1.0",
-    "karma-chrome-launcher": "~0.1.4",
-    "karma-firefox-launcher": "~0.1.3",
-    "karma-jasmine": "~0.1.5",
-    "karma-phantomjs-launcher": "~0.1.3",
-    "karma": "~0.12.21",
     "grunt-karma": "~0.8.3",
-    "karma-webpack": "~1.2.2",
-    "webpack-dev-server": "~1.6.5",
     "grunt-open": "~0.2.3",
     "grunt-contrib-copy": "~0.5.0",
-    "babel": "^4.0.0",
-    "babel-loader": "^4.0.0",
     "grunt-contrib-clean": "~0.6.0",<% if (stylesLanguage.match(/s[ac]ss/)) { %>
     "sass-loader": "^1.0.1",<% } %><% if (stylesLanguage === 'less') { %>
     "less-loader": "^2.0.0",<% } %><% if (stylesLanguage === 'stylus') { %>
     "stylus-loader": "^0.5.0",<% } %>
-    "react-hot-loader": "^1.0.7"
+    "react-hot-loader": "^1.0.7",
+    "webpack": "~1.10.0",
+    "webpack-dev-server": "~1.10.0"
   }
 }

templates/common/_webpack.config.js

@@ -16,7 +16,7 @@ module.exports = {
 
   cache: true,
   debug: true,
-  devtool: false,
+  devtool: 'sourcemap',
   entry: [
       'webpack/hot/only-dev-server',
       './src/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js'

templates/common/karma.conf.js

@@ -7,12 +7,14 @@ module.exports = function (config) {
     basePath: '',
     frameworks: ['jasmine'],
     files: [
-      'test/helpers/**/*.js',
+      'test/helpers/pack/**/*.js',
+      'test/helpers/react/**/*.js',
       'test/spec/components/**/*.js'<% if(architecture === 'flux'||architecture === 'reflux') { %>,
       'test/spec/stores/**/*.js',
       'test/spec/actions/**/*.js'<% } %>
     ],
     preprocessors: {
+      'test/helpers/createComponent.js': ['webpack'],
       'test/spec/components/**/*.js': ['webpack'],
       'test/spec/components/**/*.jsx': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
       'test/spec/stores/**/*.js': ['webpack'],
@@ -32,7 +34,8 @@ module.exports = function (config) {
           loader: 'url-loader?limit=10000&mimetype=image/png'
         }, {
           test: /\.(js|jsx)$/,
-          loader: 'babel-loader'
+          loader: 'babel-loader',
+          exclude: /node_modules/
         },<% if (stylesLanguage === 'sass') { %> {
           test: /\.sass/,
           loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
@@ -61,11 +64,13 @@ module.exports = function (config) {
           'styles': path.join(process.cwd(), './src/styles/'),
           'components': path.join(process.cwd(), './src/components/')<% if(architecture === 'flux'||architecture === 'reflux') { %>,
           'stores': '../../../src/stores/',
-          'actions': '../../../src/actions/'<% } %>
+          'actions': '../../../src/actions/'<% } %>,
+          'helpers': path.join(process.cwd(), './test/helpers/')
         }
       }
     },
-    webpackServer: {
+    webpackMiddleware: {
+      noInfo: true,
       stats: {
         colors: true
       }
@@ -75,17 +80,14 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     colors: true,
     autoWatch: false,
-    // Start these browsers, currently available:
-    // - Chrome
-    // - ChromeCanary
-    // - Firefox
-    // - Opera
-    // - Safari (only Mac)
-    // - PhantomJS
-    // - IE (only Windows)
     browsers: ['PhantomJS'],
-    reporters: ['progress'],
+    reporters: ['dots'],
     captureTimeout: 60000,
-    singleRun: true
+    singleRun: true,
+    plugins: [
+        require('karma-webpack'),
+        require('karma-jasmine'),
+        require('karma-phantomjs-launcher')
+    ]
   });
 };

templates/common/root/.eslintrc

@@ -3,7 +3,8 @@
     "react"
   ],
   "ecmaFeatures": {
-    "jsx": true
+    "jsx": true,
+    "modules": true
   },
   "env": {
     "browser": true,
@@ -14,6 +15,7 @@
     "quotes": [ 1, "single" ],
     "no-undef": false,
     "global-strict": false,
-    "no-extra-semi": 1
+    "no-extra-semi": 1,
+    "no-underscore-dangle": false
   }
 }

templates/common/root/test/helpers/createComponent.js

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+// Add missing methods to phantom.js
+import './pack/phantomjs-shims';
+
+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();
+}