本文依据 Song Jiachao 老师在“2021 vivo 开发者大会 “ 现场演讲内容整顿而成。公众号回复【2021VDC】 获取互联网技术分会场议题相干材料。

一、背景

1.1 我的项目特点

随着互联网科技的飞速发展，越来越多的公司将麻利开发的流程引入到我的项目迭代中，所以越来越多的我的项目呈现出三个特点：

1）迭代周期短：各种倒排，压排期，一周一小版本，两周一大版本，甚至有的我的项目每天都在发版，苦不堪言。

2）需要变更频繁：咱们的产品经理不是在颠覆本人，就是在颠覆本人的路上，所以咱们常常也会开玩笑跟产品经理说：来来来，你立个字据，保障一下当前再也不改需要了。产品经理这时候山盟海誓的说：好好好，你把这个需要改了，我保障给你立字据，下次再也不改了。可是并没有什么作用，需要仍然改的很频繁。当然了，这也不能怪产品经理，面对着瞬息万变的市场环境，咱们有时候须要用这种试错的形式来疾速的找到正确的计划。

3）零碎复杂度高：前端曾经不仅仅是画画页面那么简略了，大家能够从当初的前端招聘信息中就可以看进去。分布式、微服务、中间层、各种目不暇接的架构，让本就简单的业务，变得更加简单。

随着我的项目的这些特点越来越显著，对咱们开发和测试的挑战也变得越来越大。

1.2 懊恼

所以咱们会有如下的一些懊恼：

有这样的懊恼，归根结底有两方面的起因：

测试人员：他们不晓得开发代码的改变点在哪里，影响点在哪里，很难用精准化的测试计划，来晋升测试效率，所以为了保险起见，只能把相干性能全副测一遍

开发人员：他们无奈全面的晓得每一行代码的执行状况，很难通过执行数据，来剖析哪些代码是有用的，哪些代码是没用的，哪些代码测试曾经验证过，哪些代码还没有被验证

所以咱们迫切的须要一个平台，可能不便的看出代码的改变点和执行状况，而这个平台就是集成代码覆盖率平台。

1.3 计划

所谓的集成代码覆盖率平台，是指在集成测试期间，采集代码覆盖率，并上报到零碎中进行合并展现的平台。

1.4 难点

既然有解决方案，为什么当初市面上很少有这样的产品推出呢？咱们在钻研这方面的时候，发现了两个十分大的技术难点。

第一个难点是：数据合并难。咱们都晓得，前端所有的测试都是在各端进行的，测试产生的数据留在各个终端，很难将这些留在各个终端的数据进行收集和合并。

第二个难点是：数据生效快。前端代码发版十分频繁，在测试的时候，每天可能发版好屡次，发版代表尽管是同一份文件，但外面的内容可能齐全不一样了，这样就会导致之前采集的覆盖率齐全生效了。

通过一直的尝试，咱们终于解决了这两个问题，于是就诞生了马可代码覆盖率平台。

二、马可平台的劣势及亮点

2.1 劣势及亮点

马可平台是一个齐备的代码覆盖率平台，具备以下几个亮点：

• 反对一键接入：不挑业务，框架，对现有代码零侵入，一键即可接入；
• 反对增量报告：可能让使用者更加精准的理解代码覆盖率状况；
• 反对多种语言：马可平台不局限于前端，也能服务后端；
• 反对多种工具：不便用户应用，比方代码比照，gitblame 等；
• 反对多个用户：多种报告的实时合并与查看；
• 反对大盘监控：通过大盘实时查看覆盖率走势，理解我的项目品质趋势；
• 反对音讯告诉：定时推送我的项目覆盖率状况；
• 反对独立部署：不仅反对第三方间接接入，还反对一键私有化部署。

2.2 体验

2.2.1 详情页

• 下图上的第一点：以后版本改变了哪些文件，咱们会将所有的改变文件通过树状结构图展现在第一个区域，让用户一眼就能分明以后版本到底改了多少个文件
• 下图上的第二点：以后文件改变哪些地方，咱们通过代码比照的形式，直观的将每一个文件的改变点显示在第二个区域，让用户一眼就能看到这个文件到底改了哪几行代码
• 下图上的第三点：以后改变是否被测试验证过，刚刚第二点咱们标记出了一份文件的到底哪几行产生了变更，那么第三点就是将变更的代码标记进去是否被验证过。

有了这三点标记，咱们就将改变点和测试过程进行了完满的联合，让测试后果高深莫测。

2.2.2 趋势图

通过我的项目趋势图，咱们能够分明的看出我的项目覆盖率走势，理解我的项目品质趋势。

2.2.3 概览

目前马可平台曾经稳固运行近 3 个月了，服务了 39 个我的项目，生成了 133 分报告。

2.3 价值

通过马可平台咱们就将测试关注的四个点即：批改点、影响点、测试点和测试后果，给严密的分割起来，同时将之前的不足数据的评估转化成准确的，有主观根据可量化的评估。

三、马可平台的技术计划

马可平台的技术计划共有 4 个小局部：首先会介绍马可平台的整体架构，而后别离从接入层、服务层和展现层，三个方面加以具体的阐明。

3.1 整体架构图

马可平台分为三个层：接入层、服务层和展现层；

• 接入层：咱们的指标是一键接入，多语言适配，辨别环境和智能上报。目前针对 Web 端的适配曾经全副实现了，正在适配其余技术栈，比方小程序、Node.js、Typescript。同时咱们还布局了其余语言的接入形式，让马可平台变成全语言的代码覆盖率平台。
• 服务层：次要是对报告的各种解决，比方报告治理、用户治理、项目管理等性能。
• 展现层：次要是对服务层的一个延长，通过可视化的形式，提供更加便捷的报告查看和治理等性能。

3.2 数据流向图

通过数据流向图，咱们将一份报告从接入层到服务层再到展现层给串联起来造成一个完满的闭环。

3.3 接入层

接入层次要就是接入和上报这两点；

针对接入：咱们提供各语言插桩计划、插桩标准、以及接入领导。

针对上报：次要有各语言的采集计划，上报数据规范和上报计划。

3.3.1 接入

插桩维度：

通常咱们会将插桩分为 4 个维度：语句覆盖率，函数覆盖率，分支覆盖率，和行覆盖率。

插桩过程

马可插桩

这是马可平台，js 插桩的局部代码，次要做了三件事；

• 第一步：获取文件相对路径

为啥是相对路径？因为马可代码覆盖率是一个平台，所以咱们须要获取相对路径，让文件门路和我的项目进行关联，而不是与打包机器关联。

• 第二步：调用了 istanbul-lib-instrument 进行插桩咱们没有齐全重写插桩代码，而是借助了开源的力量，让马可平台更加轻量化、通用化。
• 第三步：增加自定义参数这些参数都十分重要，指明了以后报告的重要信息。

这样咱们就简略实现了 js 语言的插桩适配，其余语言能够同样参考这样的思路。

3.3.2 上报

上报就是采集和发送的过程。

针对采集：次要获取两个信息，覆盖率信息和我的项目信息，两者缺一不可。

针对发送：各个端会有很大的差别，咱们提供了肯定的倡议。比方在 web 中能够监听 Visibilitychange 事件，而在小程序中能够监听 onShow 和 onHide 事件，如果是在 Node 等其余服务端中能够通过定时工作进行上报。

3.4 服务层

马可的服务层提供了很多的性能，这里咱们挑报告治理和用户治理，这两个比拟典型的性能进行介绍。

3.4.1 报告治理

报告三要素：首先一份残缺的报告须要有三个基本要素：覆盖率信息，我的项目信息，和文件信息。

• 覆盖率信息包含：语句、分支、函数、行四个覆盖率。
• 我的项目信息包含：我的项目配置，分支信息，文件 hash，构建工夫。
• 文件信息包含：文件地址、文件内容和 Git 信息。

通过接入层采集的覆盖率信息和我的项目信息，而后关联 Git 平台的文件信息，通过这种形式能力让马可变成一个多用户、多报告反对的覆盖率平台。

3.4.2 合并流程

上一个步骤咱们采集到了覆盖率，上面咱们聊一聊马可平台是如何进行报告合并的，咱们先来思考两种状况：

• 第一种状况：文件没有变更；

就是咱们下图右边的局部，文件没有变更的时候，有两个测试，小美和小花别离产生了两个报告信息，这种状况改如何进行合并呢？

• 第二种状况是：文件产生了变更；

同一份文件，文件的内容产生了变更，变更文件的行号前后无奈一一对应，比方变更前文件的第 10 行，到了变更后的文件，就变成了第 6 行，这两行其实是一样的，但因为其余行的删减导致了，这一行的行号也产生了变动，这种状况又该如何合并呢？

带着下面两个问题，咱们来整顿一下报告的和合并流程。

比较复杂的就是对报告构建工夫进行比照，构建工夫比拟会有三个后果，别离对应不同的合并流程。

3.4.3 变更内容获取

在支流的 git 托管平台，都提供了 API 接口的形式，返回 Git 的信息，比方能够通过 Gitlab 的 compare 接口就能够将两个分支的比照信息给拿到，通过解析返回的信息，咱们就能够晓得文件的变更内容。

3.4.4 用户治理

为了可能让马可平台尽可能的简单化，咱们登录应用了通用 Oauth 登录形式，通过这种形式，不仅解决了登录问题，同时也解决了代码权限的问题，真是一举多得，当然咱们在设计登录的时候，充分考虑了支流的 Git 平台，比方 Gitlab、Github、Gitee 等，也就是说托管在这些平台中的代码，都能够一键接入马可代码覆盖率平台。

3.5 展现层

这就是马可平台报告展现的细节，反对实时刷线报告，反对代码比照。通过比照能够咱们具体看到文件变更的内容，以及便跟内容的覆盖率状况。

3.5.1 代码比照

那马可平台是如何做代码比照的呢？

咱们借助了一个开源库，叫做 jsdiff，通过这个库咱们能够比照出两个文件的差别信息。比照进去的后果是一个对象数组，这是个对象数组，数组蕴含 4 个内容：

• count: 行数；
• Value：具体代码；
• Added：是否新增；
• Removed：是否删除。

通过解析这个数组，咱们能够将比照的后果一一还原到页面中来，比方右下角，就是咱们通过这个数组进行还原的后果。

四、总结布局

到这里咱们对于马可代码覆盖率平台的技术计划，根本聊完了，对于马可代码覆盖率平台，咱们接下来有两个比拟大的布局。

1）一是丰盛各端语言的接入：

• 前端包含小程序，Node.js，Typescript；
• 其余语言包含，Go，Java 等。

2）二是要做开源：

• 咱们会将马可平台整体打包开源，拥抱开源社区，心愿和大家一起共建马可平台。

下面就是咱们对代码覆盖率的一些摸索，代码覆盖率能够当做是测试品质的一个指标，提供了绝对正当、主观的数据。但 100% 的代码覆盖率，并不能代表 100% 没有 bug，代码笼罩和用例是否正确没有一个明确的对应关系，仅仅是测试品质过程中的一个补充。不能自觉谋求代码覆盖率，而应该想方法设计更多更好的用例，让用例和代码覆盖率互相补充，晋升我的项目品质。

作者：vivo 官网商城前端团队 -Song Jiachao