角度 2 的代码覆盖率

Posted 2023-03-13

【中文标题】角度 2 的代码覆盖率

【英文标题】：Code coverage for angular 2

【发布时间】：2017-11-11 19:41:48

【问题描述】：

如何找到 Angular 2 代码的代码覆盖率？有没有我可以使用的 vs 代码编辑器或 webstorm 插件？我正在使用 Jasmine 和 Karma 对我的代码进行单元测试。

【问题讨论】：

我当然可以在线查看扩展程序。我想了解开发人员尝试和测试哪个更好。如果我可以问，为什么你认为它不被鼓励？

【参考方案1】：

ng test --code-coverage 

或

ng test --code-coverage --reporters=teamcity,coverage-istanbul

【参考方案2】：

如果您想查看整体测试覆盖率统计信息，当然可以在 Angular CLI 中输入，然后查看命令提示符窗口的底部

ng test --code-coverage

结果：

如果您想查看组件的单独测试覆盖率，请按照以下步骤操作。

npm install --save-dev karma-teamcity-reporter

将require('karma-teamcity-reporter') 添加到 karma.conf.js 中的插件列表

ng test --code-coverage --reporters=teamcity,coverage-istanbul

请注意，报告者列表以逗号分隔，因为我们添加了一个新报告者 teamcity。

运行此命令后，您可以在您的目录中看到文件夹 coverage，并打开 index.html 以查看测试覆盖率的图形视图。

您还可以在karma.conf.js 中设置您想要达到的覆盖率阈值，如下所示。

coverageIstanbulReporter: 
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true,
      thresholds: 
        statements: 90,
        lines: 90,
        branches: 90,
        functions: 90
      
    ,

【参考方案3】：

首先安装依赖项。

npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter

然后运行 ​​ng 测试。

ng test --code-coverage

然后运行显示您的报告的服务器。

http-server -c-1 -o -p 9875 ./coverage

你应该看到这样的东西：

我写了一篇关于这个here的博文。

【讨论】：

完美无缺

如果你想要快速的东西，你也可以在“coverage”文件夹中打开 index.html。

【参考方案4】：

我在这个问题上苦苦挣扎。我找到的解决方案是

ng test --code-coverage

但请确保在您的 karma.conf.js 文件中指定了记者（我使用“coverage-istanbul”）

例如reporters: ['coverage-istanbul']

覆盖率报告将位于根目录中名为“coverage”的目录中。