前端质量利器-马可代码覆盖率平台

1. 2021 vivo开发者大会互联网技术专场 vivo商城前端专家

2. 2021.12.16 vivo开发者大会-互联网技术专场

3. 2021.12.16 vivo开发者大会-互联网技术专场

4. 小步快跑、快速迭代、拥抱变化，不追求一开始就尽善尽美，而是把最核心的东西先交付MVP Short Cycle 项目特点根据市场反馈来对需求进行验证和矫正，以灵活敏捷的改变调整去适应变化，在一次次持续迭代中达到最终目标 Frequent Change High Complexity 分布式、微服务、高性能、高可用等各种架构让本就复杂的业务变得更加复杂 2021.12.16 vivo开发者大会-互联网技术专场

5. 面临挑战保险起见，把相关功能都回归一遍吧测了半天，到底还有哪些代码没覆盖到有没有偷偷改了一些我不知道的地方改了好多，改回归哪些功能项目越来越大，到底哪些代码是没用的改了那么多，测试都回归到了吗自动化测试开发成本好大 2021.12.16 vivo开发者大会-互联网技术专场

6. 无法准确的识别很难用来提升测试效率，从而降低项目成本的测试方案，面临挑战无法全面的知道，很难通过执行数据，来从而提升项目质量 2021.12.16 vivo开发者大会-互联网技术专场

7. 解决方案在集成测试 [1] 期间，采集代码覆盖率 [2] ，并上报到平台中进行合并展示 1. 是单元测试后软件测试过程的第二个层次。将所有模块按照设计要求组装成为子系统或系统，进行集成测试 2. 是一种通过计算测试过程中被执行的源代码占全部源代码的比例，进而间接度量软件质量的方法 2021.12.16 vivo开发者大会-互联网技术专场

8. 前端所有的测试都是在各端进行的，测试产生的数据留着各个终端，很难准确合并，不像JaCoCo所有人访问的数据都统计在一个服务器技术难点前端代码发版非常频繁，在测试的时候，每天可能发版好多次，代码的变更导致覆盖率数据完全失效 2021.12.16 vivo开发者大会-互联网技术专场

9. 2021.12.16 vivo开发者大会-互联网技术专场

10. 不挑业务，框架，对现有代码零侵入，一键即可接入马可平台支持多用户，多报告实时合并与查看支持增量报告，更加精准的了解代码覆盖率情况支持多种编程语言多种拓展工具方便用户使用，比如代码对比，git blame等等通过大盘实时查看覆盖率走势，了解项目质量趋势马可平台打通IM软件，定时推送项目覆盖率情况不仅支持直接接入，还支持一键私有化部署 2021.12.16 vivo开发者大会-互联网技术专场

11. 马可平台改动了哪些文件是否被测试验证改动了哪些地方 2021.12.16 vivo开发者大会-互联网技术专场

12. 2021.12.16 vivo开发者大会-互联网技术专场

13. 技术方案 2021.12.16 vivo开发者大会-互联网技术专场

14. Web —— 已完成接入层一键接入马可平台服务层展现层其他技术栈——适配中其他语言——预研中 Vue React 各种小程序 Node Java Go Angular …… Typescript …… Python …… 多语言适配区分环境智能上报报告管理项目管理用户管理消息管理任务管理代码管理问题管理历史管理接入管理登录/登出全局概览产品文档问题反馈在线客服项目管理报告管理报告趋势报告展示 2021.12.16 vivo开发者大会-互联网技术专场

15. 服务层（处理数据）接入层（采集数据）源文件报告1-N 插桩方式数据流向图编译时插桩 Vue/React/ng. 展现层（展示数据）系统功能 OAuth登录是否存在旧报告运行时插桩 Node 是预处理文件读取报告hash 添加SDK 用户管理目标文件 hash是否变化部署CDN 否 http下载项目管理是最终文件 http上传终端 Gitlab获取文件对比信息版本管理 Diff算法行偏移算法报告管理 …… 合并算法系统集成保持新报告报告1 报告2 报告3 报告4 报告5 报告N 2021.12.16 vivo开发者大会-互联网技术专场

16. 技术方案技术架构服务层展现层 2021.12.16 vivo开发者大会-互联网技术专场

17. 提供各语言各语言提供各语言各语言接入提供各语言上报各语言 2021.12.16 vivo开发者大会-互联网技术专场

18. 所有语句的执行率接入层-插桩-维度所有有效代码行的执行率，和语句类似，但是计算方式略有差别所有函数的被调用率马可平台所有代码分支如 if、三目运算的执行率 2021.12.16 vivo开发者大会-互联网技术专场

19. 编译时 babel 接入层-插桩-过程源码 AST 运行时 node 语句维度标记分支输出标记源码函数行 2021.12.16 vivo开发者大会-互联网技术专场

20. 获取相对路径接入层-插桩-实现 1 2 调用istanbul-lib-instrument插桩添加自定义参数 3 2021.12.16 vivo开发者大会-互联网技术专场

21. （ Visibilitychange 事件）（ window(global)._coverage_ ）接入层-上报（ onShow onHide ）（ window (global).make ）（定时任务） 2021.12.16 vivo开发者大会-互联网技术专场

22. 技术方案技术架构接入层展现层 2021.12.16 vivo开发者大会-互联网技术专场

23. 马可平台服务层报告管理项目管理用户管理消息管理任务管理代码管理问题管理历史管理接入管理 2021.12.16 vivo开发者大会-互联网技术专场

24. 报告三要素覆盖率信息语句覆盖率分支覆盖率函数覆盖率行覆盖率项目信息项目信息分支信息文件hash 构建时间报告管理通过接入层采集的覆盖率信息，和项目信息，然后关联Git平台的文件信息，这样才能展示一个完整的覆盖率报告文件地址文件信息文件内容 Git信息 2021.12.16 vivo开发者大会-互联网技术专场

25. main.js 报告合并流程 1 2 3 4 5 6 7 8 9 10 11 main.js let a = 1 let b = -2 function abs(n) { if (n < 0) { return -n } else { return n } } console.log(abs(a)) console.log(abs(b)) 小美 let a = 1 let b = -2 function abs(n) { return Math.abs(aaa); } console.log(abs(a)) console.log(abs(b)) 小花 1 2 3 4 5 6 7 8 9 10 11 小美 2021.12.16 vivo开发者大会-互联网技术专场

26. 开始接受报告否是否存在老报告获取老报告保存新报告结束是获取新老报告构建时间报告合并流程对比报告构建时间 OAuth 本地代码未更新新报告构建时间 < 老报告构建时间 git 放弃报告新老报告版本一致新报告构建时间 = 老报告构建时间直接合并合并算法否新版本发布新报告构建时间 > 老报告构建时间获取文件变更信息遍历文件判断文件是否变更是 Diff算法行对应算法 2021.12.16 vivo开发者大会-互联网技术专场

27. 马可平台 GET /projects/:id/repository/compare?from=master&to=feature 增量报告-变更内容解析 @@ ......... @@ 里面的内容，+/-表示变更前后，两个数字分别表示从哪一行开始，总共改了几行 -2,6: 修改前文件从2行开始，直到第 7 行 +3,8: 修改后文件从3行开始，直到第 10 行 2021.12.16 vivo开发者大会-互联网技术专场

28. 增量报告-计算增量覆盖 2021.12.16 vivo开发者大会-互联网技术专场

29. 用户管理马可平台主流 Git 管理平台全部打通 2021.12.16 vivo开发者大会-互联网技术专场

30. 技术方案技术架构接入层服务层 2021.12.16 vivo开发者大会-互联网技术专场

31. • 支持实时报告 • 支持代码对比 2021.12.16 vivo开发者大会-互联网技术专场

32. A javascript text differencing implementation. Based on the algorithm 代码对比 proposed in "An O(ND) Difference Algorithm and its Variations" (Myers, 1986). 2021.12.16 vivo开发者大会-互联网技术专场

33. count：行数对象数组 value：具体代码 added：是否新增 removed：是否删除代码对比 2021.12.16 vivo开发者大会-互联网技术专场

34. 2021.12.16 vivo开发者大会-互联网技术专场

35. 总结规划前端包括小程序，node 语言包括JAVA，GO等马可平台整体打包开源拥抱社区 2021.12.16 vivo开发者大会-互联网技术专场

36. 2021.12.16 vivo开发者大会-互联网技术专场

37. 2021 vivo开发者大会互联网技术专场宋加超 | vivo商城前端专家相关技术文章后续将在公众号发布敬请关注