jeudi 15 septembre 2016

configure coverage for karma webpack with angular 2

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('http://ift.tt/2bzdqQw');
require('zone.js/dist/proxy');
require('http://ift.tt/2cuTs9G');
require('http://ift.tt/2bD0xlP');
require('http://ift.tt/2bzdzU8');
require('http://ift.tt/2bD0Rkt');

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

Aucun commentaire:

Enregistrer un commentaire