第一个覆盖率数据
Note
Canyon 提供常见框架的安装指南,帮助您快速上手。
跟着以下步骤完成第一个覆盖率数据上报:
作为新项目开始
安装
在前端工程化和模块化开发中离不开Babel,对于Babel项目只需安装两个Babel插件,即可快速开始。
npm install babel-plugin-istanbul babel-plugin-canyon -D
在 Babel 配置文件 中添加 istanbul
和 canyon
插件:
babel.config.js
module.exports = {
plugins: [
'canyon',
'istanbul'
],
};
检查
配置完成后,启动项目并在控制台打印 window.__coverage__。如果输出与下图一致,则表示代码插桩成功。
配置 CI 环境变量
在 CI 环境中,我们需要配置一些环境变量以便上报覆盖率数据。
DSN
和REPORTER
- DSN:覆盖率数据上报的服务地址,{{url}}/coverage/client,其中 {{url}} 为 Canyon 服务地址。
- REPORTER:用户 token,可在Canyon用户设置页面查看。
- 配置 CI 平台变量
ℹ️
其中,项目 ID、分支和 SHA 无需手动配置,Canyon 插件会自动侦测流水线环境变量。
更新babel插件生效条件
在 CI 阶段,我们需要控制插件生效的条件,以防止在生产分支插桩。
module.exports = {
plugins: (process.env.CI &&
process.env.CI_COMMIT_REF_NAME !== 'release')
? [
'canyon',
'istanbul'
]:[],
};
上报覆盖率数据
等待 CI 完成后,页面发布到测试环境。
此时,覆盖率数据已存储在浏览器中。随着用户操作或UI自动化测试的执行,window.__coverage___数据会不断累积。
将这些数据准确无误的上报至 Canyon 服务端,即可实现覆盖率数据的实时展示。
以下是上报覆盖率数据的几种方式: