🚥 mobile-vue 测试覆盖率提升

anlyyao commented 2 years ago

目前正在推进 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] Calendar @anlyyao #454
[x] Cascader @anlyyao #452
[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
[x] Swiper @palmcivet #441
[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 #456
[x] NoticeBar @TingShine #302 #393
[x] Overlay @HelKyle #336 #455
[x] Popup @anlyyao #310
[x] Progress @HelKyle #337
[x] PullDownRefresh @palmcivet #356
[x] SwipeCell @anlyyao #360
[x] Toast @HelKyle #334

每周进展

10.29 - 11.4

完成 = 50，进度 100%

10.22- 10.28

完成 = 45，CR = 2，全部认领完毕，目前进度 90%

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] commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

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

anlyyao commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

好的。

发自我的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 commented 2 years ago

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

anlyyao commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

好的哈，谢谢。

发自我的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 commented 2 years ago

认领 Stepper Switch Popup Drawer

isanxia commented 2 years ago

认领Collapse

LadyChatterleyLover commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

认领Image，Collapse，Slider,

anlyyao commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

好的

------------------ 原始邮件 ------------------ 发件人: "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 commented 2 years ago

认领Tabs, Steps, NavBar

anlyyao commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

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

LadyChatterleyLover commented 2 years ago

想获取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 commented 2 years ago

我来负责CountDown

anlyyao commented 2 years ago

@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 commented 2 years ago

好的，谢谢，我试一下

------------------ 原始邮件 ------------------ 发件人: "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 commented 2 years ago

我来认领 Upload

TingShine commented 2 years ago

认领notice-bar

zhangpaopao0609 commented 2 years ago

认领 message loading

HelKyle commented 2 years ago

认领 tabbar

HelKyle commented 2 years ago

认领 ActionSheet

palmcivet commented 2 years ago

认领 image-viewer

elvinn commented 2 years ago

认领 Picker

HelKyle commented 2 years ago

认领 Overlay，Progress，Backtop，Toast

palmcivet commented 2 years ago

认领 PullDownRefresh

4xii commented 2 years ago

认领Sticky

anlyyao commented 2 years ago

认领 Dialog swipeCell

anlyyao commented 2 years ago

@LadyChatterleyLover slider 的单元测试我这边来跟进了哈～

anlyyao commented 2 years ago

认领 slider tabs dropdown-menu steps

LadyChatterleyLover commented 2 years ago

好

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

@LadyChatterleyLover slider 的单元测试我这边来跟进了哈～

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

anlyyao commented 2 years ago

@LadyChatterleyLover 你另一个pr提出了一些问题～

要是有时间辛苦在跟进一波

LadyChatterleyLover commented 2 years ago

好，过两天哈，这段时间有点忙，

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

@LadyChatterleyLover 你另一个pr提出了一些问题～

要是有时间辛苦在跟进一波

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

byq1213 commented 2 years ago

认领 list

byq1213 commented 2 years ago

我来负责check-box组件

anlyyao commented 2 years ago

@LadyChatterleyLover 同学考虑到你最近比较忙，我这边也要加快一下进度就不等你了，我会直接基于你的分支进行修改和补充一些测试用例～

LadyChatterleyLover commented 2 years ago

亲，过两天我把每个组件的测试单独抽出来提pr哈，之前那个到时候我把它关了

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

@LadyChatterleyLover 你另一个pr提出了一些问题～

要是有时间辛苦在跟进一波

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

LadyChatterleyLover commented 2 years ago

好的，那就麻烦了哈，

发自我的iPhone

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

@LadyChatterleyLover 同学考虑到你最近比较忙，我这边也要加快一下进度就不等你了，我会直接基于你的分支进行修改和补充一些测试用例～

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

yuanmeda commented 2 years ago

认领 calendar、cascader 单元测试

anlyyao commented 2 years ago

@isanxia hello 同学， Tdesign这边正在统计贡献者信息发放邮件和周边，由于您没有预留邮箱，我们运营同学联系不上您，方便告知下Email吗？

anlyyao commented 2 years ago

感谢大家的贡献，目前测试覆盖率工作已圆满完成 🎉🎉

后续我将统计测试覆盖率数据以及统一生成徽标，官网预计11.14更新。

PS：TDesign周边会尽快发放到各问手上，可以自行关注下Github上预留的📮！！

anlyyao commented 2 years ago

@isanxia 同学一直没等到您回复，我这边先关闭issue了。等你回复后，我们在重新补发周边给你～～

engvuchen commented 1 year ago

认领 footer

Tencent / tdesign-mobile-vue