基于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: https://github.com/gotwarlost/istanbul-middleware

根据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/babel-plugin-istanbul

对于其他类型的JS前端工程，可参考：github.com/istanbuljs/nyc

插桩前后代码对比如下。插桩后的代码可以在运行过程中，统计到某一行代码是否运行到，某一段逻辑是否被覆盖。

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的覆盖率数据

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

查看覆盖率数据的原始数据源

关注我们

酷家乐质量效能团队热衷于技术的成长和分享，几乎每个月都会举办技术分享活动（海星日），每半年举办一次技术专题竞赛分享（火星日），并将优秀内容写成技术文章。

我们尽可能保障分享到社区的内容，是我们用心编写、精心挑选的优质文章。如果您想更全面地阅读我们的文章，请您关注我们的微信公众号"酷家乐技术质量"。