Skip to content

Commit cfb60c3

Browse files
tank0317fengweiyao
tank0317
authored and
fengweiyao
committed
最后一个环节：添加徽章，如何调试测试代码，Github Status
1 parent bad1741 commit cfb60c3

File tree

1 file changed

+22
-92
lines changed

1 file changed

+22
-92
lines changed

‎README.md

Lines changed: 22 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,54 @@
11
# unit-test-demo
22

3+
[![travis-ci](https://travis-ci.org/tank0317/unit-test-demo.svg?branch=master)](https://travis-ci.org/tank0317/unit-test-demo)
4+
[![codecov](https://codecov.io/gh/tank0317/unit-test-demo/branch/master/graph/badge.svg)](https://codecov.io/gh/tank0317/unit-test-demo)
5+
36
一步一步介绍如何给项目添加单元测试。
47

58
---
69

7-
**OK，你已经来到了第四个环节**
10+
**哇哦，你已经来到了最后一个环节**
811

9-
上一个环节里我们介绍了如何配置 [Travis-CI](https://travis-ci.org/) ，当我们提交代码的时候可以自动执行测试。
12+
前面四个环节已经介绍了如何给项目添加单元测试。包括使用 Mocha Chai 编写测试用例，基于 Karma 配置测试环境，引入 Travis-CI 自动执行测试代码，最后基于 istanbul 通过 Codecov 分析测试覆盖率。
1013

11-
这个环节我们会介绍如何获取测试覆盖率数据，同时每次 Push 或者 Pull Request 时能够将数据上传到 [Codecov](https://codecov.io/) ，在 Github 中看到当次提交的覆盖率。
14+
这个环节我们给项目添加 Travis-CI 和 Codecov 徽章，顺带了解下如何做单元测试调试以及什么是 "github status checks" 。
1215

1316
## 先看结果
1417

15-
配置完成后，当我们 Push 代码或者提交 Pull Request 时，能够看到当次提交的测试覆盖率。
16-
17-
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter4/codecov-commit.png" width="70%" alt="codecov-commit" /></p>
18+
如上面所示，我们已经给项目添加了对应徽章。
1819

19-
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter4/coverage-pull-request.png" width="70%" alt="codecov-pull-request" /></p>
2020

2121
## 我们都做了什么？
2222

23-
### 1. 添加 babel 插件 [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul)
24-
25-
该插件会在源码中插入统计代码；同时设置只在 BABEL_ENV 为 "test" 时启用该插件。
26-
27-
```javascript
28-
{
29-
// .babelrc
30-
...
31-
"env": {
32-
"test": {
33-
"plugins": [ "istanbul" ]
34-
}
35-
}
36-
}
37-
```
38-
39-
### 2. 添加 Karma 插件 [karma-coverage](https://github.com/karma-runner/karma-coverage) ，该插件会生成测试覆盖率报告；
40-
41-
```javascript
42-
module.exports = function (config) {
43-
config.set({
44-
...
45-
// spec 插件会将每个测试用例的测试结果打印到命令行 console 中,
46-
// coverage 插件会配合 babel-plugin-istanbul 生成覆盖率报告
47-
reporters: ['spec', 'coverage'],
48-
coverageReporter: {
49-
// 配置生成的代码覆盖率文件存放位置
50-
dir: './coverage',
51-
reporters: [
52-
// 生成 lcov.info 以及 html 文件，lcov.info 该文件中包含了详细的每个文件，每行，每个函数的执行信息。
53-
{ type: 'lcov', subdir: '.' },
54-
// 在命令行输出简要覆盖率数据
55-
{ type: 'text-summary' }
56-
]
57-
},
58-
...
59-
)}
60-
}
61-
```
62-
63-
现在执行 `npm run test` 会在命令行看到简要覆盖率信息，同时在 test 文件夹下会生成 coverage 文件夹，包含了生成的测试覆盖率报告，其中包含 lcov.info 文件，该文件中包含了详细的每个文件，每行，每个函数的执行信息，之后会上传 Codecov 。该文件夹下还有一些 html 形式的覆盖率报告，可以在本地用浏览器打开查看。打开后看到我们的覆盖率为 100%， 同时能够看到，项目中只有一行代码并且被执行了。其中 'HelloWorld.vue' 文件第 90 行有一个 **1x** 字标，表示该行被执行了一次（这其实是我们这个项目中唯一一行，我们自己写的可能会被执行的 JS 代码，其他都是 html css 以及传递给 Vue 配置项）。
23+
对于 Travis-CI ，点击项目中的徽章图标，可以得到链接，以图片的形式添加到项目 README.md 即可。
6424

65-
此时我们只能在本地查看覆盖率，但是我们希望更能够在每次 Push 或 Pull Request 中看到覆盖率信息。引入 [Codecov](https://codecov.io/) ！
25+
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter5/travis-ci-badge.png" width="70%" alt="travis-ci-badge" /></p>
6626

67-
### 3. 使用 Github 账号注册 [Codecov](https://codecov.io/) 并同意授权。
27+
对于 Codecov ，在项目设置里直接提供了完整的 markdown 直接复制即可。如下所示：
6828

69-
添加相应的 repo ，此时会给出一个 CODECOV_TOKEN ，然后告诉你上传你的 reports (覆盖率报告) 即可。
29+
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter5/codecov-badge.png" width="70%" alt="codecov-badge" /></p>
7030

71-
安装 codecov 命令， `npm install codecov --save-dev`，通过 `./node_modules/.bin/codecov --token ****` codecov 会自动在当前目录下搜索覆盖率报告文件，并上传。
31+
## 其他
7232

73-
现在你能够在 [codecov.io](https://codecov.io/) 上看到当次提交的测试覆盖率（代码必须提交到 Github）。引入 Codecov 的好处是，我们能够在 Github 的 Commit 和 Pull Request 中看到覆盖率信息，同时 Codecov 提供了更加清晰的视觉 UI 展示哪些代码被覆盖或未被覆盖， Codecov 还会将当次提交与上次提交进行比较，告诉你本次修改的部分覆盖率是多少，哪些地方覆盖率变化了等信息，根据这些信息可以快速定位是否需要修改源代码或者补充修改测试代码。
33+
### 如何调试测试代码？
7434

75-
### 4. 设置 npm script
35+
由于我们使用 Travis-CI 的原因，Karma 中浏览器都会配置成 Phantomjs，此时调试起来极不方便。我们正常开发过程中，都会在浏览器里借助 DevTools 进行调试，所以当需要调试代码的时候，最好将浏览器修改为 Chrome，此时和我们平时调试代码的方式是一样的。
7636

77-
通过 Travis-CI 每次执行单元测试后自动上传覆盖率信息。npm script 修改如下：
37+
### Github Status Checks ?
7838

79-
```javascript
80-
{
81-
// package.json
82-
...
83-
"scripts": {
84-
...
85-
// cross-env 每次执行测试时，指定 Babel 环境为 "test" ，启用 babel-plugin-istanbul
86-
"unit": "cross-env BABEL_ENV=test karma start test/karma.conf.js",
87-
"codecov": "codecov",
88-
"test": "npm run unit && npm run codecov"
89-
},
90-
...
91-
}
92-
```
39+
为什么每次 Travis-CI 和 Codecov 的结果能够直接显示在仓库的 Commit 或者 Pull Request 中？比如下面的样子？
9340

94-
然后将 CODECOV_TOKEN 添加到 Travis-CI 的环境变量中即可，Travis-CI 执行 codecov 命令是会从环境变量中拿到 CODECOV_TOKEN 。
95-
96-
<p align="center" ><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter4/travis-ci-env-var.png" width="70%" alt="travis-ci-env-var" /></p>
97-
98-
此后每次 Push 或者 Pull Request 就可以自动执行测试代码并上传测试覆盖率报告。Excellent !
99-
100-
## 关于 Codecov
101-
102-
实际上我们可以在项目中添加 [codecov.yml](https://docs.codecov.io/docs/codecov-yaml) 文件自定义 Codecov 行为。不过，庆幸的是默认情况下，Codecov 就可以很好的满足我们的需求。
103-
104-
比如默认情况下 ：
105-
106-
* Codecov 会在 commit 和 Pull Request 中提供项目整体（project）以及 修改部分（patch）覆盖率。
107-
* 对于整体覆盖率，当次提交不能低于上次提交的覆盖率，否则给出警告。
108-
* 对于修改部分覆盖率，只要不是 100% 就会给警告。
109-
* 每次 pull request，Codecov 会将当次提交与主干分支覆盖率进行比较，并且将信息以评论的形式添加到 Pull Request 中。
41+
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter4/codecov-commit.png" width="70%" alt="codecov-commit" /></p>
11042

111-
## 总结
43+
原因是：当我们 Push 或者 Pull Request 的时候 Github 会给 Travis-CI 和 Codecov 发送消息，告诉他们相应事件发生了。另外 Github 还提供了 [Statuses API](https://developer.github.com/v3/repos/statuses/) ，Travis-CI 和 Codecov 可以通过该接口对 Github 中的某个 Commit 添加 `error`, `failure`, `pending`, `success` 状态以及一些描述信息，类似上图所示。
11244

113-
通过引入 babel-plugin-istanbul 和 karma-coverage 插件我们能够得到单元测试的覆盖率信息。其次将覆盖率报告上传 Codecov 能够更好的对单元测试的覆盖情况进行分析，最后我们把 codecov 添加到 Travis-CI 中，每次执行测试代码都会更新测试覆盖率。
45+
Travis-CI 和 Codecov 是为什么会收到这些事件呢？两者还有点不一样，Travis-CI 是作为 [Github App](https://developer.github.com/apps/about-apps/) 存在的，而 Codecov 只是使用了 [Webhook](https://developer.github.com/webhooks/) 实现。在 Github 仓库设置中可以看到：
11446

115-
想要了解更多有关 Codecov 的信息，可以自行去 [codecov](https://docs.codecov.io/docs) 查看文档。
47+
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter5/github-webhooks.png" width="70%" alt="github-webhooks" /></p>
11648

117-
## 下一个环节
49+
[Webhook](https://developer.github.com/webhooks/) 相当于一种事件钩子，事件发生后，Codecov/Travis-CI 收到通知，然后将 覆盖率数据信息/测试执行结果 通过 Statuses API 体现在 Commit 中。
11850

119-
现在为止，我们已经基本了解了如何给项目添加单元测试，并且统计测试覆盖率，同时将这些工作集成到 Travis-CI 中自动完成，还可以在 Codecov 中查看分析测试代码覆盖详情。
51+
我们什么时候给 Codecov/Travis-CI 添加的 Webhook？就是我们通过 Github 账号注册并授权的时候。
12052

121-
下一环节会轻松一点，我们介绍怎么在项目中添加 Travis-CI 和 Codecov 的徽章，如下所示。同时了解下如何对测试代码进行调试以及什么是 "github status checks"。
12253

123-
<p align="center"><img src="https://raw.githubusercontent.com/tank0317/imgs/master/unit-test-demo/chapter4/travis-ci-coverage-badge.png" width="50%" alt="travis-ci-coverage-badge" /></p>
12454

0 commit comments

Comments
 (0)