Переглянути джерело

docs(architecture): 更新UI包开发规范,添加Radix UI组件测试修复说明

- 添加Radix UI组件测试环境修复规范(基于故事008.007经验)
- 添加`scrollIntoView` mock解决Radix UI Select组件测试错误
- 添加Select组件test ID规范,避免文本查找冲突
- 更新版本信息到1.1

🤖 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 4 днів тому
батько
коміт
bf89358250
1 змінених файлів з 43 додано та 0 видалено
  1. 43 0
      docs/architecture/ui-package-standards.md

+ 43 - 0
docs/architecture/ui-package-standards.md

@@ -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