configure coverage for karma webpack with angular 2

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());

Reitz

Yes, the example isn't working for me too. I got an error about: executed 0 of 0 error. But I did everything like in official documentation. – Subtend

Did you try downloading? angular.io/generated/zips/webpack/webpack.zip then npm install then npm run build then npm test? That worked completed ok for me. I'd anaylze the working extracted zip for differences. – Kernel

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
    });
};

Nap