|
|
@@ -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测试架构,清理重复测试文件 |
|