Angular4如何启用测试覆盖率

Question

我正在做一个 Angular4 项目。

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

我阅读了所有可能找到的页面，但我迷路了。

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

更新 2： 我现在决定使用业力报道记者 https://www.npmjs.com/package/karma-coverage 因此根据描述修改了 karma conf 文件。

包 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
        )
    ]
}

接下来是现在更新的 karma conf 文件：

  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 配置文件。

Answer 2

我在尝试让 angular4 cli 在ng eject 之后的设置中工作时遇到了类似的问题。在 package.json 和 karma.conf.js 中对我来说是几行简单的代码

也许这会帮助其他人从头开始或从ng eject 的角度来做。

我在 package.json 中添加了一个coverage 脚本

"test": "karma start ./karma.conf.js",
"coverage": "karma start --coverage true ./karma.conf.js",

然后对于业力配置，我必须为 client.args 添加一行并将 angularCli.codeCoverage 设置为我创建的变量 isCoverage，以便从 package.json 读取命令行选项。

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {

  const isCoverage = config.coverage || false;

  console.log(`Generate Coverage Statistics?: ${isCoverage}`);

  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')
    ],
    client:{
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
      args: ['--coverage', config.coverage]
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev',
      codeCoverage: isCoverage
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });

};

Answer 3

将 angularClt 添加到您的 karma.conf 文件中。 像这样的：

angularCli: {
      environment: 'dev',
      codeCoverage: true
    }

如果您想使用脚本命令 npm run test 为弹出的应用程序运行 codeCoverage，则 codeCoverage 是重要的部分

Answer 4

我研究了各种文章，发现最简单的方法是：-

1. $ npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter

2. $ ng test --code-coverage

3. 确保安装了http-server (npm install http-server -g)，然后安装了$ http-server -c-1 -o -p 9875 ./coverage

只能在 chrome 浏览器中打开。