如何检测 Angular CLI 以报告所有源文件的覆盖率

Posted 2023-03-16

【中文标题】如何检测 Angular CLI 以报告所有源文件的覆盖率

【英文标题】：How to instrument Angular CLI to report coverage on all source files

【发布时间】：2018-04-03 21:10:27

【问题描述】：

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

我尝试了不同的方法：

按照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
    );
;

【问题讨论】：

我也有同样的问题。请问你有没有找到解决办法？

【参考方案1】：

我很幸运使用karma-sabarivka-reporter 将错过的源文件拾取到覆盖范围内。

【参考方案2】：

如果您使用 Angular CLI 1.7.X，请进行以下更改

~/src/test.ts

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

~/src/tsconfig.spec.json

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

【讨论】：

这行得通。应该是公认的答案。也不是这个文件中的导入顺序很重要。进行修改时不要格式化或重新排序文件。