🚥 mobile-vue 测试覆盖率提升

[anlyyao]

目前正在推进 mobile-vue 的测试覆盖，需要覆盖基本的场景。具体要求：

• 行覆盖率达80%+
• 基本展示相关的组件，只需要 snapshots 测试
• 有交互的组件，需要覆盖所有场景，要求函数覆盖率 80+%

Tips

• Vitest 单元测试框架：文档
• 若开发工具为 vscode ，可以安装 Vitest 插件
• 若开发工具为 WebStorm，可以安装 Vitest Runner 插件

认领方式：直接评论 “我来负责xxx组件” 即可。

认领任务前，建议先查看 mobile-vue 的单元测试指引文档

激励

参与共建的开发者，将可以获得 TDesign 周边（贴纸、鼠标垫、工卡套等）；

成为核心贡献者，将会拥有 TDesign 专属头像。

具体进展

基础

• [x] Button @LadyChatterleyLover #280 #379
• [x] Fab @anlyyao #272

布局

• [x] Cell @LadyChatterleyLover #280
• [x] Divider @LadyChatterleyLover #280 #380
• [x] Grid @LadyChatterleyLover #280 #381

导航

• [x] DropdownMenu @anlyyao #374
• [ ] Indexes @byq1213 #418
• [ ] NavBar @TingShine #391
• [x] Steps @anlyyao #375
• [x] Sticky @4xii #348
• [x] TabBar @HelKyle #314
• [x] Tabs @anlyyao #367

输入

• [ ] Calendar
• [ ] Cascader
• [x] Checkbox @LeeJim
• [x] DateTimePicker @anlyyao #407
• [x] Input @LadyChatterleyLover #280 #399
• [x] Picker @elvinn #343
• [x] Radio @LadyChatterleyLover #280 #385
• [x] Rate @LadyChatterleyLover #280 #386
• [x] Search @anlyyao #392
• [x] Slider @anlyyao #364
• [x] Stepper @anlyyao #304
• [x] Switch @anlyyao #307
• [x] Textarea @LadyChatterleyLover #280 #400
• [x] Upload @palmcivet #318

数据展示

• [x] Avatar @LadyChatterleyLover #280
• [x] Badge @LadyChatterleyLover #280 #388
• [x] Collapse @isanxia #331
• [x] CountDown @TingShine #313
• [x] Image @LadyChatterleyLover #280 #401
• [x] ImageViewer @palmcivet #332
• [x] List @byq1213 #376
• [x] Result @LadyChatterleyLover #280
• [x] Skeleton @LadyChatterleyLover #280 #387
• [ ] Swiper @palmcivet
• [x] Tag @LadyChatterleyLover #280

消息提醒

• [x] ActionSheet @HelKyle #319
• [x] Backtop @HelKyle #335
• [x] Dialog @anlyyao #361
• [x] Drawer @anlyyao #311
• [x] Loading @zhangpaopao0609 #320
• [x] Message @zhangpaopao0609 #321
• [x] NoticeBar @TingShine #302 #393
• [x] Overlay @HelKyle #336
• [x] Popup @anlyyao #310
• [x] Progress @HelKyle #337
• [x] PullDownRefresh @palmcivet #356
• [x] SwipeCell @anlyyao #360
• [x] Toast @HelKyle #334

每周进展

10.15- 10.21

• 完成 = 45，CR = 2，目前进度 90%

10.8- 10.14

• 完成 = 38，CR = 8，目前进度 79%

9.24 - 9.30

• 完成 = 27，CR = 6，目前进度 55%

9.17 - 9.23

• 完成 = 17，CR = 24，目前进度 34%

9.10 - 9.16

• 完成 = 10，CR = 23，目前进度 20%

9.3 - 9.9

• 完成 = 6，CR = 27，目前进度 12%

8.27 - 9.2

• 新增 1 名贡献者
• 单元测试： 完成 = 2， CR = 31， 目前进度 4%

8.20 - 8.26

• 新增 4 名贡献者
• 单元测试： 完成 = 1， CR = 20， 目前进度 2%

8.13 - 8.19

• 完善 vitest 配置
• 完善脚本，自动生成所有组件 demo 的 snapshots 测试
• 新增文档 mobile vue：单元测试指引
• 新增2名贡献者
• 单测进度： 完成 = 1，CR = 11

[github-actions[bot]]

👋 @anlyyao，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[LadyChatterleyLover]

我来负责 Button, Icon, Cell, Divider, Avatar, Badge, Tag组件

[LadyChatterleyLover]

我来负责 List, Result, Skeleton, Input, Checkbox,Radio, Rate,Search, Textarea, Grid

[anlyyao]

@LadyChatterleyLover 我们统一使用 .jsx 来编写组件测试用例， 完成后需要重新生成组件徽标，然后单独提PR，辛苦大佬修改一下文件后缀&&更新徽标～～ 具体查阅mobile-vue 的单元测试指引文档

[LadyChatterleyLover]

好的。

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: Y. @.> 发送时间: 2022年8月14日 23:34 收件人: Tencent/tdesign-mobile-vue @.> 抄送: luopei @.>, Mention @.> 主题: Re: [Tencent/tdesign-mobile-vue] �� 测试覆盖 (Issue #271)

@LadyChatterleyLover 我们统一使用 .jsx 来编写组件测试用例， 完成后需要重新生成组件徽标，然后单独提PR，辛苦大佬修改一下文件后缀&&更新徽标～～ 具体查阅mobile-vue 的单元测试指引文档

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[LadyChatterleyLover]

@anlyyao 你好，我输入npm run test:unit-coverage，并没有生产index.html文件，请问是什么原因呢？

[anlyyao]

@LadyChatterleyLover 我修改了测试覆盖率报告的输出位置到/test/unit/coverage/index.html， 但目前相关pr暂未合并，所以当前的测试覆盖率报告路径在 项目根目录下， ./coverage~~ ，你可以先查看。 稍后pr会合并，你这边更新后，路径就会在/test/unit 目录下了

[LadyChatterleyLover]

好的哈，谢谢 。

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: Y. @.> 发送时间: 2022年8月15日 18:21 收件人: Tencent/tdesign-mobile-vue @.> 抄送: luopei @.>, Mention @.> 主题: Re: [Tencent/tdesign-mobile-vue] �� 测试覆盖 (Issue #271)

@LadyChatterleyLover 我修改了测试覆盖率报告的输出位置到/test/unit/coverage/index.html， 但目前相关pr暂未合并，所以当前的测试覆盖率报告路径在 项目根目录下， ./coverage~~ ，你可以先查看。 稍后pr会合并，你这边更新后，路径就会在/test/unit 目录下了

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[anlyyao]

认领 Stepper Switch Popup Drawer

[isanxia]

认领Collapse

[LadyChatterleyLover]

@anlyyao 好多组件都不能获取元素的样式，请问怎么解决呢？

[LadyChatterleyLover]

认领Image，Collapse，Slider,

[anlyyao]

@LadyChatterleyLover Collapse 已被认领。 认领前关注一下评论，避免重复认领哦～

[LadyChatterleyLover]

好的

------------------ 原始邮件 ------------------ 发件人: "Tencent/tdesign-mobile-vue" @.>; 发送时间: 2022年8月19日(星期五) 中午1:13 @.>; @.@.>; 主题: Re: [Tencent/tdesign-mobile-vue] 🚥 测试覆盖 (Issue #271)

@LadyChatterleyLover Collapse 已被认领。 认领前关注一下评论，避免重复认领哦～

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[LadyChatterleyLover]

认领Tabs, Steps, NavBar

[anlyyao]

@anlyyao 好多组件都不能获取元素的样式，请问怎么解决呢？ 提一下具体需求？？ 然后建议一个组件一个PR哦， 不然积累太多，CR有些辛苦hhh～～😂

[LadyChatterleyLover]

@anlyyao 比如我想测试rate组件的color属性，但是获取不了对应元素的style属性，用style和getComputedStyle都无法获取

[LadyChatterleyLover]

想获取rete的size也获取不到 。

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: Y. @.> 发送时间: 2022年8月22日 20:04 收件人: Tencent/tdesign-mobile-vue @.> 抄送: luopei @.>, Mention @.> 主题: Re: [Tencent/tdesign-mobile-vue] �� mobile-vue 测试覆盖率提升 (Issue #271)

@LadyChatterleyLover rate的color属性在0.17.0中移除了， 为了后面的主题配置考虑～

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[TingShine]

我来负责CountDown

[anlyyao]

@LadyChatterleyLover 我昨天串框架了😢，mobile-vue的 rate 组件，color属性还在。我看了一下 icon 渲染出来都是 svg， 不太好写测试用例，icon的可以暂时跳过～

it('color',` () => { const wrapper = mount(() => <Rate size={'16'} color={['rgb(0, 0, 0 )','rgb(153, 153, 153)']} />); const icon = wrapper.findComponent(StarFilledIcon); expect(icon).toMatchSnapshot(); expect(getComputedStyle(icon.element, null).color).toBe('rgb(153, 153, 153)') });

[LadyChatterleyLover]

好的，谢谢，我试一下

------------------ 原始邮件 ------------------ 发件人: "Tencent/tdesign-mobile-vue" @.>; 发送时间: 2022年8月23日(星期二) 上午9:19 @.>; @.@.>; 主题: Re: [Tencent/tdesign-mobile-vue] 🚥 mobile-vue 测试覆盖率提升 (Issue #271)

@LadyChatterleyLover 我昨天串框架了😢，mobile-vue的 rate 组件，color属性还在。我看了一下 icon 渲染出来都是 svg， 不太好写测试用例，icon的可以暂时跳过～

it('color',` () => { const wrapper = mount(() => <Rate size={'16'} color={['rgb(0, 0, 0 )','rgb(153, 153, 153)']} />); const icon = wrapper.findComponent(StarFilledIcon); expect(icon).toMatchSnapshot(); expect(getComputedStyle(icon.element, null).color).toBe('rgb(153, 153, 153)') });

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[palmcivet]

我来认领 Upload

[TingShine]

认领notice-bar

[zhangpaopao0609]

认领 message loading

[HelKyle]

认领 tabbar

[HelKyle]

认领 ActionSheet

[palmcivet]

认领 image-viewer

[elvinn]

认领 Picker

[HelKyle]

认领 Overlay，Progress，Backtop，Toast

[palmcivet]

认领 PullDownRefresh