|
@@ -112,7 +112,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
it('应该完整测试从订单列表到取消订单的完整流程', async () => {
|
|
it('应该完整测试从订单列表到取消订单的完整流程', async () => {
|
|
|
- console.debug('=== 开始取消订单完整流程集成测试 ===')
|
|
|
|
|
|
|
|
|
|
// 1. 渲染订单列表页
|
|
// 1. 渲染订单列表页
|
|
|
render(
|
|
render(
|
|
@@ -126,16 +125,13 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('订单号: ORDER001')).toBeTruthy()
|
|
expect(screen.getByText('订单号: ORDER001')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 订单列表页渲染完成,找到订单卡片')
|
|
|
|
|
|
|
|
|
|
// 3. 找到取消订单按钮 - 使用更精确的选择器
|
|
// 3. 找到取消订单按钮 - 使用更精确的选择器
|
|
|
const cancelButton = screen.getByTestId('cancel-order-button')
|
|
const cancelButton = screen.getByTestId('cancel-order-button')
|
|
|
expect(cancelButton).toBeTruthy()
|
|
expect(cancelButton).toBeTruthy()
|
|
|
- console.debug('✅ 找到取消订单按钮')
|
|
|
|
|
|
|
|
|
|
// 4. 点击取消订单按钮
|
|
// 4. 点击取消订单按钮
|
|
|
fireEvent.click(cancelButton)
|
|
fireEvent.click(cancelButton)
|
|
|
- console.debug('✅ 点击取消订单按钮')
|
|
|
|
|
|
|
|
|
|
// 5. 验证取消原因对话框打开
|
|
// 5. 验证取消原因对话框打开
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -143,7 +139,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('请选择或填写取消原因,这将帮助我们改进服务')).toBeTruthy()
|
|
expect(screen.getByText('请选择或填写取消原因,这将帮助我们改进服务')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 取消原因对话框成功打开')
|
|
|
|
|
|
|
|
|
|
// 6. 验证预定义原因选项显示
|
|
// 6. 验证预定义原因选项显示
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -152,28 +147,23 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(otherReasonOption).toBeTruthy()
|
|
expect(otherReasonOption).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 预定义取消原因选项正确显示')
|
|
|
|
|
|
|
|
|
|
// 7. 点击"其他原因"选项
|
|
// 7. 点击"其他原因"选项
|
|
|
const otherReasonOption = screen.getByTestId('cancel-reason-其他原因')
|
|
const otherReasonOption = screen.getByTestId('cancel-reason-其他原因')
|
|
|
fireEvent.click(otherReasonOption)
|
|
fireEvent.click(otherReasonOption)
|
|
|
- console.debug('✅ 点击取消原因选项: 其他原因')
|
|
|
|
|
|
|
|
|
|
// 8. 等待状态更新,验证选中状态
|
|
// 8. 等待状态更新,验证选中状态
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
|
// 这里应该验证选中状态的CSS类名,但由于测试环境限制,我们验证调试信息
|
|
// 这里应该验证选中状态的CSS类名,但由于测试环境限制,我们验证调试信息
|
|
|
// 调试信息应该在控制台输出
|
|
// 调试信息应该在控制台输出
|
|
|
- console.debug('等待选中状态更新...')
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 9. 验证确认取消按钮可用
|
|
// 9. 验证确认取消按钮可用
|
|
|
const confirmButton = screen.getByTestId('confirm-cancel-button')
|
|
const confirmButton = screen.getByTestId('confirm-cancel-button')
|
|
|
expect(confirmButton).toBeTruthy()
|
|
expect(confirmButton).toBeTruthy()
|
|
|
- console.debug('✅ 找到确认取消按钮')
|
|
|
|
|
|
|
|
|
|
// 10. 点击确认取消按钮
|
|
// 10. 点击确认取消按钮
|
|
|
fireEvent.click(confirmButton)
|
|
fireEvent.click(confirmButton)
|
|
|
- console.debug('✅ 点击确认取消按钮')
|
|
|
|
|
|
|
|
|
|
// 11. 验证确认对话框显示
|
|
// 11. 验证确认对话框显示
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -184,7 +174,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 确认取消对话框正确显示')
|
|
|
|
|
|
|
|
|
|
// 12. 模拟确认对话框确认
|
|
// 12. 模拟确认对话框确认
|
|
|
const modalCall = mockShowModal.mock.calls[0][0]
|
|
const modalCall = mockShowModal.mock.calls[0][0]
|
|
@@ -203,7 +192,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ API调用正确,取消订单请求已发送')
|
|
|
|
|
|
|
|
|
|
// 14. 验证成功提示
|
|
// 14. 验证成功提示
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -214,12 +202,9 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 取消成功提示正确显示')
|
|
|
|
|
- console.debug('=== 取消订单完整流程集成测试完成 ===')
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
it('应该测试取消原因选项的交互和状态更新', async () => {
|
|
it('应该测试取消原因选项的交互和状态更新', async () => {
|
|
|
- console.debug('=== 开始取消原因选项交互和状态更新测试 ===')
|
|
|
|
|
|
|
|
|
|
// 渲染订单列表页
|
|
// 渲染订单列表页
|
|
|
render(
|
|
render(
|
|
@@ -242,7 +227,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('请选择或填写取消原因,这将帮助我们改进服务')).toBeTruthy()
|
|
expect(screen.getByText('请选择或填写取消原因,这将帮助我们改进服务')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 取消原因对话框已打开')
|
|
|
|
|
|
|
|
|
|
// 测试多个选项的点击交互和状态更新
|
|
// 测试多个选项的点击交互和状态更新
|
|
|
const reasons = [
|
|
const reasons = [
|
|
@@ -254,18 +238,15 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
]
|
|
]
|
|
|
|
|
|
|
|
for (const reason of reasons) {
|
|
for (const reason of reasons) {
|
|
|
- console.debug(`测试点击选项: ${reason}`)
|
|
|
|
|
|
|
|
|
|
// 点击选项
|
|
// 点击选项
|
|
|
const reasonOption = screen.getByTestId(`cancel-reason-${reason}`)
|
|
const reasonOption = screen.getByTestId(`cancel-reason-${reason}`)
|
|
|
- console.debug(`找到选项元素:`, reasonOption)
|
|
|
|
|
|
|
|
|
|
// 验证选项元素存在且可点击
|
|
// 验证选项元素存在且可点击
|
|
|
expect(reasonOption).toBeTruthy()
|
|
expect(reasonOption).toBeTruthy()
|
|
|
expect(reasonOption).toHaveAttribute('data-testid', `cancel-reason-${reason}`)
|
|
expect(reasonOption).toHaveAttribute('data-testid', `cancel-reason-${reason}`)
|
|
|
|
|
|
|
|
fireEvent.click(reasonOption)
|
|
fireEvent.click(reasonOption)
|
|
|
- console.debug(`✅ 点击选项: ${reason}`)
|
|
|
|
|
|
|
|
|
|
// 等待状态更新
|
|
// 等待状态更新
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -274,7 +255,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(reasonOption).toHaveClass('bg-primary/10')
|
|
expect(reasonOption).toHaveClass('bg-primary/10')
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug(`✅ 选项 ${reason} 点击成功,选中状态正确`)
|
|
|
|
|
|
|
|
|
|
// 点击确认按钮验证原因传递
|
|
// 点击确认按钮验证原因传递
|
|
|
const confirmButton = screen.getByTestId('confirm-cancel-button')
|
|
const confirmButton = screen.getByTestId('confirm-cancel-button')
|
|
@@ -289,13 +269,11 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug(`✅ 选项 ${reason} 确认对话框正确显示`)
|
|
|
|
|
|
|
|
|
|
// 重置mock调用记录
|
|
// 重置mock调用记录
|
|
|
mockShowModal.mockClear()
|
|
mockShowModal.mockClear()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- console.debug('=== 取消原因选项交互和状态更新测试完成 ===')
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
it.each([
|
|
it.each([
|
|
@@ -305,7 +283,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
'价格不合适',
|
|
'价格不合适',
|
|
|
'其他原因'
|
|
'其他原因'
|
|
|
])('应该专门测试"%s"选项的点击交互', async (reason) => {
|
|
])('应该专门测试"%s"选项的点击交互', async (reason) => {
|
|
|
- console.debug(`=== 开始专门测试"${reason}"选项点击交互 ===`)
|
|
|
|
|
|
|
|
|
|
// 渲染订单列表页
|
|
// 渲染订单列表页
|
|
|
render(
|
|
render(
|
|
@@ -328,18 +305,15 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('请选择或填写取消原因,这将帮助我们改进服务')).toBeTruthy()
|
|
expect(screen.getByText('请选择或填写取消原因,这将帮助我们改进服务')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug(`专门测试点击选项: ${reason}`)
|
|
|
|
|
|
|
|
|
|
// 点击选项
|
|
// 点击选项
|
|
|
const reasonOption = screen.getByTestId(`cancel-reason-${reason}`)
|
|
const reasonOption = screen.getByTestId(`cancel-reason-${reason}`)
|
|
|
- console.debug(`找到选项元素:`, reasonOption)
|
|
|
|
|
|
|
|
|
|
// 验证选项元素存在且可点击
|
|
// 验证选项元素存在且可点击
|
|
|
expect(reasonOption).toBeTruthy()
|
|
expect(reasonOption).toBeTruthy()
|
|
|
expect(reasonOption).toHaveAttribute('data-testid', `cancel-reason-${reason}`)
|
|
expect(reasonOption).toHaveAttribute('data-testid', `cancel-reason-${reason}`)
|
|
|
|
|
|
|
|
fireEvent.click(reasonOption)
|
|
fireEvent.click(reasonOption)
|
|
|
- console.debug(`✅ 专门点击选项: ${reason}`)
|
|
|
|
|
|
|
|
|
|
// 等待状态更新
|
|
// 等待状态更新
|
|
|
await waitFor(() => {
|
|
await waitFor(() => {
|
|
@@ -348,7 +322,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(reasonOption).toHaveClass('bg-primary/10')
|
|
expect(reasonOption).toHaveClass('bg-primary/10')
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug(`✅ 选项 ${reason} 专门点击成功,选中状态正确`)
|
|
|
|
|
|
|
|
|
|
// 点击确认按钮验证原因传递
|
|
// 点击确认按钮验证原因传递
|
|
|
const confirmButton = screen.getByTestId('confirm-cancel-button')
|
|
const confirmButton = screen.getByTestId('confirm-cancel-button')
|
|
@@ -363,13 +336,10 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug(`✅ 选项 ${reason} 专门测试确认对话框正确显示`)
|
|
|
|
|
|
|
|
|
|
- console.debug(`=== "${reason}"选项专门点击交互测试完成 ===`)
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
it('应该处理取消原因验证错误', async () => {
|
|
it('应该处理取消原因验证错误', async () => {
|
|
|
- console.debug('=== 开始取消原因验证错误测试 ===')
|
|
|
|
|
|
|
|
|
|
// 渲染订单列表页
|
|
// 渲染订单列表页
|
|
|
render(
|
|
render(
|
|
@@ -394,7 +364,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByTestId('cancel-reason-其他原因')).toBeTruthy()
|
|
expect(screen.getByTestId('cancel-reason-其他原因')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 取消原因对话框已打开')
|
|
|
|
|
|
|
|
|
|
// 直接点击确认取消按钮(不输入原因)
|
|
// 直接点击确认取消按钮(不输入原因)
|
|
|
const confirmButton = screen.getByText('确认取消')
|
|
const confirmButton = screen.getByText('确认取消')
|
|
@@ -405,7 +374,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('请输入取消原因')).toBeTruthy()
|
|
expect(screen.getByText('请输入取消原因')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 空原因验证错误正确显示')
|
|
|
|
|
|
|
|
|
|
// 输入过短的原因
|
|
// 输入过短的原因
|
|
|
const customReasonInput = screen.getByPlaceholderText('请输入其他取消原因...')
|
|
const customReasonInput = screen.getByPlaceholderText('请输入其他取消原因...')
|
|
@@ -424,7 +392,6 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('取消原因至少需要2个字符')).toBeTruthy()
|
|
expect(screen.getByText('取消原因至少需要2个字符')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 过短原因验证错误正确显示')
|
|
|
|
|
|
|
|
|
|
// 输入过长原因
|
|
// 输入过长原因
|
|
|
fireEvent.input(customReasonInput, { target: { value: 'a'.repeat(201) } })
|
|
fireEvent.input(customReasonInput, { target: { value: 'a'.repeat(201) } })
|
|
@@ -434,7 +401,5 @@ describe('取消订单完整流程集成测试', () => {
|
|
|
expect(screen.getByText('取消原因不能超过200个字符')).toBeTruthy()
|
|
expect(screen.getByText('取消原因不能超过200个字符')).toBeTruthy()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- console.debug('✅ 过长原因验证错误正确显示')
|
|
|
|
|
- console.debug('=== 取消原因验证错误测试完成 ===')
|
|
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|