为你的 Angular 项目添加覆盖率报告（以便在你的 GitHub 页面上显示）

你想展示你的 Angular 项目中令人惊叹的代码覆盖率吗？ 不再犹豫，本指南将帮助你！

必备组件

你需要满足一些条件，才能理解本指南的内容

• Angular 项目，测试在 Karma 中运行
• 项目托管在 GitHub 上
• 项目在 Travis 中构建和测试

如果你缺少任何这些条件，不用担心，可以轻松解决。

特别是，如果你没有在 Travis 中构建和测试，可以参考我的指南，其中我展示了如何设置它：如何在我的新 Web 应用上设置持续集成和持续部署。

Codecov

我最近为我的项目 Extreme Results 设置了代码覆盖率。

我从一开始就编写单元测试，但没有办法在 GitHub 页面上显示覆盖率。

现在，它看起来是这样（还有其他几个徽章）

自己看看，很酷吧

• https://github.com/bjaanes/ExtremeResults-WebApp

我之前尝试过几次，但最终使用名为 Codecov 的服务成功了。

本指南的其余部分将告诉你如何设置你的项目，以便将出色的代码覆盖率报告提供给 Codecov，并在你的 GitHub 页面上显示它。

当你真正知道该怎么做时，这出奇的容易（就像任何事情一样，我想，但仍然如此）。

安装

首先，你应该在 codecov 上注册并链接你的项目：https://codecov.io/。

接下来，从 npm 安装以下依赖项

• karma-coverage
• codecov.io

设置 Karma

接下来，你需要确保 Karma 在运行测试时生成正确的覆盖率结果。

你需要在你的 karma.conf.js 文件中包含以下部分

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

preprocessors: {
'src/app/**/*.js': ['coverage']
},

coverageReporter: {
type : 'lcov',
dir : 'coverage/'
},

并且确保其中包含 karma-coverage 插件

plugins: [
...
'karma-coverage',
...
]

设置 Travis

最后，你需要设置 Travis 以运行一些脚本。

你必须将以下行添加到你的 .travis.yml 文件中

before_install:
- pip install --user codecov
after_success:
- codecov

当你将此代码提交到 GitHub，并且 Travis 构建它时，你应该看到 Codecov 上的覆盖率报告更新。

更新你的 README.md 文件

你可能想做的最后一件事是在你的 GitHub README 文件中添加徽章。

你只需要在你的项目中找到 Codecov.io 页面右侧的小代码片段，并将其添加到你的 README 文件中。 这很简单

打开你的项目，然后单击页面右侧的齿轮图标。 然后选择“Badge”。

然后你会找到一些你可以用来显示你的徽章的代码片段。 如果你正在更新 README.md 文件，你需要 Markdown 代码。

复制它并将其粘贴到你的 README.md 文件的顶部。

完成了！ 很棒，对吧？