|
|
@@ -3,6 +3,7 @@
|
|
|
## 版本信息
|
|
|
| 版本 | 日期 | 描述 | 作者 |
|
|
|
|------|------|------|------|
|
|
|
+| 1.1 | 2025-12-04 | 添加Radix UI组件测试环境修复规范(基于故事008.007经验) | James |
|
|
|
| 1.0 | 2025-12-03 | 基于史诗008经验创建UI包规范 | Claude Code |
|
|
|
|
|
|
## 概述
|
|
|
@@ -468,6 +469,48 @@ data-testid="edit-channel-button-1"
|
|
|
data-testid="delete-confirm-dialog-title"
|
|
|
```
|
|
|
|
|
|
+#### 4. Radix UI组件测试环境修复(基于故事008.007经验)
|
|
|
+**规范**:在测试环境中使用Radix UI组件(特别是Select、DropdownMenu等)时,必须添加必要的DOM API mock。
|
|
|
+
|
|
|
+**问题**:Radix UI组件在测试环境中可能缺少某些DOM API(如`scrollIntoView`),导致测试失败。
|
|
|
+
|
|
|
+**解决方案**:在测试setup文件中添加必要的mock。
|
|
|
+
|
|
|
+```typescript
|
|
|
+// tests/setup.ts
|
|
|
+import '@testing-library/jest-dom';
|
|
|
+import { vi } from 'vitest';
|
|
|
+
|
|
|
+// Mock sonner
|
|
|
+vi.mock('sonner', () => ({
|
|
|
+ toast: {
|
|
|
+ success: vi.fn(),
|
|
|
+ error: vi.fn(),
|
|
|
+ warning: vi.fn(),
|
|
|
+ info: vi.fn()
|
|
|
+ }
|
|
|
+}));
|
|
|
+
|
|
|
+// Mock scrollIntoView for Radix UI components
|
|
|
+Element.prototype.scrollIntoView = vi.fn();
|
|
|
+```
|
|
|
+
|
|
|
+**Select组件test ID规范**:为Radix UI Select组件的选项添加test ID,避免文本查找冲突。
|
|
|
+
|
|
|
+```typescript
|
|
|
+// 在组件中为SelectItem添加test ID
|
|
|
+<SelectContent>
|
|
|
+ <SelectItem value="all" data-testid="order-status-option-all">全部状态</SelectItem>
|
|
|
+ <SelectItem value={OrderStatus.DRAFT} data-testid="order-status-option-draft">草稿</SelectItem>
|
|
|
+ <SelectItem value={OrderStatus.CONFIRMED} data-testid="order-status-option-confirmed">已确认</SelectItem>
|
|
|
+</SelectContent>
|
|
|
+
|
|
|
+// 在测试中使用test ID查找Select选项
|
|
|
+expect(screen.getByTestId('order-status-option-all')).toBeInTheDocument();
|
|
|
+expect(screen.getByTestId('order-status-option-draft')).toBeInTheDocument();
|
|
|
+expect(screen.getByTestId('order-status-option-confirmed')).toBeInTheDocument();
|
|
|
+```
|
|
|
+
|
|
|
### 组件集成测试
|
|
|
```typescript
|
|
|
// tests/integration/<component-name>.integration.test.tsx
|