基于Istanbul 优雅地搭建前端JS覆盖率平台

本文会介绍一种前端JS代码测试覆盖率平台的搭建思路。提供了由简单到复杂的三个场景，并分别提供了不同场景下合适的实现代码覆盖率解决方案。
1. 场景1 单版本，单次测试的覆盖率统计

要实现这种最简单的场景，有很多好用的插件可以选择：

上述插件各有优劣，但均可以在一定程度上满足这个简单的场景。当然这个场景存在局限性：
1. 单版本，单次测试
2. 一般用于单元测试、前端自动化
3. 报告生成在本地
4. 不支持多次测试覆盖率叠加
如果需要突破上述局限性，可以参考一下场景2是否能满足需求。
2. 场景2 单版本，多终端多次测试的覆盖率统计

要实现这种扩展场景，我们可以找到一些既有的实践，都是基于场景1中列举的插件的开源代码做的，举其中两个例子：

当然，场景2依然存在一些局限性，于是我设计了场景3，来满足当前场景的一些局限性：
1. 单项目，单版本
2. 数据无统一管理，只能导成文件
3. Repo无法自动匹配更新
3. 场景3 多版本，多终端多次测试的覆盖率统计

因为场景3存在大量定制化的成分，因此必然存在不少地方需要自己实现。我选择在Istanbul-Middleware的基础上进行改造。
3.1. 摸透Istanbul-Middleware的使用方法
Git: github.com/gotwarlost/i
根据Git中的说明以及对demo的研究，想要把 istanbul-middleware 应用到自己的前端工程，可以分为五步：
3.1.1. 部署middleware
将 istanbul-middleware 的代码 clone 下来，并部署在某个服务器上，使默认接口可用。默认接口的设计详见 repo 的 readme。

3.1.2. 插桩
使用Istanbul的插件给前端代码插桩。
以酷家乐的某个前端 repo 为例，它使用 babel 编译打包，可使用 babel-plugin-Istanbul 插桩，具体实现方法，就是在 babel 的配置文件 .babelrc 中添加 istanbul 插件。参考：github.com/istanbuljs/b

对于其他类型的JS前端工程，可参考：github.com/istanbuljs/n
插桩前后代码对比如下。插桩后的代码可以在运行过程中，统计到某一行代码是否运行到，某一段逻辑是否被覆盖。

3.1.3. 浏览器运行插桩后代码
浏览器运行的代码如果成功的被 istanbul 插桩，可以通过 window.__coverage__ 查看前端代码运行过程中的覆盖率数据，如图所示。当然这个数据是一堆 json 结构，不具可视化。

3.1.4. 前端代码调用 middleware 提供的接口
前端代码调用 middleware/coverage/client 接口，将 window.__coverage__ 上传给中间件，供它统计。

3.1.5. 查看代码覆盖率报告
middleware提供了看报告的页面，直接访问即可查看。

3.2. 如何改造
既然我们已经知道了 istanbul-middleware 的使用方法，那么我们应该如何基于它实现场景3呢？
3.2.1. 需求
多个repo的覆盖率分布统计；各个repo部署的各个环境分别统计；各个环境中，不同的版本分别统计。
3.2.2. 架构

3.3.3. 数据库

3.3.4. 接口设计
client接口，增加一个version参数。

show接口，增加四个参数。

3.3.5. 结果展示
前端代码在浏览器运行时，通过调用client时配置不同参数，区分 repo、环境、版本。

查看特定repo特定version的覆盖率数据

查看某个路径下所有文件的覆盖率数据
查看覆盖率数据的原始数据源