|
|
@@ -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 CancelReasonDialog from '@/components/common/CancelReasonDialog'
|
|
|
|
|
|
@@ -41,60 +41,98 @@ describe('CancelReasonDialog', () => {
|
|
|
'商家缺货',
|
|
|
'价格不合适',
|
|
|
'其他原因'
|
|
|
- ])('应该选择预定义原因 %s 当点击时', (reason) => {
|
|
|
+ ])('应该选择预定义原因 %s 当点击时', async (reason) => {
|
|
|
const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
|
|
|
|
|
|
const reasonOption = getByTestId(`cancel-reason-${reason}`)
|
|
|
fireEvent.click(reasonOption)
|
|
|
|
|
|
+ // 等待状态更新完成
|
|
|
+ await waitFor(() => {
|
|
|
+ expect(reasonOption).toHaveClass('border-primary')
|
|
|
+ })
|
|
|
+
|
|
|
const confirmButton = getByTestId('confirm-cancel-button')
|
|
|
fireEvent.click(confirmButton)
|
|
|
|
|
|
expect(defaultProps.onConfirm).toHaveBeenCalledWith(reason)
|
|
|
})
|
|
|
|
|
|
- it('应该显示选中状态当点击预定义原因时', () => {
|
|
|
+ it('应该显示选中状态当点击预定义原因时', async () => {
|
|
|
const { getByTestId } = render(<CancelReasonDialog {...defaultProps} />)
|
|
|
|
|
|
// 点击第一个原因
|
|
|
const firstReason = getByTestId('cancel-reason-我不想买了')
|
|
|
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-信息填写错误，重新下单')
|
|
|
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 reasonOption = getByTestId('cancel-reason-我不想买了')
|
|
|
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('请输入其他取消原因...')
|
|
|
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当确认按钮被点击时', () => {
|
yourname