chore(test): add tests for components + improve config (migrate to webpack2)

config/karma.conf.js

@@ -1,4 +1,4 @@
-var webpackConfig = require('./webpack.test');
+var webpack = require('./webpack.test');
 
 module.exports = function (config) {
     var _config = {
@@ -9,8 +9,9 @@ module.exports = function (config) {
         plugins: [
             require('karma-jasmine'),
             require('karma-webpack'),
+            require('karma-coverage'),
             require('karma-chrome-launcher'),
-            require('karma-remap-istanbul'),
+            require('karma-remap-coverage'),
             require('karma-sourcemap-loader'),
         ],
 
@@ -26,25 +27,36 @@ module.exports = function (config) {
         ],
 
         preprocessors: {
-            './config/karma-test-shim.js': ['webpack', 'sourcemap']
+            './config/karma-test-shim.js': config.hasCoverage ? ['coverage', 'webpack', 'sourcemap'] : ['webpack', 'sourcemap']
         },
 
-        webpack: webpackConfig,
+        webpack: webpack.getConfig(config.hasCoverage, config.autoWatch),
 
+        // Webpack please don't spam the console when running in karma!
         webpackMiddleware: {
-            stats: 'errors-only'
+            // webpack-dev-middleware configuration
+            // i.e.
+            noInfo: true,
+            // and use stats to turn off verbose output
+            stats: {
+                // options i.e. 
+                chunks: false
+            }
         },
 
-        webpackServer: {
-            noInfo: true
+        // save interim raw coverage report in memory 
+        coverageReporter: {
+            type: 'in-memory'
         },
-        remapIstanbulReporter: {
-            reports: {
-                html: 'coverage',
-                lcovonly: './coverage/coverage.lcov'
-            }
+
+        remapCoverageReporter: {
+            'text-summary': null,
+            lcovonly: './coverage/coverage.lcov',
+            html: './coverage/html'
         },
-        reporters: ['progress', 'karma-remap-istanbul'],
+
+
+        reporters: config.hasCoverage ? ['progress', 'coverage', 'remap-coverage'] : ['progress'],
         port: 9876,
         colors: true,
         logLevel: config.LOG_INFO,

config/webpack.test.js

@@ -1,54 +1,114 @@
-var helpers = require('./helpers');
+const helpers = require('./helpers');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const {CheckerPlugin} = require('awesome-typescript-loader');
 
-module.exports = {
-    devtool: 'inline-source-map',
+const getConfig = (hasCoverage, isTddMode) => {
 
-    resolve: {
-        extensions: ['', '.ts', '.js'],
-        root: helpers.root('src')
-    },
-
-    module: {
-        preLoaders: [
-            {
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [
-                    helpers.root('node_modules', 'rxjs'),
-                    helpers.root('node_modules', '@angular')
-                ]
-            }
-        ],
-        loaders: [
-            {
-                test: /\.ts$/,
-                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
-            },
-            {
-                test: /\.html$/,
-                loader: 'html'
-
-            },
+    let extraRules = [];
+    if (hasCoverage) {
+        extraRules.push(
             {
-                test: /\.css$/,
-                exclude: helpers.root('src'),
-                loader: 'null'
-            },
-            {
-                test: /\.css$/,
+                enforce: 'post',
+                test: /\.(js|ts)$/,
+                loader: 'istanbul-instrumenter-loader',
                 include: helpers.root('src'),
-                loader: 'raw'
-            }
-        ],
-        postLoaders: [
-            {
-                test: /\.(js|ts)$/, loader: 'sourcemap-istanbul-instrumenter-loader',
                 exclude: [
                     /\.(e2e|spec)\.ts$/,
                     /node_modules/
-                ],
-                query: { 'force-sourcemap': true }
+                ]
             }
-        ]
+        );
     }
+
+    let extraPlugins = [];
+    if (isTddMode) {
+        extraPlugins.push(new CheckerPlugin());//to speed up compilation during TDD
+    }
+
+    return {
+
+        devtool: 'inline-source-map',
+
+        resolve: {
+            extensions: ['.ts', '.js'],
+            modules: [helpers.root('src'), 'node_modules']
+
+        },
+
+        module: {
+
+            rules: [
+
+                {
+                    enforce: 'pre',
+                    test: /\.js$/,
+                    loader: 'source-map-loader',
+                    exclude: [
+                        // these packages have problems with their sourcemaps
+                        helpers.root('node_modules/rxjs'),
+                        helpers.root('node_modules/@angular')
+                    ]
+                },
+
+                {
+                    test: /\.ts$/,
+                    use: [
+                        {
+                            loader: 'awesome-typescript-loader',
+                            query: {
+                                // use inline sourcemaps for "karma-remap-coverage" reporter (if coverage is activated)
+                                sourceMap: !hasCoverage,
+                                inlineSourceMap: hasCoverage,
+                                compilerOptions: {
+
+                                    // Remove TypeScript helpers to be injected
+                                    // below by DefinePlugin
+                                    removeComments: true
+
+                                }
+                            },
+                        },
+                        'angular2-template-loader'
+                    ],
+                    exclude: [/\.e2e\.ts$/]
+                },
+
+
+                {
+                    test: /\.css$/,
+                    loader: ['to-string-loader', 'css-loader']
+                },
+
+                {
+                    test: /\.html$/,
+                    loader: 'raw-loader'
+                }
+            ].concat(extraRules)
+        },
+
+        plugins: [
+
+            new LoaderOptionsPlugin({
+                debug: false,
+                options: {
+                    // legacy options go here
+                }
+            })
+        ].concat(extraPlugins),
+
+        performance: {
+            hints: false
+        },
+
+        node: {
+            global: true,
+            process: false,
+            crypto: 'empty',
+            module: false,
+            clearImmediate: false,
+            setImmediate: false
+        }
+    };
 }
+
+module.exports.getConfig = getConfig;

gulpfile.js

@@ -58,7 +58,7 @@ function platformPath(path) {
     return /^win/.test(os.platform()) ? `${path}.cmd` : path;
 }
 
-function startKarmaServer(isTddMode, done) {
+function startKarmaServer(isTddMode, hasCoverage, done) {
     var karmaServer = require('karma').Server;
     var travis = process.env.TRAVIS;
 
@@ -68,6 +68,8 @@ function startKarmaServer(isTddMode, done) {
         config['browsers'] = ['Chrome_travis_ci']; // 'Chrome_travis_ci' is defined in "customLaunchers" section of config/karma.conf.js
     }
 
+    config['hasCoverage'] = hasCoverage;
+
     new karmaServer(config, done).start();
 }
 
@@ -155,7 +157,7 @@ gulp.task('compile-ts', ['clean:dist', 'lint', 'styles', 'ngc']);
 // Testing Tasks
 gulp.task('test', ['clean:coverage', 'compile-ts'], (cb) => {
     const ENV = process.env.NODE_ENV = process.env.ENV = 'test';
-    startKarmaServer(false, cb);
+    startKarmaServer(false, true, cb);
 });
 
 gulp.task('watch', () => {
@@ -165,7 +167,12 @@ gulp.task('watch', () => {
 
 gulp.task('test:watch', (cb) => {
     const ENV = process.env.NODE_ENV = process.env.ENV = 'test';
-    startKarmaServer(true, cb);
+    startKarmaServer(true, true, cb);
+});
+
+gulp.task('test:watch-no-cc', (cb) => {//no coverage (useful for debugging failing tests in browser)
+    const ENV = process.env.NODE_ENV = process.env.ENV = 'test';
+    startKarmaServer(true, false, cb);
 });
 
 // Prepare 'dist' folder for publication to NPM

package.json

@@ -48,8 +48,8 @@
     "@types/node": "^6.0.58",
     "angular2-template-loader": "^0.6.0",
     "autoprefixer": "^6.6.1",
-    "awesome-typescript-loader": "^2.2.3",
-    "codelyzer": "^1.0.0-beta.0",
+    "awesome-typescript-loader": "^3.0.0-beta.18",
+    "codelyzer": "1.0.0-beta.0",
     "core-js": "2.4.1",
     "css-loader": "^0.26.1",
     "cssnano": "^3.7.4",
@@ -63,26 +63,29 @@
     "gulp-tslint": "^6.1.1",
     "gulp-util": "^3.0.7",
     "html-loader": "^0.4.4",
-    "istanbul-instrumenter-loader": "^1.2.0",
+    "istanbul-instrumenter-loader": "1.2.0",
     "jasmine-core": "^2.5.2",
-    "karma": "^1.3.0",
+    "karma": "^1.2.0",
     "karma-chrome-launcher": "^2.0.0",
-    "karma-jasmine": "^1.1.0",
-    "karma-remap-istanbul": "^0.4.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha-reporter": "^2.0.0",
+    "karma-remap-coverage": "^0.1.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.8.1",
+    "karma-webpack": "2.0.1",
     "null-loader": "^0.1.1",
     "postcss-scss": "^0.4.0",
     "postcss-strip-inline-comments": "^0.1.5",
     "pump": "^1.0.2",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "0.5.1",
     "rxjs": "5.0.0-beta.12",
     "source-map-loader": "^0.1.5",
-    "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
+    "to-string-loader": "^1.1.5",
     "tslint": "^3.15.1",
     "typescript": "2.0.2",
-    "webpack": "^1.13.0",
-    "webpack-dev-server": "^1.14.1",
+    "webpack": "2.2.0-rc.4",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-server": "2.2.0-rc.0",
     "zone.js": "0.6.21"
   }
-}
+}