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

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

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


comments powered by Disqus