Added back karma for unit testing, adjusted webpack config accordingly

Author: weblogixx

.eslintrc

@@ -13,6 +13,14 @@
     "strict": 0,
     "no-unused-expressions": 0,
     "no-underscore-dangle": [ "error", { "allowAfterThis": true }],
-    "import/no-unresolved": [ "error", "ignore": [ 'config' ] ]
+    "import/no-unresolved": [ "error", "ignore": [
+      'config',
+      'components/',
+      'stores/',
+      'actions/',
+      'sources/',
+      'styles/',
+      'images/'
+    ]]
   }
 }

README.md

@@ -1,4 +1,4 @@
-# Generator-React-Webpack 2.0 (alpha)
+# React Webpack Template 2.0 (alpha)
 > A flexible, easy to use boilerplate to quickly get started with Webpack, Babel and React.
 
 [![Build Status](https://travis-ci.org/weblogixx/react-webpack-template.svg)](https://travis-ci.org/weblogixx/react-webpack-template) ![Amount of Downloads per month](https://img.shields.io/npm/dm/react-webpack-template.svg "Amount of Downloads") ![Dependency Tracker](https://img.shields.io/david/weblogixx/react-webpack-template.svg "Dependency Tracker") ![Dependency Tracker](https://img.shields.io/david/dev/weblogixx/react-webpack-template.svg "Dependency Tracker")
@@ -9,11 +9,12 @@ You may use this template either directly (by cloning this git repository) or by
 ## Features
 The following features are currently included out of the box:
 
-- [x] Webpack 2 setup to get you started (including support for LESS/SASS/SCSS/Stylus and PostCSS)
+- [x] Webpack 2 setup to get you started (including basic support for LESS/SASS/SCSS/Stylus and PostCSS)
+- [ ] CSS Modules support
 - [x] Babel 6 to transpile ES2015 and JSX
-- [x] React 15.0
-- [x] Mocha, Chai and Enzyme for easy unit testing (without karma)
-- [x] Istanbul and Isparta for collecting coverage information
+- [x] Latest stable React Version (v15.0)
+- [x] Karma, Mocha, Chai and Enzyme for easier unit testing
+- [x] Isparta to collect coverage information
 - [x] Preconfigured .editorconfig file
 - [x] Preconfigured eslint configuration, based on airbnb
 
@@ -23,13 +24,13 @@ The following features are currently included out of the box:
 FOLLOWS
 
 - I want to use less/sass/whatever, but get an error when requiring the file:
-We currently do not ship the needed modules. This is done on purpose, as we dont want you to install too much dependencies. If you do not use a css precompiler, chance is you wont even notice it. If you need one, just install the required webpack loader (e.g. for less via ```npm install --save-dev less-loader```).
+We currently do not ship the needed webpack modules. This is done on purpose, as we dont want you to install too much dependencies without using them. If you do not use a css precompiler, chance is you wont even notice it. If you need one, just install the required webpack loader (e.g. for less via ```npm install --save-dev less-loader```).
 
 - I want to change/add/remove one of the given configs for webpack:
 The webpack configuration is located in ```conf/webpack```. All changes in Base.js will get delegated to all webpack configurations, so you will just have to update this file for adding loaders etc. You may add your own configurations at any time. Just make sure to extend ```WebpackBaseConfig``` to make it work. When ready, just update ```conf/webpack/index.js``` with your wanted options to make them work.
 
-- Where do I find configuration options for *insert tool of choise here*:
-Every configuration options are located either directly in the project root (as for .babelrc, base webpack...) or as a folder in the conf directory.
+- Where do I find configuration options for *insert tool of choice here*:
+Configuration options are located either directly in the project root (as for .babelrc, webpack.config.js, karma.conf.js...) or as a folder in the conf/ directory.
 
 ## Using it
 The template uses webpack as build tool to serve files and run tests. The following commands are available:

conf/mocha/chai.js

@@ -46,19 +46,31 @@ class WebpackBaseConfig {
     return path.resolve('./src');
   }
 
+  /**
+   * Get the absolute path to tests directory
+   * @return {String}
+   */
+  get testPathAbsolute() {
+    return path.resolve('./test');
+  }
+
   /**
    * Get the default settings
    * @return {Object}
    */
   get defaultSettings() {
     return {
+      cache: true,
       context: this.srcPathAbsolute,
       debug: false,
       devtool: 'eval',
       devServer: {
         contentBase: './src/',
         publicPath: '/assets/',
-        historyApiFallback: true
+        historyApiFallback: true,
+        hot: true,
+        inline: true,
+        port: 8080
       },
       entry: './index.js',
       module: {
@@ -99,7 +111,7 @@ class WebpackBaseConfig {
             include: [
               this.srcPathAbsolute
             ],
-            loaders: ['babel']
+            loaders: ['react-hot', 'babel']
           }
         ]
       },

conf/mocha/fakedom.js

@@ -3,6 +3,7 @@
  */
 'use strict';
 
+const webpack = require('webpack');
 const WebpackBaseConfig = require('./Base');
 
 class WebpackDevConfig extends WebpackBaseConfig {
@@ -11,6 +12,15 @@ class WebpackDevConfig extends WebpackBaseConfig {
     super();
     this.config = {
       devtool: 'cheap-module-source-map',
+      entry: [
+        'webpack-dev-server/client?http://0.0.0.0:8080/',
+        'webpack/hot/only-dev-server',
+        './index.js'
+      ],
+      plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoErrorsPlugin()
+      ]
     };
   }
 }

conf/mocha/webpackexclude.js

@@ -18,7 +18,8 @@ class WebpackDistConfig extends WebpackBaseConfig {
           'process.env.NODE_ENV': '"production"'
         }),
         new webpack.optimize.DedupePlugin(),
-        new webpack.optimize.AggressiveMergingPlugin()
+        new webpack.optimize.AggressiveMergingPlugin(),
+        new webpack.NoErrorsPlugin()
       ]
     };
   }

conf/webpack/Base.js

@@ -10,25 +10,45 @@ class WebpackTestConfig extends WebpackBaseConfig {
   constructor() {
     super();
     this.config = {
+      devtool: 'inline-source-map',
       externals: {
         cheerio: 'window',
         'react/lib/ExecutionEnvironment': true,
+        'react/addons': true,
         'react/lib/ReactContext': true,
       },
-      module: [
-        {
-          test: /\.(css|less|sass|scss|png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
-          loader: 'null'
-        },
-        {
-          test: /\.(js|jsx)$/,
-          exclude: /(node_modules|bower_components)/,
-          loader: 'babel',
-          query: {
-            presets: ['react', 'es2015', 'stage-0'],
+      module: {
+        preLoaders: [
+          {
+            test: /\.(js|jsx)$/,
+            loader: 'isparta-instrumenter-loader',
+            include: [
+              this.srcPathAbsolute
+            ]
           }
-        }
-      ],
+        ],
+        loaders: [
+          {
+            test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl|mp4|ogg|svg)$/,
+            loader: 'null-loader'
+          },
+          {
+            test: /\.json$/,
+            loader: 'json'
+          },
+          {
+            test: /\.(js|jsx)$/,
+            loader: 'babel-loader',
+            query: {
+              presets: ['airbnb']
+            },
+            include: [
+              this.srcPathAbsolute,
+              this.testPathAbsolute
+            ]
+          }
+        ]
+      },
       plugins: [
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': '"test"'
@@ -37,6 +57,29 @@ class WebpackTestConfig extends WebpackBaseConfig {
     };
   }
 
+  /**
+   * Set the config data.
+   * Will remove the devServer config value as we do not need it in test environments
+   * This function will always return a new config
+   * @param {Object} data Keys to assign
+   * @return {Object}
+   */
+  set config(data) {
+
+    const baseSettings = this.defaultSettings;
+    delete baseSettings.devServer;
+    this._config = Object.assign({}, baseSettings, data);
+    return this._config;
+  }
+
+  /**
+   * Get the global config
+   * @param {Object} config Final webpack config
+   */
+  get config() {
+    return super.config;
+  }
+
   /**
    * Get the environment name
    * @return {String} The current environment

conf/webpack/Dev.js

@@ -0,0 +1,63 @@
+'use strict';
+const webpackCfg = require('./webpack.config')('test');
+
+module.exports = function karmaConfig(config) {
+
+  config.set({
+    browsers: ['PhantomJS'],
+    files: [
+      'test/loadtests.js'
+    ],
+    port: 8080,
+    captureTimeout: 60000,
+    frameworks: [
+      'mocha',
+      'chai',
+      'sinon'
+    ],
+    client: {
+      mocha: {}
+    },
+    singleRun: true,
+    reporters: ['mocha', 'coverage', 'junit'],
+    mochaReporter: {
+      output: 'autowatch'
+    },
+    preprocessors: {
+      'test/loadtests.js': ['webpack', 'sourcemap']
+    },
+    webpack: webpackCfg,
+    webpackServer: {
+      noInfo: true
+    },
+    junitReporter: {
+      outputDir: 'coverage',
+      outputFile: 'junit-result.xml',
+      useBrowserName: false
+    },
+    coverageReporter: {
+      dir: 'coverage/',
+      watermarks: {
+        statements: [70, 80],
+        functions: [70, 80],
+        branches: [70, 80],
+        lines: [70, 80]
+      },
+      reporters: [
+        { type: 'text' },
+        {
+          type: 'html',
+          subdir: 'html'
+        },
+        {
+          type: 'cobertura',
+          subdir: 'cobertura'
+        },
+        {
+          type: 'lcovonly',
+          subdir: 'lcov'
+        }
+      ]
+    }
+  });
+};