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

• Button test(button): add test cases of button #710
• Divider test(divider): merged test cases for the divider component and optimized #735
• Fab
• Layout test(layout): optimized the unit tests for the layout component #749
• Link test(link): add test cases of link #709

导航 8

• BackTop test(back-top): add test case for back-top #791
• Drawer test(drawer): add unit test #767
• Indexes
• NavBar test(navbar): add navbar test #863
• SideBar feat:【SideBar】测试覆盖提升与组件功能自查 #776
• Steps fix(steps): inconsistent rendering between string and number when the props of 'current' is a string #761
• TabBar test(TabBar): add unit test #819
• Tabs test(tabs): add tabs test #864

输入 17

• Calendar test(Calendar): add unit test #755
• Cascader
• Checkbox test(Checkbox): add checkbox test #748
• ColorPicker test(color-picker): add ColorPicker tests #783
• DateTimePicker test(date-time-picker): boost coverage #806
• Form
• Input feat: add input test #768
• Picker
• Radio test(Radio): add unit test #736
• Rate feat(test): 新增 Rate 相关组件测试，优化提示框逻辑与安全访问 #754
• Search test(search): add search test #784
• Slider test(slider): add slider test #787
• Stepper
• Switch Test: switch test #744
• Textarea test(Textarea): add textarea test #745
• TreeSelect 为tree-select补充测试用例 #778
• Upload test:为【Upload】测试覆盖提升与组件功能自查 #807

数据展示 19

• Avatar test(avatar): improve tests & correct styles #747
• Badge test(badge): add badge test #730
• Cell test(cell): add cell test #737
• Collapse
• CountDown test(count-down): add count-down test (#697) #781
• Empty test(empty): empty组件单元测试 #729
• Footer update footer test case #727
• Grid
• Image 更新Image组件示例对齐 #769
• ImageViewer test:为【ImageViewer】测试覆盖提升与组件功能自查 #808
• List test(list): add list test #790
• Progress test(Progress): add unit test #728
• QRCode test(Qrcode): add qrcode's unit test #731
• Result Test: Result test #743
• Skeleton test(Skeleton): add unit test #726
• Sticky
• Swiper test(Swiper): improve test coverage #803
• Table test(table): add table test #751
• Tag test: update tag test case #788

消息提醒 13

• ActionSheet test(action-sheet): add action-sheet test #789 feat:【ActionSheet】测试覆盖提升与组件功能自查 #777
• Dialog test(dialog): add dialog test #780
• DropdownMenu test(DropdownMenu): add test #762
• Guide test(Guide): improve test coverage #805
• Loading test(Loading): add unit test #724
• Message feat(Message): add unit test and fix problems #779
• NoticeBar
• Overlay test(overlay): add overlay test #741
• Popover test(Popover): add test for Popover (#697) #782
• Popup test(Popup): add unit test (#697) #732
• PullDownRefresh test(pull-down-refresh): add pull-down-refresh test #774
• SwipeCell test(SwipeCell): improve test coverage #810
• Toast test(toast): add test cases of toast and update generate-coverage script #705 test(Toast): use vi.useFakeTimers() #734

[github-actions]

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

[novlan1]

我来负责 Toast 组件

[SinzoL]

我来负责 Popup 组件

[Boomkaa]

我来负责 Link、Button组件

[MeoRinLime]

我来负责 QRCode组件

[novlan1]

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

[byq1213]

我来负责 Image 组件

[anlyyao]

认领 loading