mobile-react 测试覆盖率提升与组件功能自查

[anlyyao]

目前正在推进 tdesign-mobile-react 的组件库的测试覆盖率提升、组件 API 功能自查和组件示例视觉还原走查。

组件库概况

• 组件数：63

任务说明

具体有以下 3 个点：

1. 测试覆盖率提升

标准如下

• 行覆盖率达 95%+
• 分支覆盖率 95%+
• 语句覆盖率 95%+
• 有交互的组件，需要覆盖所有场景，要求函数覆盖率 95+%

2. 组件 API 功能自查

• Mobile React 正处于快速迭代阶段，组件 API 功能存在不稳定性或者功能实现有误，需对每个组件功能点撰写单元测试，进行功能自查然后修复

3. 组件示例视觉还原自查

figma 地址：https://www.figma.com/design/jivYXTMTP3jEkeZXWbMh4J/branch/4SdclZkcv5bPgX6pa8AsmI/TDesign-for-mobile?node-id=750-23479&p=f&m=dev

• 对齐视觉

如何开始？

认领任务

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

单元测试

Tips

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

1. 创建单元测试文件 and 文件命名规则

• 测试文件统一放置在对应组件目录下的 __tests__ 文件夹中。
• 命名规则：
  • 组件测试文件：[组件名].test.tsx，例如 form.test.tsx。
  • 多子组件场景：每个子组件单独编写测试文件，例如 form.test.tsx 和 form-item.test.tsx。
  • 组件内部 hooks 测试文件：[组件名].hooks.test.tsx，例如 form.hooks.test.tsx。
  • 组件内部 utils 测试文件：同 hooks 规则，例如 form.utils.test.tsx。

2. 编写单元测试

单元测试应覆盖组件以下内容：

• 组件本身的功能和行为。
• 组件内部的 hooks（自定义 Hook）。
• 组件内部的 utils（工具函数）。

组件测试文件按照 props、events、slots 进行，格式如下：

describe('DropdownMenu', () => {
  describe('props', () => {
    it(':style', () => {})
  })
  describe('event', () => {
      it(':click', () => {})
    })
  describe('slots', () => {
      it(':default', () => {})
    })
})

可参考：https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/badge/tests/index.test.tsx

3. 检测测试用例

如果写的是 Button 组件的测试用例，可通过命令行，单独执行 Button 组件的测试用例，减少运行时间，如下所示。

npm run test:unit button

4. 查看单元测试覆盖率

确认测试用例通过后，可通过命令行，查看测试覆盖率。

红色部分表示完全没有覆盖的语句，黄色表示分支未覆盖，绿色表示覆盖，绿色的文字表示执行的次数

npm run test:unit-gui
npm run test:unit-gui button --coverage  //指定组件

5. 现有测试用例的优化

• 已有部分测试用例的组件，在补充新用例的同时，辛苦顺便对现有测试用例进行优化一下
• 优化内容包括但不限于：
  • 补充遗漏的分支和函数调用。
  • 按照上述命名和存放规范调整测试文件结构。
  • 提升测试用例的可读性和覆盖率。

6. 更新组件测试覆盖率徽标

npm run generate:coverage-badge

提交代码

恭喜你，成功完成一份单元测试，往更专业的前端更进一步!!

如果更新了组件 demo，需要更新 snapshot

npm run test:demo
npm run test:snap-update

激励

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

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

具体进展

基础 5

• [x] Button #710
• [x] Divider #735
• [ ] Fab
• [x] Layout #749
• [x] Link #709

导航 8

• [ ] BackTop
• [x] Drawer #767
• [ ] Indexes
• [ ] NavBar
• [x] SideBar #776
• [x] Steps #761
• [x] TabBar #819
• [ ] Tabs

输入 17

• [x] Calendar #755
• [ ] Cascader
• [x] Checkbox #748
• [x] ColorPicker #783
• [x] DateTimePicker #806
• [ ] Form
• [x] Input #768
• [ ] Picker
• [x] Radio #736
• [x] Rate #754
• [ ] Search #784
• [x] Slider #787
• [ ] Stepper
• [x] Switch #744
• [x] Textarea #745
• [ ] TreeSelect #778
• [ ] Upload #807

数据展示 19

• [x] Avatar #747
• [x] Badge #730
• [x] Cell #737
• [ ] Collapse
• [x] CountDown #781
• [x] Empty #729
• [x] Footer #727
• [ ] Grid
• [x] Image #769
• [ ] ImageViewer #808
• [ ] List #790
• [x] Progress #728
• [x] QRCode #731
• [x] Result #743
• [x] Skeleton #726
• [ ] Sticky
• [ ] Swiper #803
• [x] Table #751
• [x] Tag #788

消息提醒 13

• [x] ActionSheet #789 #777
• [ ] Dialog #780
• [x] DropdownMenu #762
• [ ] Guide #805
• [x] Loading #724
• [x] Message #779
• [ ] NoticeBar
• [x] Overlay #741
• [ ] Popover
• [x] Popup #732
• [x] PullDownRefresh #774
• [x] SwipeCell #810
• [x] Toast #705 #734

[github-actions[bot]]

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

[novlan1]

我来负责 Toast 组件

[SinzoL]

我来负责 Popup 组件

[Boomkaa]

我来负责 Link、Button组件

[MeoRinLime]

我来负责 QRCode组件

[novlan1]

Tag、BackTop、Fab、Avatar 、Table组件已有人认领

[byq1213]

我来负责 Image 组件

[anlyyao]

认领 loading

[ZWkang]

认领 Badge

[anlyyao]

认领 skeleton

[anlyyao]

认领 progress

[novlan1]

认领 Footer

[lockiechen]

认领 Empty

[Boomkaa]

我来负责 Textarea 组件

[Cyrios-ykx]

我来负责Radio组件

[SinzoL]

我来负责 CountDown 组件

[ZWkang]

认领 result 、switch

[JustGenius-s]

我来负责 Checkbox 组件

[SinzoL]

我来负责 Popover 组件

[younggglcy]

我来负责 Avatar 组件

[Cyrios-ykx]

我来负责Drawer组件

[ZWkang]

我来负责 Avatar 组件

@younggglcy 上面Avatar看起来已经有人认领啦

[ZWkang]

认领 Navbar

[Boomkaa]

认领 Table

[ZWkang]

认领search、noticebar、navbar、picker、list

[JustGenius-s]

我来负责 PullDownRefresh 组件

[anlyyao]

认领 calendar

[Boomkaa]

认领 Dialog

[xliudaxia]

我来负责 Stepper 组件

[anlyyao]

认领 Form