From 8f45228effdca88730e1ff8eb75b111876d38283 Mon Sep 17 00:00:00 2001 From: Tine Kondo Date: Mon, 16 Jan 2017 20:12:10 +0100 Subject: [PATCH] chore(config): update config files (migrate to webpack 2 + improve karma config) - add option to deactivate code coverage (useful for debugging tests) - add new gulp task `test:watch-no-cc` that runs tests in watch without coverage - ping `codelyzer` version to 1.0.0-beta.0 (for compatibility with angular 2.0.0) --- config/karma.conf.js | 38 +++++++---- config/webpack.test.js | 148 +++++++++++++++++++++++++++++------------ gulpfile.js | 13 +++- package.json | 27 ++++---- tsconfig.json | 5 +- 5 files changed, 158 insertions(+), 73 deletions(-) diff --git a/config/karma.conf.js b/config/karma.conf.js index 560109c4..314f2bbe 100644 --- a/config/karma.conf.js +++ b/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, diff --git a/config/webpack.test.js b/config/webpack.test.js index 776ffe9e..7f319e2a 100644 --- a/config/webpack.test.js +++ b/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; diff --git a/gulpfile.js b/gulpfile.js index 3cb00e1c..3bfac87a 100644 --- a/gulpfile.js +++ b/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 diff --git a/package.json b/package.json index ee099598..283212a2 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 4e7ef749..54d522db 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,5 +31,8 @@ "src/polyfills.ts", "src/vendor.ts", "src/**/*.spec.ts" - ] + ], + "awesomeTypescriptLoaderOptions": { + "useWebpackText": true + } } \ No newline at end of file