数据上报
Node端
应用发布时，写入对应的工程和分支信息，创建定时器，实时上传_global.coverage变量，即覆盖率信息。
Client端
客户端的上报比较特殊，客户端不像服务端，在发布后可以全局保持coverage变量以及定时器方法，client端所有的数据生成和消耗都跟随页面的生命周期，所以不太可控，因此需要一个额外容器进行处理，我们选择了通过chrome插件来上报，通过全局管理覆盖率信息对象，以及通知下发来实现上报流程。该插件详细的工作流程如下。
覆盖率服务端
- 继承istanbul middleware的功能
- 支持分支维度接收和查询覆盖率
- 代码变更时覆盖率替换, 支持存储和查看历史版本
主要基于istanbul-middleware做了二次开发，扩展了istanbulMiddleware.createHandler方法：
/:ns/:repo /:ns/:repo/show 两个覆盖率展示接口 新增了ns、repo、branch三个入参, 用来区别不同的覆盖率 同时增加额外参数history 传入该变量 标志获取的是历史覆盖率。
/client/:ns/:repo?branch={}&source={} body携带覆盖率信息 根据应用和分支信息上报 接收到上报信息之后 会先获取该分支下的已有覆盖率 然后和此次上报的信息做合并 合并是根据文件名字遍历合并的 如果发现某个文件 新旧两份覆盖率结构不同 即发生了代码变更 则会丢弃旧的覆盖率 以新覆盖率为准 同时把旧的覆盖率存储到历史版本中。
页面展示
全量覆盖率展示
使用istanbulmiddle原生报告生成。
增量覆盖率展示
通过gitlab接口对比master差异，分文件展示各自的覆盖率，同全量覆盖率，只是细化了，整体页面用vue + muse-ui完成。
以master分支为基准, 增量文件覆盖率
全量文件覆盖率目录结构
工作流程
主要分为3部分，对应上一节说的接入 、上报 、展示 通过babel插件完成客户端代码插桩，提供给node端使用的插桩插件，可以一步完成服务端的代码插桩以及定时上报功能 配合提供的chrome插件，完成客户端的覆盖率上报任务 覆盖率服务端负责信息的接收和存储，并返回给前端数据信息 前端负责数据信息展示。
业务实践
接入测试环境发布平台, 实现以应用和分支维度的多版本实时覆盖率收集和展示功能，无缝对接项目测试环境，项目中各应用发布后，自动开启覆盖率上报，在项目测试过程中实时记录，可实时查看. 在项目提测前，给予开发量化指标，项目测试结束后可以给出最终覆盖率数据，帮助测试同学检查以及完善未覆盖的功能。
目前在电商教育和行业两条业务线中已有接入,由于该工具限制在qa环境使用，仅限收集在qa环境测试的项目数据。在功能测试阶段，从使用数据上来看，增量行代码覆盖率达到80%以上(目前的增量只到文件维度，未到行维度), 未覆盖的行主要包括四种: 异常捕获、防御性编码、非本次新增无需关心的代码以冗余代码，属于可允许的范围。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
