configure coverage for karma webpack with angular 2 - unit-testing

Question

How do I set up karma-coverage with angular2 + webpack?
I followed the quickstart webpack guide from angular. But the coverage tool is blank and does not display my tests. Thanks!
my folder structure is
project
|--src (project files)
|--tests (all my testfiles)
my webpack.test.js looks like this
var helpers = require('./helpers');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts']
},
{
test: /\.html$/,
loader: 'null'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: 'null'
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'null'
}
]
}
}
my Karma.conf.js
var webpackConfig = require('./webpack.test');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine', 'sinon'],
files: [
{pattern: './config/karma-test-shim.js', watched: false}
],
preprocessors: {
'./config/karma-test-shim.js': ['webpack', 'sourcemap']
},
plugins:[
require('karma-jasmine'),
require('karma-coverage'),
require('karma-webpack'),
require('karma-phantomjs-launcher'),
require('karma-sourcemap-loader'),
require('karma-mocha-reporter'),
require('karma-sinon')
],
coverageReporter: {
type : 'html',
dir : 'coverage/'
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
reporters: ['mocha','coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
};
config.set(_config);
};
and the karma-test-shim.js
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('reflect-metadata');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var testContext = require.context('../tests', true, /\.spec\.ts/);
testContext.keys().forEach(testContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

Answer 1

Yuu need to import below code coverage plugin into plugins
require('karma-coverage-istanbul-reporter'),
Also, use below code to add istanbul reporter property as below
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
// enforce percentage thresholds
// anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
thresholds: {
emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
global: { // thresholds for all files
statements: 80,
lines: 80,
branches: 80,
functions: 80
},
each: { // thresholds per file
statements: 80,
lines: 80,
branches: 80,
functions: 80,
overrides: {}
}
}
},
The complete config for karma.config.js should be below:
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular/cli/plugins/karma'),
require('karma-htmlfile-reporter'),
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
// enforce percentage thresholds
// anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
thresholds: {
emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
global: { // thresholds for all files
statements: 80,
lines: 80,
branches: 80,
functions: 80
},
each: { // thresholds per file
statements: 80,
lines: 80,
branches: 80,
functions: 80,
overrides: {}
}
}
},
angularCli: {
environment: 'dev'
},
// reporters: config.angularCli && config.angularCli.codeCoverage ? ['spec', 'karma-remap-istanbul'] : ['spec'],
// reporters: ['mocha'],
reporters: ['progress', 'html', 'kjhtml'],
htmlReporter: {
outputFile: 'testreports/report.html',
// Optional
pageTitle: 'Rest Reports',
subPageTitle: 'Suite-wise report ',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: false
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};