Skip to content

Commit 6f7dd79

Browse files
travzhangtravzhang
committed
chore: daily development
1 parent 268d013 commit 6f7dd79

File tree

9 files changed

+143
-11
lines changed

9 files changed

+143
-11
lines changed

‎pages/documentation/core-concepts/_meta.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
22
"change-code-coverage": "变更代码覆盖率",
33
"report-id": "上报ID",
4+
"hit-map-split": "hit 和 map 数据分离",
45
};

‎pages/documentation/core-concepts/hit-map-split.mdx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# hit 和 map 数据分离
2+
3+
端到端的覆盖率数据传输量较大，为了减少数据传输量，我们建议您将 hit 数据与 map 数据分离。
4+
5+
为此您需要做的是：
6+
7+
- 在babel插件中配置`keepMap`为`true`。
8+
- 在流水线中上报 map 数据。
9+
10+
11+
## Babel Plugin Update
12+
13+
```js
14+
module.exports = {
15+
plugins: [
16+
'istanbul',
17+
[
18+
'canyon',
19+
{
20+
dsn: 'http://yourdomain.com/coverage/client',
21+
reporter: 'your_token',
22+
projectID: '230614',
23+
sha: 'xxxxxxxxx',
24+
reportID: 'case_id',
25+
branch: 'master',
26+
compareTarget: 'develop',
27+
keepMap: true,
28+
}
29+
]
30+
]
31+
}
32+
```
33+
34+
## 流水线中上报 map 数据
35+
36+
```yaml
37+
- name: Report Coverage Map
38+
run: |
39+
curl -X POST \
40+
-H "Content-Type: application/json" \
41+
-d @.canyon_output/coverage-map.json \
42+
https://canyon.com.cn/coverage/map
43+
```

‎pages/documentation/ecosystem/_meta.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
// "tools": "工具",
3-
// "plugins": "插件",
2+
"plugins": "Plugins",
3+
"tools": "Tools",
44
// "packages": "软件包",
55
};

‎pages/documentation/ecosystem/packages/canyon-report.mdx

-1
This file was deleted.

‎pages/documentation/ecosystem/plugins/babel-plugin-canyon.mdx

+67-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,67 @@
1-
# sss
1+
# babel-plugin-canyon
2+
3+
一款 Babel 插件，用于侦测 CI 环境变量。配合 istanbuljs 完成代码插桩。
4+
5+
__注意:__ 要使用此插件，建议使用分支来确定其是否生效，因为他不适用于生产环境。
6+
7+
## 使用
8+
9+
安装:
10+
11+
```sh
12+
npm install --save-dev babel-plugin-canyon
13+
```
14+
15+
在 `babel.config.js` 中添加这些配置:
16+
17+
```js
18+
module.exports = {
19+
plugins:
20+
process.env.CI_COMMIT_REF_NAME === 'test-coverage'? ['istanbul', 'canyon']:[]
21+
}
22+
```
23+
24+
它会做两件事情：
25+
26+
1. 侦测 CI 流水线变量
27+
2. 检查上一步istanbul插桩产物，上报至 Canyon 服务端作为初始覆盖率数据
28+
29+
## 配置
30+
31+
babel.config.js
32+
33+
```js
34+
module.exports = {
35+
plugins:[
36+
'istanbul',
37+
[
38+
'canyon',
39+
{
40+
dsn: 'http://yourdomain.com/coverage/client',
41+
reporter: 'your_token',
42+
projectID: '230614',
43+
sha: 'xxxxxxxxx',
44+
reportID: 'case_id',
45+
branch: 'master',
46+
compareTarget: 'develop',
47+
}
48+
]
49+
]
50+
}
51+
```
52+
53+
| 属性 | 描述 | 使用 |
54+
|-------------|--------------------------------------------------------------------------------------------------------------------|---------------------|
55+
| dsn | 用于报告覆盖范围的服务地址，建议通过管道变量进行配置。 | 必须 |
56+
| reporter | 报告覆盖率的报告器，建议通过管道变量进行配置。 | 必须 |
57+
| projectID | Git 仓库 ID，插件会检测管道的变量，通常不需要手动配置。 | 必须 |
58+
| sha | Git 仓库 SHA，插件会检测管道的变量，通常不需要手动配置。 | 必须 |
59+
| instrumentCwd | 插桩的工作目录，通常不需要手动配置。 | 必须 |
60+
| reportID | 报告 ID，用于区分不同的测试用例。 | 可选 |
61+
| branch | Git 仓库分支，插件会检测管道的变量，通常不需要手动配置。 | 可选 |
62+
| compareTarget | 比较目标，用作当前 SHA 的基线，用于计算更改行的覆盖率。 | 可选 |
63+
| provider | Git 提供商 | 必须选 |
64+
| upstream | 要连接的upstream http 代理服务器 | 可选 |
65+
| oneByOne | 逐个上报初始覆盖率数据 | 可选 |
66+
| keepMap | 保留coverage map | 可选 |
67+
| addAttributes | 附加属性 | 可选 |

‎pages/documentation/ecosystem/tools/canyon-extension.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# sdk

‎pages/documentation/ecosystem/tools/canyon-sdk.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# sdk

‎pages/documentation/getting-started/first-coverage.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ import { Steps,Callout,Cards } from 'nextra/components'
6464

6565

6666

67+
3. hit 和 map 数据分离
68+
69+
UI自动化会会产生大量覆盖率数据，为了减少数据传输量，我们建议您将 [hit 数据与 map 数据分离](/test)。
70+
6771

6872

6973
### 覆盖率数据上报

‎pages/documentation/production.mdx

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
11
# 生产环境覆盖率数据
22

3-
在您接入Canyon之后，您可以在生产环境中收集真实的覆盖率数据。
3+
通过 Canyon ，您可以在生产环境中收集真实的覆盖率数据。
44

5-
## 引入Canyon SDK
5+
它的原理是在生产环境中，通过 SDK 引入 js script，在浏览器关闭是上报覆盖率数据到 Canyon 服务端。
66

7-
在您的应用中引入Canyon SDK，以便将覆盖率数据上报到Canyon平台。
8-
```html
9-
<script src="https://cdn.jsdelivr.net/npm/coverage-map-sdk"></script>
10-
```
7+
import {Steps} from 'nextra/components'
8+
import { Callout } from 'nextra/components'
119

12-
## 查看生产环境覆盖率数据
10+
<Callout emoji="👾">
11+
在生产环境中，我们强烈建议您将 [**hit数据与map数据分离**](/test) ，以减少数据传输量。
12+
</Callout>
13+
14+
## 以一个新项目开始
15+
16+
<Steps>
17+
### 完成准备步骤
18+
19+
分别是《上报第一个覆盖率数据》、《hit 和 map 数据分离》
20+
21+
### SDK
22+
23+
引入js-sdk，用于上报覆盖率数据。
24+
25+
```html
26+
<script src="https://cdn.canyon.com.cn/canyon-sdk/1.0.0/canyon-sdk.min.js"></script>
27+
```
28+
29+
</Steps>

0 commit comments

Comments
 (0)