Преглед изворни кода

✅ test(goods-detail): 移除模拟组件并更新集成测试断言

- 移除对GoodsSpecSelector组件的模拟,改为使用真实组件进行测试
- 更新规格选择弹窗的测试断言,使用真实组件渲染的文本内容进行验证
- 添加异步等待逻辑以确保真实组件加载完成
yourname пре 1 месец
родитељ
комит
08c30b98ef
1 измењених фајлова са 9 додато и 28 уклоњено
  1. 9 28
      mini/tests/unit/pages/goods-detail/goods-detail.test.tsx

+ 9 - 28
mini/tests/unit/pages/goods-detail/goods-detail.test.tsx

@@ -94,30 +94,8 @@ jest.mock('@/components/ui/carousel', () => ({
   )
 }))
 
-// Mock GoodsSpecSelector组件
-jest.mock('@/components/goods-spec-selector', () => ({
-  GoodsSpecSelector: ({ visible, onClose, onConfirm, parentGoodsId, currentSpec, currentQuantity }: any) => {
-    if (!visible) return null
-    return (
-      <div className="spec-modal" data-testid="spec-modal">
-        <div className="spec-modal-content">
-          <div className="spec-modal-header">
-            <span>选择规格</span>
-            <div className="spec-modal-close" onClick={onClose}>×</div>
-          </div>
-          <div className="spec-options">
-            <div className="spec-option" data-testid="spec-option-red" onClick={() => onConfirm({ id: 101, name: '红色款', price: 299, stock: 50 }, 1)}>
-              红色款
-            </div>
-            <div className="spec-option" data-testid="spec-option-blue" onClick={() => onConfirm({ id: 102, name: '蓝色款', price: 319, stock: 30 }, 1)}>
-              蓝色款
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}))
+// 使用真实的GoodsSpecSelector组件,不模拟
+// jest.mock('@/components/goods-spec-selector', () => ({ ... })) 已移除
 
 const createTestQueryClient = () => new QueryClient({
   defaultOptions: {
@@ -228,10 +206,13 @@ describe('GoodsDetailPage集成测试', () => {
     const specButton = screen.getByText('选择规格')
     fireEvent.click(specButton)
 
-    // 验证规格选择弹窗显示
-    expect(screen.getByTestId('spec-modal')).toBeInTheDocument()
-    expect(screen.getByTestId('spec-option-red')).toBeInTheDocument()
-    expect(screen.getByTestId('spec-option-blue')).toBeInTheDocument()
+    // 验证规格选择弹窗显示 - 使用真实组件的类名和文本
+    // 等待组件加载完成(API mock立即返回数据)
+    await waitFor(() => {
+      expect(screen.getByText('选择规格')).toBeInTheDocument()
+    })
+    expect(screen.getByText('红色款')).toBeInTheDocument()
+    expect(screen.getByText('蓝色款')).toBeInTheDocument()
   })
 
   it('选择规格后更新显示', async () => {