feat(test): add karma plugin (#1437)

Author: filipesilva

addon/ng2/blueprints/ng2/files/config/karma.conf.js

@@ -1,10 +1,12 @@
 module.exports = function (config) {
   config.set({
     basePath: '..',
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', 'angular-cli'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-chrome-launcher')
+      require('karma-chrome-launcher'),
+      require('karma-coverage'),
+      require('angular-cli/plugins/karma')
     ],
     customLaunchers: {
       // chrome setup for travis CI using chromium
@@ -13,8 +15,13 @@ module.exports = function (config) {
         flags: ['--no-sandbox']
       }
     },
-    files: [],
-    preprocessors: {},
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    angularCliConfig: './angular-cli.json',
     reporters: ['progress'],
     port: 9876,
     colors: true,

addon/ng2/blueprints/ng2/files/package.json

@@ -43,6 +43,7 @@
     "jasmine-spec-reporter": "2.5.0",
     "karma": "0.13.22",
     "karma-chrome-launcher": "0.2.3",
+    "karma-coverage": "^1.0.0",
     "karma-jasmine": "0.3.8",
     "protractor": "3.3.0",
     "ts-node": "0.9.1",

addon/ng2/models/webpack-build-test.ts renamed to addon/ng2/models/webpack-build-test.js

@@ -1,8 +1,8 @@
-import * as webpack from 'webpack';
-import * as path from 'path';
-import { CliConfig } from './config';
+// this config must be JS so that the karma plugin can load it
 
-export const getWebpackTestConfig = function(projectRoot: string, sourceDir: string) {
+const path = require('path');
+
+const getWebpackTestConfig = function(projectRoot, sourceDir) {
   return {
     devtool: 'inline-source-map',
     context: path.resolve(__dirname, './'),
@@ -44,8 +44,8 @@ export const getWebpackTestConfig = function(projectRoot: string, sourceDir: str
               query: {
                 useWebpackText: true,
                 tsconfig: path.resolve(projectRoot, `./${sourceDir}/tsconfig.json`),
-                module: "commonjs",
-                target: "es5",
+                module: 'commonjs',
+                target: 'es5',
                 useForkChecker: true,
                 removeComments: true
               }
@@ -56,12 +56,12 @@ export const getWebpackTestConfig = function(projectRoot: string, sourceDir: str
           ],
           exclude: [/\.e2e\.ts$/]
         },
-        { test: /\.json$/, loader: 'json-loader'},
+        { test: /\.json$/, loader: 'json-loader' },
         { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
         { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
         { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
         { test: /\.scss$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
-        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'},
+        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000' },
         { test: /\.html$/, loader: 'raw-loader', exclude: [path.resolve(projectRoot, `./${sourceDir}/index.html`)] }
       ],
       postLoaders: [
@@ -89,3 +89,5 @@ export const getWebpackTestConfig = function(projectRoot: string, sourceDir: str
     }
   };
 }
+
+module.exports.getWebpackTestConfig = getWebpackTestConfig;

addon/ng2/tasks/test.ts

@@ -16,37 +16,6 @@ module.exports = Task.extend({
     return new Promise((resolve) => {
       const karma = requireDependency(projectRoot, 'karma');
       const karmaConfig = path.join(projectRoot, this.project.ngConfig.test.karma.config);
-      const testFile = `./${this.project.ngConfig.defaults.sourceDir}/test.ts`;
-
-      options.plugins = [
-        require('karma-webpack'),
-        require('karma-jasmine'),
-        require('karma-chrome-launcher'),
-        require('karma-coverage'),
-        require('karma-mocha-reporter'),
-        require('karma-sourcemap-loader')
-      ];
-      options.reporters = ['coverage', 'mocha', 'progress'];
-
-      // Abstract the webpack concepts from the local karma config.
-      // Add those details here.
-
-      // Single test entry file. Will run the test.ts bundle and track it.
-      options.files = [{ pattern: testFile, watched: false }];
-      options.preprocessors = { [testFile]: ['webpack','sourcemap'] };
-      options.webpack = getWebpackTestConfig(projectRoot, this.project.ngConfig.defaults.sourceDir);
-      options.webpackMiddleware = {
-        noInfo: true, // Hide webpack output because its noisy.
-        stats: { // Also prevent chunk and module display output, cleaner look. Only emit errors.
-          assets: false,
-          colors: true,
-          version: false,
-          hash: false,
-          timings: false,
-          chunks: false,
-          chunkModules: false
-        }
-      };
 
       // Convert browsers from a string to an array
       if (options.browsers) {

package.json

@@ -56,11 +56,6 @@
     "html-webpack-plugin": "^2.19.0",
     "istanbul-instrumenter-loader": "^0.2.0",
     "json-loader": "^0.5.4",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-coverage": "^1.0.0",
-    "karma-jasmine": "^1.0.2",
-    "karma-mocha-reporter": "^2.0.4",
-    "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
     "leek": "0.0.21",

plugins/karma.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const getWebpackTestConfig = require('../addon/ng2/models/webpack-build-test').getWebpackTestConfig;
+
+const init = (config) => {
+
+  // load Angular CLI config
+  if (!config.angularCliConfig) throw new Error('Missing \'angularCliConfig\' entry in Karma config');
+  const angularCliConfig = require(path.join(config.basePath, config.angularCliConfig))
+
+  // add webpack config
+  config.webpack = getWebpackTestConfig(config.basePath, angularCliConfig.defaults.sourceDir);
+  config.webpackMiddleware = {
+    noInfo: true, // Hide webpack output because its noisy.
+    stats: { // Also prevent chunk and module display output, cleaner look. Only emit errors.
+      assets: false,
+      colors: true,
+      version: false,
+      hash: false,
+      timings: false,
+      chunks: false,
+      chunkModules: false
+    }
+  };
+
+  // replace the angular-cli preprocessor with webpack+sourcemap
+  Object.keys(config.preprocessors)
+    .filter((file) => config.preprocessors[file].indexOf('angular-cli') !== -1)
+    .map((file) => config.preprocessors[file])
+    .map((arr) => arr.splice(arr.indexOf('angular-cli'), 1, 'webpack', 'sourcemap'));
+}
+
+init.$inject = ['config']
+
+// dummy preprocessor, just to keep karma from showing a warning
+const preprocessor = () => (content, file, done) => done(null, content);
+preprocessor.$inject = []
+
+// also export karma-webpack and karma-sourcemap-loader
+module.exports = Object.assign({
+  'framework:angular-cli': ['factory', init],
+  'preprocessor:angular-cli': ['factory', preprocessor]
+}, require('karma-webpack'), require('karma-sourcemap-loader'));