Просмотр исходного кода

📚 docs(testing): 添加使用共享测试工具处理复杂组件的规范

在测试策略文档中添加第7个规范,强调对于复杂的UI组件(如Radix UI Select),应使用共享UI包中的测试工具函数,而不是直接操作DOM元素。

规范内容包括:
- 正确和错误的示例对比
- 共享UI包测试工具的功能介绍
- 使用completeRadixSelectFlow处理Radix UI Select组件的示例

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 1 неделя назад
Родитель
Сommit
a3df39f1fc
1 измененных файлов с 31 добавлено и 1 удалено
  1. 31 1
      docs/architecture/testing-strategy.md

+ 31 - 1
docs/architecture/testing-strategy.md

@@ -3,6 +3,7 @@
 ## 版本信息
 | 版本 | 日期 | 描述 | 作者 |
 |------|------|------|------|
+| 2.10 | 2025-12-12 | 添加使用共享测试工具处理复杂组件的规范 | James (Claude Code) |
 | 2.9 | 2025-12-12 | 添加测试用例编写规范,基于订单管理集成测试经验 | James (Claude Code) |
 | 2.8 | 2025-11-11 | 更新包测试结构,添加模块化包测试策略 | Winston |
 | 2.7 | 2025-11-09 | 更新为monorepo测试架构,清理重复测试文件 | James |
@@ -531,7 +532,35 @@ it('应该成功创建订单并绑定人员', async () => {
 });
 ```
 
-#### 7. 清理调试信息
+#### 7. 使用共享测试工具处理复杂组件
+**原则**: 对于复杂的UI组件(如Radix UI Select),应使用共享UI包中的测试工具函数,而不是直接操作DOM元素。
+
+**示例**:
+```typescript
+// ❌ 避免:直接操作Radix UI Select组件的DOM元素
+const selectButton = screen.getByTestId('platform-selector-create');
+await userEvent.click(selectButton);
+const hiddenSelect = document.querySelector('select[data-radix-select-viewport]');
+await userEvent.selectOptions(hiddenSelect, '1');
+
+// ✅ 推荐:使用共享UI包的测试工具函数
+import { completeRadixSelectFlow } from '@d8d/shared-ui-components/tests/utils';
+
+// 处理Radix UI Select组件的完整选择流程
+await completeRadixSelectFlow('platform-selector-create', '1', { useFireEvent: true });
+await completeRadixSelectFlow('company-selector-create', '1', { useFireEvent: true });
+await completeRadixSelectFlow('channel-selector-create', '1', { useFireEvent: true });
+```
+
+**注意**: 共享UI包的测试工具提供了以下功能:
+- `completeRadixSelectFlow`: 完整的Radix UI Select选择流程
+- `findHiddenSelectElement`: 查找隐藏的select元素
+- `selectRadixOption`: 选择Radix UI Select选项
+- `waitForRadixSelectEnabled`: 等待Select组件启用
+
+这些工具封装了复杂的DOM操作逻辑,提高了测试代码的可维护性和可读性。
+
+#### 8. 清理调试信息
 **原则**: 提交代码前应移除不必要的调试信息(console.log、console.debug)。
 
 **示例**:
@@ -577,6 +606,7 @@ console.debug('所有test ID:', allElements.map(el => el.getAttribute('data-test
 ### 更新日志
 | 日期 | 版本 | 描述 |
 |------|------|------|
+| 2025-12-12 | 2.10 | 添加使用共享测试工具处理复杂组件的规范 |
 | 2025-12-12 | 2.9 | 添加测试用例编写规范,基于订单管理集成测试经验 |
 | 2025-11-11 | 2.8 | 更新包测试结构,添加模块化包测试策略 |
 | 2025-11-09 | 2.7 | 更新为monorepo测试架构,清理重复测试文件 |