Angular4如何启用测试覆盖率

Question

我正在开发一个Angular4项目.

我正在尝试设置代码覆盖率.我创建了一个非常简单的小应用程序.

我读了我能找到的每一个可能的页面,但我迷失了.

如何在Angular4中设置代码覆盖率？

更新2: 我现在决定使用业力报道报道 https://www.npmjs.com/package/karma-coverage ,因此根据描述重写了业力配置文件.

包json更新到了.

我现在看到正在生成的文件夹,但HTML文件显示一个空表,

测试正在运行并通过:

不知道该怎么做.

这是我的包json.

   {
  "name": "angular2-webpack",
  "version": "0.0.1",
  "description": "A webpack starter for Angular",
  "scripts": {
      "pretest": "npm run lint",
      "start": "webpack-dev-server --inline --progress --port 8080",
      "test": "karma start",
      "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
      "lint": "tslint --force \"src/**/*.ts\""
  },
  "license": "MIT",
    "dependencies": {
        "@angular/common": "4.1.2",
        "@angular/compiler": "4.1.2",
        "@angular/core": "4.1.2",
        "@angular/forms": "4.1.2",
        "@angular/http": "4.1.2",
        "@angular/platform-browser": "4.1.2",
        "@angular/platform-browser-dynamic": "4.1.2",
        "@angular/router": "4.1.2",
        "bootstrap": "^3.3.7",
        "core-js": "2.4.1",
        "es6-shim": "^0.35.3",
        "jquery": "^3.2.0",
        "reflect-metadata": "^0.1.10",
        "rxjs": "^5.0.1",
        "zone.js": "^0.8.10"
  },
  "devDependencies": {
      "@types/jasmine": "2.5.47",
      "@types/node": "^7.0.18",
      "angular2-template-loader": "^0.6.0",
      "awesome-typescript-loader": "^3.0.4",
      "css-loader": "^0.28.1",
      "extract-text-webpack-plugin": "^2.1.0",
      "file-loader": "^0.11.1",
      "html-loader": "^0.4.3",
      "html-webpack-plugin": "^2.16.1",
      "jasmine-core": "^2.4.1",
      "karma": "^1.7.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-coverage": "^1.1.1",
      "karma-jasmine": "^1.0.2",
      "karma-phantomjs-launcher": "^1.0.4",
      "karma-sourcemap-loader": "^0.3.7",
      "karma-webpack": "^2.0.1",
      "lint": "^1.1.2",
      "node-sass": "^4.5.0",
      "null-loader": "^0.1.1",
      "phantomjs-prebuilt": "^2.1.7",
      "raw-loader": "^0.5.1",
      "rimraf": "^2.5.2",
      "sass-loader": "^6.0.3",
      "style-loader": "^0.17.0",
      "tslint": "^5.2.0",
      "tslint-loader": "^3.5.3",
      "typescript": "~2.3.2",
      "webpack": "^2.2.1",
      "webpack-dev-server": "2.4.5",
      "webpack-merge": "^4.1.0"
  }
}

接下来是我的webpack配置

var webpack = require('webpack');
var helpers = require('./helpers');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});


module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {configFileName: helpers.root('src', 'tsconfig.json')}
                    }, 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: 'style-loader!css-loader?sourceMap'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            },


            {
                test: /\.scss$/,
                exclude: helpers.root('src', 'app'),
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },
            {
                test: /\.scss$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        extractSass,
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        )
    ]
}

其次是现在更新的业力配置文件:

  var webpackConfig = require('./webpack.test');
var path = require('path');

var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
module.exports = function (config) {
    var _config = {
        basePath: './',

        frameworks: ['jasmine'],

        files: [
            {pattern: './config/karma-test-shim.js', watched: false},
            '../src/**/*.js'
        ],
        // list of files to exclude
        exclude: [],
        preprocessors: {
            './config/karma-test-shim.js': ['webpack', 'sourcemap'],
            '../src/**/*.js': ['coverage']

        },
        coverageReporter: {
            type : 'html',
            dir : 'cover/'
        },
        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'errors-only'
        },

        webpackServer: {
            noInfo: true
        },

        reporters: ['progress', 'mocha','coverage'],

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: isTestWatch ? ['PhantomJS'] : ['PhantomJS'],
        singleRun: true
    };

     config.set(_config);

};

完整荣耀的代码可以在这里找到

https://github.com/uweDuesing/angular2-webpack-template

Answer 1

我不知道如何从头开始设置它，但我可以告诉你，使用 angular-cli 生成的项目已经配置了代码覆盖率插件。检查https://github.com/angular/angular-cli/wiki/test，您可以运行ng test -cc。

如果您想检查它的配置方式，请使用 angular-cli 生成一个项目并在根文件夹上执行ngject，这将允许您查看 webpack 配置文件。