mobile-react 测试覆盖率提升与组件功能自查 #697
Description
目前正在推进 tdesign-mobile-react 的组件库的测试覆盖率提升、组件 API 功能自查和组件示例视觉还原走查。
组件库概况
- 组件数：63
任务说明
具体有以下 3 个点：
1. 测试覆盖率提升
标准如下
- 行覆盖率达 95%+
- 分支覆盖率 95%+
- 语句覆盖率 95%+
- 有交互的组件，需要覆盖所有场景，要求函数覆盖率 95+%
2. 组件 API 功能自查
- Mobile React 正处于快速迭代阶段，组件 API 功能存在不稳定性或者功能实现有误，需对每个组件功能点撰写单元测试，进行功能自查然后修复
3. 组件示例视觉还原自查
- 对齐视觉
如何开始？
认领任务
认领方式：直接评论 “我来负责 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 button4. 查看单元测试覆盖率
确认测试用例通过后，可通过命令行，查看测试覆盖率。
红色部分表示完全没有覆盖的语句，黄色表示分支未覆盖，绿色表示覆盖，绿色的文字表示执行的次数
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
- Drawer test(drawer): add unit test #767
- Indexes
- NavBar
- SideBar
- Steps fix(steps): inconsistent rendering between string and number when the props of 'current' is a string #761
- TabBar
- Tabs
输入 17
- Calendar test(Calendar): add unit test #755
- Cascader
- Checkbox test(Checkbox): add checkbox test #748
- ColorPicker
- DateTimePicker
- Form
- Input feat: add input test #768
- Picker
- Radio test(Radio): add unit test #736
- Rate feat(test): 新增 Rate 相关组件测试，优化提示框逻辑与安全访问 #754
- Search
- Slider
- Stepper
- Switch Test: switch test #744
- Textarea test(Textarea): add textarea test #745
- TreeSelect
- Upload
数据展示 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
- List
- 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
- Table test(table): add table test #751
- Tag
消息提醒 13
- ActionSheet
- Dialog
- DropdownMenu test(DropdownMenu): add test #762
- Guide
- 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
- Popup test(Popup): add unit test (#697) #732
- PullDownRefresh test(pull-down-refresh): add pull-down-refresh test #774
- SwipeCell
- Toast test(toast): add test cases of toast and update generate-coverage script #705 test(Toast): use vi.useFakeTimers() #734