From ad28e30cb09fda86ec326475b809054a7391b6d4 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sun, 24 Jul 2016 05:32:38 +0100 Subject: [PATCH] feat(test): add karma plugin --- .../blueprints/ng2/files/config/karma.conf.js | 15 +++++-- addon/ng2/blueprints/ng2/files/package.json | 1 + ...ck-build-test.ts => webpack-build-test.js} | 18 ++++---- addon/ng2/tasks/test.ts | 31 -------------- package.json | 5 --- plugins/karma.js | 42 +++++++++++++++++++ 6 files changed, 64 insertions(+), 48 deletions(-) rename addon/ng2/models/{webpack-build-test.ts => webpack-build-test.js} (87%) create mode 100644 plugins/karma.js diff --git a/addon/ng2/blueprints/ng2/files/config/karma.conf.js b/addon/ng2/blueprints/ng2/files/config/karma.conf.js index 71e33490cf37..c86d3243662a 100644 --- a/addon/ng2/blueprints/ng2/files/config/karma.conf.js +++ b/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, diff --git a/addon/ng2/blueprints/ng2/files/package.json b/addon/ng2/blueprints/ng2/files/package.json index bf71f84632c0..c3d3b13f9284 100644 --- a/addon/ng2/blueprints/ng2/files/package.json +++ b/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", diff --git a/addon/ng2/models/webpack-build-test.ts b/addon/ng2/models/webpack-build-test.js similarity index 87% rename from addon/ng2/models/webpack-build-test.ts rename to addon/ng2/models/webpack-build-test.js index 7c63e6e2299a..0161dac8d922 100644 --- a/addon/ng2/models/webpack-build-test.ts +++ b/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; \ No newline at end of file diff --git a/addon/ng2/tasks/test.ts b/addon/ng2/tasks/test.ts index 8ef8268f9b15..0f8fd6b96f48 100644 --- a/addon/ng2/tasks/test.ts +++ b/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) { diff --git a/package.json b/package.json index 41847851c29d..38bb352dfe13 100644 --- a/package.json +++ b/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", diff --git a/plugins/karma.js b/plugins/karma.js new file mode 100644 index 000000000000..1282650d6659 --- /dev/null +++ b/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')); \ No newline at end of file