手把手教你为Javascript/Node Github库设置测试覆盖率徽标(Coverage Badge)

# 手把手教你为Javascript/Node Github库设置测试覆盖率徽标(Coverage Badge)

怎样让一个Github库变得炫酷起来？很简单，README.MD文件作为库的封面，可以做很多文章。

最显眼的应该就是badge（勋章）了。勋章通常位于库标题下方，或是动态生成，或只是静态图片，用来展示库的当前状态简洁明了。不过也不要用太多勋章，这会让库看起来杂乱无章。勋章示例：https://coveralls.io/。

动态生成的勋章通常需要有一个提供勋章生成服务的插件或网站，通过提供库的信息，来提取某处数据，更改源svg文件来生成一个为你的库自定义的勋章。如：https://www.npmjs.com/package/badges。

其中，最常用的badge之一就是Code Coverage了。Coverage即覆盖范围，主要用百分比表示测试代码对函数方法测试的覆盖程度。这也是一个衡量和鞭策自己单元测试的有力工具。。。每次看数据都略蛋疼。

拿我的一个ember插件作为示例，用Github账户登陆，并增加相应的库之后便可以看到这样详细的数据：

点击进文件名还可以看到更详细的分析：

这项服务可以在https://coveralls.io/上免费注册使用，支持多种编程语言。对提供build CI的服务有依赖，可支持：Travis CI, Travis Pro, CircleCI, Jenkins, Semaphore, or Codeship。

具体设置步骤：

1. 用Github账号登录

   

2. 点击左侧栏选项Add Repo

   

3. 进入Add Repo页面后，会看到自己账户下所有的repo。选择想要开启分析的repo，点击左侧的滑动开关按钮。

   

4. 开启之后，可看到Details按钮，点击进入详情页面

   
   没有配置过CI或者没有任何build的repo会看到如下界面：

   

   CI是Continuous Integration的缩写，表示每次集成都通过自动化构建来验证、测试、或发布等等。CI的工具有非常多，我会另开一篇文介绍如何给Github项目配置免费的Travis CI。这篇里就不多说了。

   配置过CI并且在coverage开启后有commit更新的repo则会看到如下界面：

   

5. 点击Embed，获取相应格式的代码

   

6. 拷贝markdown格式代码，加入repo下的README.md
   

7. Badge有了，coverage数据从哪来？答案是你需要一个库通过分析源代码和测试代码来得到相应的数据。
   对于Coverall，可参考node-coveralls库，对于不同的测试库，需要用不同的命令和选项来生成合适的数据报告（通常会用lcov格式）。然后使用该库的命令上传至对应服务器。
   比如使用Jest测试，官方给的参考命令为：

   jest --coverage --coverageReporters=text-lcov | coveralls

   将此命令加入 .travis.yml :

   
   
   language: node_js
   node_js: node
   cache: yarn
   install:
   - yarn install
   - yarn global add node-coveralls
   
   script:
   - yarn jest --coverage --coverageReporters=text-lcov | coveralls

8. 大工告成！只要你的travis build成功，应该过一会就能看到徽章上会显示数字了。