Merge pull request #123 from weblogixx/feat-unittest

Updated Unit-Tests

Author: newtriks

.gitignore

@@ -11,6 +11,6 @@ ehthumbs.db
 Desktop.ini
 $RECYCLE.BIN/
 node_modules/
-/test/*
 npm-debug.log
-.idea/
+.idea/
+/test/temp-test

README.md

@@ -78,27 +78,34 @@ var Foo = React.createClass({
 module.exports = Foo;
 ```
 
-And `test/spec/components/Foo.js` (*javascript - jasmine*):
+And `test/spec/components/Foo.js` (*javascript - jasmine, as seen on http://simonsmith.io/unit-testing-react-components-without-a-dom/*):
 ```js
 'use strict';
 
-describe('Foo', function () {
-  var Foo, component;
+// Uncomment the following lines to use the react test utilities
+// import React from 'react/addons';
+// const TestUtils = React.addons.TestUtils;
 
-  beforeEach(function () {
-    Foo = require('../../../src/components/Foo');
-    component = Foo();
-  });
+import createComponent from 'helpers/createComponent';
+import Foo from 'components/Foo.js';
 
-  it('should create a new instance of Foo', function () {
-    expect(component).toBeDefined();
-  });
+describe('Foo', () => {
+
+    let FooComponent;
+
+    beforeEach(() => {
+        FooComponent = createComponent(Foo);
+    });
+
+    it('should have its component name as default className', () => {
+        expect(FooComponent._store.props.className).toBe('Foo');
+    });
 });
 ```
 
 And `src/styles/Foo.css` (or .sass, .less etc...) :
 ```css
-.Foo{
+.Foo {
   border: 1px dashed #f00;
 }
 ```
@@ -117,7 +124,9 @@ This will give you all of react component's most common stuff :
 
  var Foofoo = React.createClass({
    mixins: [],
-   getInitialState: function() { return({}) },
+   getInitialState: function() {
+     return {};
+   },
    getDefaultProps: function() {},
    componentWillMount: function() {},
    componentDidMount: function() {},
@@ -139,9 +148,6 @@ This will give you all of react component's most common stuff :
 
 Just remove those you don't need, then fill and space out the rest.
 
-
-
-
 ### Action
 
 When using Flux or Reflux architecture, it generates an actionCreator in `src/actions` and it's corresponding test in `src/spec/actions`.
@@ -180,14 +186,14 @@ and same test for both architectures:
 ```js
 'use strict';
 
-describe('BarActionCreators', function() {
-  var action;
+describe('BarActionCreators', () => {
+  let action;
 
   beforeEach(function() {
     action = require('actions/BarActionCreators.js');
   });
 
-  it('should be defined', function() {
+  it('should be defined', () => {
     expect(action).toBeDefined();
   });
 });
@@ -246,14 +252,14 @@ and same test for both architectures:
 ```js
 'use strict';
 
-describe('BazStore', function() {
-  var store;
+describe('BazStore', () => {
+  let store;
 
-  beforeEach(function() {
+  beforeEach(() => {
     store = require('stores/BazStore.js');
   });
 
-  it('should be defined', function() {
+  it('should be defined', () => {
     expect(store).toBeDefined();
   });
 });
@@ -364,15 +370,19 @@ Out the box the [Gruntfile](http://gruntjs.com/api/grunt.file) is configured wit
 1. **webpack**: uses the [grunt-webpack](https://github.com/webpack/grunt-webpack) plugin to load all required modules and output to a single JS file `src/main.js`. This is included in the `src/index.html` file by default and will reload in the browser as and when it is recompiled.
 2. **webpack-dev-server**: uses the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to watch for file changes and also serve the webpack app in development.
 3. **connect**: uses the [grunt-connect](https://github.com/gruntjs/grunt-contrib-connect) plugin to start a webserver at [localhost](http://localhost:8000).
-4. **karma**: uses the [grunt-karma](https://github.com/karma-runner/grunt-karma) plugin to load the Karma configuration file `karma.conf.js` located in the project root. This will run all tests using [PhantomJS](http://phantomjs.org/) by default but supports many other browsers.
+4. **karma**: uses the [grunt-karma](https://github.com/karma-runner/grunt-karma) plugin to load the Karma configuration file `karma.conf.js` located in the project root. This will run all tests using [PhantomJS](http://phantomjs.org/) by default but supports many other browsers. Please note that karma-launchers other than PhantomJS must be installed separately and configured in `karma.conf.js`.
 
 ### CSS
 
 Included in the project is the [normalize.css](http://necolas.github.io/normalize.css/) script. There is also a `src/styles/main.css` script that's required by the core `src/components/App.js` component using Webpack.
 
-### JSHint
+### Linting
+
+Webpack is automatically configured to run esLint (http://eslint.org) on every file change or build. The configuration can be found in `PROJECTROOT/.eslintrc`. There are plugins for different editors that use this tool directly:
+- linter-eslint for Atom
+- Sublime-Linter-eslint for Sublime
 
-Please use [JSXHint](https://github.com/STRML/JSXHint) for linting JSX and the corresponding Sublime package if using SLT3 [SublimeLinter-jsxhint](https://github.com/SublimeLinter/SublimeLinter-jsxhint). Note this is a global npm install and JSX files will need to be associated with the JSX file type withing SLT3.
+You could also use jsxhint, the corresponding rules file is located in `PROJECTROOT/.jshintrc`. However, the support for jsxhint is planned to be dropped in a later release and only available for backwards compatibility.
 
 ## Props
 

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();
+}

templates/common/root/test/helpers/phantomjs-shims.js renamed to templates/common/root/test/helpers/pack/phantomjs-shims.js

@@ -12,7 +12,7 @@ var imageURL = require('../images/yeoman.png');
 var <%= scriptAppName %> = React.createClass({
   render: function() {
     return (
-      <div className='main'>
+      <div className="main">
         <ReactTransitionGroup transitionName="fade">
           <img src={imageURL} />
         </ReactTransitionGroup>

templates/javascript/App.js

@@ -13,7 +13,9 @@ if (stylesLanguage === 'stylus') { %>require('styles/<%= classedFileName %>.styl
 
 var <%= classedName %> = React.createClass({<% if(rich){%>
   mixins: [<% if(architecture === 'reflux'){%>Reflux.ListenerMixin<%}%>],
-  getInitialState: function() { return({}) },
+  getInitialState: function() {
+    return {};
+  },
   getDefaultProps: function() {},
   componentWillMount: function() {},
   componentDidMount: function() {},
@@ -32,4 +34,3 @@ var <%= classedName %> = React.createClass({<% if(rich){%>
 
 <% if (es6) { %>export default <%= classedName %>;<% }
 else { %>module.exports = <%= classedName %>;<% } %>
-