单元测试 – 使用角度2配置karma webpack的覆盖范围

如何使用angular2 webpack设置karma-coverage？

我从棱角分明的快速启动webpack指南.但覆盖工具是空白的,不显示我的测试.谢谢！

我的文件夹结构是

project
|--src (project files)
|--tests (all my testfiles)

我的webpack.test.js看起来像这样

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'),include: helpers.root('src',loader: 'null'
            }
        ]
    }
}

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

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

Yuu需要将下面的代码覆盖插件导入到插件中

require('karma-coverage-istanbul-reporter'),

另外,使用下面的代码添加istanbul报告属性如下

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,functions: 80,overrides: {}
            }
        }
    },

karma.config.js的完整配置应该如下：

// 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: '','@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',// 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,functions: 80
                },each: { // thresholds per file
                    statements: 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
        },browsers: ['Chrome'],singleRun: false
    });
};

单元测试 – 使用角度2配置karma webpack的覆盖范围

猜你在找的Angularjs相关文章