如何使用Angular CLI报告所有源文件的覆盖范围

时间:2017-10-23 10:37:18

标签: code-coverage angular-cli karma-coverage

运行ng test --code-coverage时,覆盖率报告中仅报告正在进行测试的源文件的覆盖范围。如何配置检测以包含所有源文件(例如.ts文件夹中的所有src/app文件)?

我尝试了不同的东西:

  • 关注https://github.com/angular/angular-cli/issues/1735我尝试替换建议的上下文定义。在我的情况下,这根本不起作用。输出错误并且不执行任何测试
  • 删除istanbul作为依赖项,并仅依赖于karma-coverage,可以配置includeAllSources: true - 但Angular CLI无法在没有karma-coverage-istanbul-reporter的情况下运行
  • 以上与karma-coverage-istanbul-reporter的组合作为依赖关系 - 与原始设置没有区别

必须有一些方法来使用Angular CLI来包含所有源文件。添加空的规范似乎很乏味且容易出错,因为如果类/源文件没有经过测试,则根本不会显示覆盖,因此您需要手动检查它是否包含在覆盖率报告中。

任何建议都赞赏!

各种信息:

ng --version

@angular/cli: 1.4.8
node: 6.11.3
os: linux x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.8
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

的package.json:

"devDependencies": {
    "@angular/cli": "1.4.8",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-jquery": "2.1.1",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-htmlfile-reporter": "0.3.5",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-json-reporter": "1.2.1",
    "karma-spec-reporter": "0.0.31",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
}

karma.conf.js:

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'),
            require('karma-spec-reporter'),
            require('karma-htmlfile-reporter'),
            require('karma-json-reporter'),
            //require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')
        ],
        files: [
        ],
        client:{
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        // coverageIstanbulReporter: {
        //     reports: [ 'html', 'text', 'text-summary', 'json' ],
        //     fixWebpackSourcePaths: true
        // },

        angularCli: {
            environment: 'dev'
        },
        reporters: ['spec', 'kjhtml', 'html', 'json', 'coverage'],
        preprocessors: {
            'src/app/*.ts': ['coverage']
        },
        htmlReporter: {
            outputFile: 'testresults/index.html',
            pageTitle: 'CRS Frontend Unit-tests - test results'
        },
        jsonReporter: {
            stdout: false,
            outputFile: 'testresults/results.json' // defaults to none
        },
        coverageReporter: {
            dir: 'coverage',
            includeAllSources: true,
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'json', subdir: 'json' }
            ]
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: true,
        failOnEmptyTestSuite: false
    });
};

2 个答案:

答案 0 :(得分:2)

如果使用angular CLI 1.7.X

,请进行以下更改

〜/ SRC / test.ts

const context = require.context('./', true, /\/app\/.*\.ts$/);

〜/ SRC / tsconfig.spec.json

  "include": [
    "**/*.ts",
    "**/*.d.ts"
  ]

答案 1 :(得分:0)

我很幸运使用karma-sabarivka-reporter来将丢失的源文件提取到Coverage中。