Home Explore Help
Register Sign In
186-template-175
/
mini-starter
forked from 155-template-138/mini-starter
2
0
Fork 0
Files
Browse Source

改进取消原因对话框测试和异步状态处理

- 添加异步等待确保状态更新完成
- 添加用户实际点击流程测试
- 验证选中状态在异步操作中的正确性
- 所有18个测试全部通过

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 3 weeks ago
parent
b9b5d7f9bd
commit
edeff5d7cd
2 changed files with 91 additions and 19 deletions
Unified View Show Diff Stats
  1. 34 0
      mini/test-cancel-dialog.html
  2. 57 19
      mini/tests/unit/components/common/CancelReasonDialog.test.tsx

+ 34 - 0
mini/test-cancel-dialog.html
View File 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <title>测试取消原因对话框</title>
 
+    <style>
 
+        body { font-family: Arial, sans-serif; padding: 20px; }
 
+        button { padding: 10px 20px; margin: 10px; cursor: pointer; }
 
+        .debug { background: #f0f0f0; padding: 10px; margin: 10px 0; border-radius: 5px; }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>测试取消原因对话框</h1>
 
+    <button onclick="openDialog()">打开取消原因对话框</button>
 
+
 
+    <div class="debug">
 
+        <h3>调试信息：</h3>
 
+        <div id="debug-info"></div>
 
+    </div>
 
+
 
+    <script>
 
+        function openDialog() {
 
+            // 模拟打开对话框
 
+            const debugInfo = document.getElementById('debug-info');
 
+            debugInfo.innerHTML = '对话框已打开，请检查浏览器控制台查看详细调试信息';
 
+
 
+            // 这里无法直接测试React组件，但可以检查是否有其他问题
 
+            console.log('测试：请在实际应用中测试取消原因对话框');
 
+            console.log('检查：1. 点击原因选项是否有选中状态');
 
+            console.log('检查：2. 点击确认按钮是否调用onConfirm');
 
+            console.log('检查：3. 选中状态是否正确显示');
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 57 - 19
mini/tests/unit/components/common/CancelReasonDialog.test.tsx
View File 

@@ -1,4 +1,4 @@
 
-import { render, fireEvent } from '@testing-library/react'
 
+import { render, fireEvent, waitFor } from '@testing-library/react'
 
 import { mockShowToast } from '~/__mocks__/taroMock'
 
 import { mockShowToast } from '~/__mocks__/taroMock'
 
 import CancelReasonDialog from '@/components/common/CancelReasonDialog'
 
 import CancelReasonDialog from '@/components/common/CancelReasonDialog'
 
 
 
@@ -41,60 +41,98 @@ describe('CancelReasonDialog', () => {
 
     '商家缺货',
 
     '商家缺货',
 
     '价格不合适',
 
     '价格不合适',
 
     '其他原因'
 
     '其他原因'
 
-  ])('应该选择预定义原因 %s 当点击时', (reason) => {
 
+  ])('应该选择预定义原因 %s 当点击时', async (reason) => {
 
     const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
 
     const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
 
 
 
     const reasonOption = getByTestId(`cancel-reason-${reason}`)
 
     const reasonOption = getByTestId(`cancel-reason-${reason}`)
 
     fireEvent.click(reasonOption)
 
     fireEvent.click(reasonOption)
 
 
 
+    // 等待状态更新完成
 
+    await waitFor(() => {
 
+      expect(reasonOption).toHaveClass('border-primary')
 
+    })
 
+
 
     const confirmButton = getByTestId('confirm-cancel-button')
 
     const confirmButton = getByTestId('confirm-cancel-button')
 
     fireEvent.click(confirmButton)
 
     fireEvent.click(confirmButton)
 
 
 
     expect(defaultProps.onConfirm).toHaveBeenCalledWith(reason)
 
     expect(defaultProps.onConfirm).toHaveBeenCalledWith(reason)
 
   })
 
   })
 
 
 
-  it('应该显示选中状态当点击预定义原因时', () => {
 
+  it('应该显示选中状态当点击预定义原因时', async () => {
 
     const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
 
     const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
 
 
 
     // 点击第一个原因
 
     // 点击第一个原因
 
     const firstReason = getByTestId('cancel-reason-我不想买了')
 
     const firstReason = getByTestId('cancel-reason-我不想买了')
 
     fireEvent.click(firstReason)
 
     fireEvent.click(firstReason)
 
 
 
-    // 验证选中状态样式
 
-    expect(firstReason).toHaveClass('border-primary')
 
-    expect(firstReason).toHaveClass('bg-primary/10')
 
+    // 等待状态更新完成
 
+    await waitFor(() => {
 
+      // 验证选中状态样式
 
+      expect(firstReason).toHaveClass('border-primary')
 
+      expect(firstReason).toHaveClass('bg-primary/10')
 
+    })
 
 
 
     // 点击第二个原因，第一个应该取消选中
 
     // 点击第二个原因，第一个应该取消选中
 
     const secondReason = getByTestId('cancel-reason-信息填写错误，重新下单')
 
     const secondReason = getByTestId('cancel-reason-信息填写错误，重新下单')
 
     fireEvent.click(secondReason)
 
     fireEvent.click(secondReason)
 
 
 
-    // 第一个原因应该不再有选中状态
 
-    expect(firstReason).not.toHaveClass('border-primary')
 
-    expect(firstReason).not.toHaveClass('bg-primary/10')
 
+    // 等待状态更新完成
 
+    await waitFor(() => {
 
+      // 第一个原因应该不再有选中状态
 
+      expect(firstReason).not.toHaveClass('border-primary')
 
+      expect(firstReason).not.toHaveClass('bg-primary/10')
 
 
 
-    // 第二个原因应该有选中状态
 
-    expect(secondReason).toHaveClass('border-primary')
 
-    expect(secondReason).toHaveClass('bg-primary/10')
 
+      // 第二个原因应该有选中状态
 
+      expect(secondReason).toHaveClass('border-primary')
 
+      expect(secondReason).toHaveClass('bg-primary/10')
 
+    })
 
   })
 
   })
 
 
 
-  it('应该清除预定义原因选中状态当输入自定义原因时', () => {
 
+  it('应该清除预定义原因选中状态当输入自定义原因时', async () => {
 
     const { getByTestId, getByPlaceholderText } = render(<CancelReasonDialog {...defaultProps} />)
 
     const { getByTestId, getByPlaceholderText } = render(<CancelReasonDialog {...defaultProps} />)
 
 
 
     // 先点击一个预定义原因
 
     // 先点击一个预定义原因
 
     const reasonOption = getByTestId('cancel-reason-我不想买了')
 
     const reasonOption = getByTestId('cancel-reason-我不想买了')
 
     fireEvent.click(reasonOption)
 
     fireEvent.click(reasonOption)
 
 
 
-    // 验证有选中状态
 
-    expect(reasonOption).toHaveClass('border-primary')
 
-    expect(reasonOption).toHaveClass('bg-primary/10')
 
+    // 等待选中状态更新
 
+    await waitFor(() => {
 
+      // 验证有选中状态
 
+      expect(reasonOption).toHaveClass('border-primary')
 
+      expect(reasonOption).toHaveClass('bg-primary/10')
 
+    })
 
 
 
     // 输入自定义原因
 
     // 输入自定义原因
 
     const input = getByPlaceholderText('请输入其他取消原因...')
 
     const input = getByPlaceholderText('请输入其他取消原因...')
 
     fireEvent.input(input, { target: { value: '自定义取消原因' } })
 
     fireEvent.input(input, { target: { value: '自定义取消原因' } })
 
 
 
-    // 预定义原因的选中状态应该被清除
 
-    expect(reasonOption).not.toHaveClass('border-primary')
 
-    expect(reasonOption).not.toHaveClass('bg-primary/10')
 
+    // 等待选中状态清除
 
+    await waitFor(() => {
 
+      // 预定义原因的选中状态应该被清除
 
+      expect(reasonOption).not.toHaveClass('border-primary')
 
+      expect(reasonOption).not.toHaveClass('bg-primary/10')
 
+    })
 
+  })
 
+
 
+  it('应该模拟用户实际点击流程', async () => {
 
+    const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
 
+
 
+    // 点击一个原因
 
+    const reasonOption = getByTestId('cancel-reason-商家缺货')
 
+    fireEvent.click(reasonOption)
 
+
 
+    // 等待选中状态
 
+    await waitFor(() => {
 
+      expect(reasonOption).toHaveClass('border-primary')
 
+      expect(reasonOption).toHaveClass('bg-primary/10')
 
+    })
 
+
 
+    // 立即点击确认按钮
 
+    const confirmButton = getByTestId('confirm-cancel-button')
 
+    fireEvent.click(confirmButton)
 
+
 
+    // 应该成功调用onConfirm
 
+    expect(defaultProps.onConfirm).toHaveBeenCalledWith('商家缺货')
 
   })
 
   })
 
 
 
   it('应该调用onConfirm当确认按钮被点击时', () => {
 
   it('应该调用onConfirm当确认按钮被点击时', () => {