修复取消原因对话框点击测试问题

- 为取消原因选项添加test ID便于测试查询
- 降低最小字符要求从5个到2个字符，使所有预定义原因都能通过验证
- 更新测试使用test ID精确查询元素
- 验证所有预定义原因点击和提交功能正常工作

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>

mini/src/components/common/CancelReasonDialog/index.tsx

@@ -70,8 +70,8 @@ export default function CancelReasonDialog({
       return
     }
 
-    if (trimmedReason.length < 5) {
-      setError('取消原因至少需要5个字符')
+    if (trimmedReason.length < 2) {
+      setError('取消原因至少需要2个字符')
       return
     }
 
@@ -120,6 +120,7 @@ export default function CancelReasonDialog({
             {CANCEL_REASONS.map((reasonText) => (
               <div
                 key={reasonText}
+                data-testid={`cancel-reason-${reasonText}`}
                 className={`px-3 py-2 rounded border cursor-pointer transition-colors ${
                   selectedReason === reasonText
                     ? 'border-primary bg-primary/10'
@@ -164,7 +165,7 @@ export default function CancelReasonDialog({
           <Button variant="outline" onClick={handleCancel} disabled={loading}>
             取消
           </Button>
-          <Button onClick={handleConfirm} disabled={loading}>
+          <Button onClick={handleConfirm} disabled={loading} data-testid="confirm-cancel-button">
             {loading ? '提交中...' : '确认取消'}
           </Button>
         </DialogFooter>

mini/tests/unit/components/common/CancelReasonDialog.test.tsx

@@ -35,21 +35,31 @@ describe('CancelReasonDialog', () => {
     expect(queryByText('取消订单')).toBeNull()
   })
 
-  it('应该选择预定义原因当点击时', () => {
-    const { getByText } = render(<CancelReasonDialog {...defaultProps} />)
+  it.each([
+    '我不想买了',
+    '信息填写错误，重新下单',
+    '商家缺货',
+    '价格不合适',
+    '其他原因'
+  ])('应该选择预定义原因 %s 当点击时', (reason) => {
+    const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
+
+    const reasonOption = getByTestId(`cancel-reason-${reason}`)
+    fireEvent.click(reasonOption)
 
-    // 检查对话框基本渲染
-    expect(getByText('取消订单')).toBeTruthy()
-    expect(getByText('请选择或填写取消原因，这将帮助我们改进服务')).toBeTruthy()
+    const confirmButton = getByTestId('confirm-cancel-button')
+    fireEvent.click(confirmButton)
+
+    expect(defaultProps.onConfirm).toHaveBeenCalledWith(reason)
   })
 
   it('应该调用onConfirm当确认按钮被点击时', () => {
-    const { getByText } = render(<CancelReasonDialog {...defaultProps} />)
+    const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
 
-    const reasonOption = getByText('我不想买了')
+    const reasonOption = getByTestId('cancel-reason-我不想买了')
     fireEvent.click(reasonOption)
 
-    const confirmButton = getByText('确认取消')
+    const confirmButton = getByTestId('confirm-cancel-button')
     fireEvent.click(confirmButton)
 
     expect(defaultProps.onConfirm).toHaveBeenCalledWith('我不想买了')
@@ -65,9 +75,9 @@ describe('CancelReasonDialog', () => {
   })
 
   it('应该显示错误当确认空原因时', () => {
-    const { getByText, getByRole } = render(<CancelReasonDialog {...defaultProps} />)
+    const { getByTestId, getByText } = render(<CancelReasonDialog {...defaultProps} />)
 
-    const confirmButton = getByText('确认取消')
+    const confirmButton = getByTestId('confirm-cancel-button')
     fireEvent.click(confirmButton)
 
     // 使用更精确的查询方式查找错误消息
@@ -77,14 +87,14 @@ describe('CancelReasonDialog', () => {
   })
 
   it('应该显示错误当原因超过200字符时', () => {
-    const { getByPlaceholderText, getByText } = render(
+    const { getByPlaceholderText, getByTestId, getByText } = render(
       <CancelReasonDialog {...defaultProps} />
     )
 
     const input = getByPlaceholderText('请输入其他取消原因...')
     fireEvent.input(input, { target: { value: 'a'.repeat(201) } })
 
-    const confirmButton = getByText('确认取消')
+    const confirmButton = getByTestId('confirm-cancel-button')
     fireEvent.click(confirmButton)
 
     const errorMessage = getByText('取消原因不能超过200个字符')
@@ -93,34 +103,35 @@ describe('CancelReasonDialog', () => {
   })
 
   it('应该处理自定义原因输入', () => {
-    const { getByPlaceholderText, getByText } = render(
+    const { getByPlaceholderText, getByTestId } = render(
       <CancelReasonDialog {...defaultProps} />
     )
 
     const input = getByPlaceholderText('请输入其他取消原因...')
     fireEvent.input(input, { target: { value: '自定义取消原因' } })
 
-    const confirmButton = getByText('确认取消')
+    const confirmButton = getByTestId('confirm-cancel-button')
     fireEvent.click(confirmButton)
 
     expect(defaultProps.onConfirm).toHaveBeenCalledWith('自定义取消原因')
   })
 
   it('应该显示加载状态当loading为true时', () => {
-    const { getByText } = render(
+    const { getByTestId } = render(
       <CancelReasonDialog {...defaultProps} loading={true} />
     )
 
-    expect(getByText('提交中...')).toBeTruthy()
+    const confirmButton = getByTestId('confirm-cancel-button')
+    expect(confirmButton).toHaveTextContent('提交中...')
   })
 
   it('应该禁用按钮当loading为true时', () => {
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <CancelReasonDialog {...defaultProps} loading={true} />
     )
 
     const cancelButton = getByText('取消')
-    const confirmButton = getByText('提交中...')
+    const confirmButton = getByTestId('confirm-cancel-button')
 
     // 检查按钮是否被禁用
     expect(cancelButton).toBeTruthy()
@@ -128,11 +139,11 @@ describe('CancelReasonDialog', () => {
   })
 
   it('应该重置状态当对话框关闭时', () => {
-    const { getByText, rerender } = render(
+    const { getByTestId, getByText, rerender } = render(
       <CancelReasonDialog {...defaultProps} />
     )
 
-    const reasonOption = getByText('我不想买了')
+    const reasonOption = getByTestId('cancel-reason-我不想买了')
     fireEvent.click(reasonOption)
 
     // 重新渲染关闭的对话框
@@ -142,7 +153,7 @@ describe('CancelReasonDialog', () => {
     rerender(<CancelReasonDialog {...defaultProps} open={true} />)
 
     // 检查状态是否重置 - 直接点击确认按钮应该显示错误
-    const confirmButton = getByText('确认取消')
+    const confirmButton = getByTestId('confirm-cancel-button')
     fireEvent.click(confirmButton)
 
     const errorMessage = getByText('请输入取消原因')