Browse Source
- 新增了多个测试用例，覆盖了提现功能的主要场景 - 添加了对最低提现金额、可用余额、支付宝信息完整性的验证 -测试了微信提现和支付宝提现的提交逻辑 - 新增了快捷金额按钮和全部金额按钮的测试 - 添加了调试组件，用于测试 Tabs 组件的点击和切换功能 - 优化了提现记录的渲染逻辑，增加了日志输出demo
3 changed files with 413 additions and 81 deletions
@ -0,0 +1,184 @@ |
|||
import React from 'react' |
|||
import { render, fireEvent, waitFor } from '@testing-library/react' |
|||
import DealerWithdraw from '../index' |
|||
import { useDealerUser } from '@/hooks/useDealerUser' |
|||
import * as withdrawAPI from '@/api/shop/shopDealerWithdraw' |
|||
|
|||
// Mock dependencies
|
|||
jest.mock('@/hooks/useDealerUser') |
|||
jest.mock('@/api/shop/shopDealerWithdraw') |
|||
jest.mock('@tarojs/taro', () => ({ |
|||
showToast: jest.fn(), |
|||
getStorageSync: jest.fn(() => 123), |
|||
})) |
|||
|
|||
const mockUseDealerUser = useDealerUser as jest.MockedFunction<typeof useDealerUser> |
|||
const mockAddShopDealerWithdraw = withdrawAPI.addShopDealerWithdraw as jest.MockedFunction<typeof withdrawAPI.addShopDealerWithdraw> |
|||
const mockPageShopDealerWithdraw = withdrawAPI.pageShopDealerWithdraw as jest.MockedFunction<typeof withdrawAPI.pageShopDealerWithdraw> |
|||
|
|||
describe('DealerWithdraw', () => { |
|||
const mockDealerUser = { |
|||
userId: 123, |
|||
money: '10000.00', |
|||
realName: '测试用户', |
|||
mobile: '13800138000' |
|||
} |
|||
|
|||
beforeEach(() => { |
|||
mockUseDealerUser.mockReturnValue({ |
|||
dealerUser: mockDealerUser, |
|||
loading: false, |
|||
error: null, |
|||
refresh: jest.fn() |
|||
}) |
|||
|
|||
mockPageShopDealerWithdraw.mockResolvedValue({ |
|||
list: [], |
|||
count: 0 |
|||
}) |
|||
}) |
|||
|
|||
afterEach(() => { |
|||
jest.clearAllMocks() |
|||
}) |
|||
|
|||
test('应该正确显示可提现余额', () => { |
|||
const { getByText } = render(<DealerWithdraw />) |
|||
expect(getByText('10000.00')).toBeInTheDocument() |
|||
expect(getByText('可提现余额')).toBeInTheDocument() |
|||
}) |
|||
|
|||
test('应该验证最低提现金额', async () => { |
|||
mockAddShopDealerWithdraw.mockResolvedValue('success') |
|||
|
|||
const { getByPlaceholderText, getByText } = render(<DealerWithdraw />) |
|||
|
|||
// 输入低于最低金额的数值
|
|||
const amountInput = getByPlaceholderText('请输入提现金额') |
|||
fireEvent.change(amountInput, { target: { value: '50' } }) |
|||
|
|||
// 选择提现方式
|
|||
const wechatRadio = getByText('微信钱包') |
|||
fireEvent.click(wechatRadio) |
|||
|
|||
// 提交表单
|
|||
const submitButton = getByText('申请提现') |
|||
fireEvent.click(submitButton) |
|||
|
|||
await waitFor(() => { |
|||
expect(require('@tarojs/taro').showToast).toHaveBeenCalledWith({ |
|||
title: '最低提现金额为100元', |
|||
icon: 'error' |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
test('应该验证提现金额不超过可用余额', async () => { |
|||
const { getByPlaceholderText, getByText } = render(<DealerWithdraw />) |
|||
|
|||
// 输入超过可用余额的金额
|
|||
const amountInput = getByPlaceholderText('请输入提现金额') |
|||
fireEvent.change(amountInput, { target: { value: '20000' } }) |
|||
|
|||
// 选择提现方式
|
|||
const wechatRadio = getByText('微信钱包') |
|||
fireEvent.click(wechatRadio) |
|||
|
|||
// 提交表单
|
|||
const submitButton = getByText('申请提现') |
|||
fireEvent.click(submitButton) |
|||
|
|||
await waitFor(() => { |
|||
expect(require('@tarojs/taro').showToast).toHaveBeenCalledWith({ |
|||
title: '提现金额超过可用余额', |
|||
icon: 'error' |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
test('应该验证支付宝账户信息完整性', async () => { |
|||
const { getByPlaceholderText, getByText } = render(<DealerWithdraw />) |
|||
|
|||
// 输入有效金额
|
|||
const amountInput = getByPlaceholderText('请输入提现金额') |
|||
fireEvent.change(amountInput, { target: { value: '1000' } }) |
|||
|
|||
// 选择支付宝提现
|
|||
const alipayRadio = getByText('支付宝') |
|||
fireEvent.click(alipayRadio) |
|||
|
|||
// 只填写账号，不填写姓名
|
|||
const accountInput = getByPlaceholderText('请输入支付宝账号') |
|||
fireEvent.change(accountInput, { target: { value: 'test@alipay.com' } }) |
|||
|
|||
// 提交表单
|
|||
const submitButton = getByText('申请提现') |
|||
fireEvent.click(submitButton) |
|||
|
|||
await waitFor(() => { |
|||
expect(require('@tarojs/taro').showToast).toHaveBeenCalledWith({ |
|||
title: '请填写完整的支付宝信息', |
|||
icon: 'error' |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
test('应该成功提交微信提现申请', async () => { |
|||
mockAddShopDealerWithdraw.mockResolvedValue('success') |
|||
|
|||
const { getByPlaceholderText, getByText } = render(<DealerWithdraw />) |
|||
|
|||
// 输入有效金额
|
|||
const amountInput = getByPlaceholderText('请输入提现金额') |
|||
fireEvent.change(amountInput, { target: { value: '1000' } }) |
|||
|
|||
// 选择微信提现
|
|||
const wechatRadio = getByText('微信钱包') |
|||
fireEvent.click(wechatRadio) |
|||
|
|||
// 提交表单
|
|||
const submitButton = getByText('申请提现') |
|||
fireEvent.click(submitButton) |
|||
|
|||
await waitFor(() => { |
|||
expect(mockAddShopDealerWithdraw).toHaveBeenCalledWith({ |
|||
userId: 123, |
|||
money: '1000', |
|||
payType: 10, |
|||
applyStatus: 10, |
|||
platform: 'MiniProgram' |
|||
}) |
|||
}) |
|||
|
|||
await waitFor(() => { |
|||
expect(require('@tarojs/taro').showToast).toHaveBeenCalledWith({ |
|||
title: '提现申请已提交', |
|||
icon: 'success' |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
test('快捷金额按钮应该正常工作', () => { |
|||
const { getByText, getByPlaceholderText } = render(<DealerWithdraw />) |
|||
|
|||
// 点击快捷金额按钮
|
|||
const quickAmountButton = getByText('500') |
|||
fireEvent.click(quickAmountButton) |
|||
|
|||
// 验证金额输入框的值
|
|||
const amountInput = getByPlaceholderText('请输入提现金额') as HTMLInputElement |
|||
expect(amountInput.value).toBe('500') |
|||
}) |
|||
|
|||
test('全部按钮应该设置为可用余额', () => { |
|||
const { getByText, getByPlaceholderText } = render(<DealerWithdraw />) |
|||
|
|||
// 点击全部按钮
|
|||
const allButton = getByText('全部') |
|||
fireEvent.click(allButton) |
|||
|
|||
// 验证金额输入框的值
|
|||
const amountInput = getByPlaceholderText('请输入提现金额') as HTMLInputElement |
|||
expect(amountInput.value).toBe('10000.00') |
|||
}) |
|||
}) |
|||
@ -0,0 +1,80 @@ |
|||
import React, { useState } from 'react' |
|||
import { View, Text } from '@tarojs/components' |
|||
import { Tabs, Button } from '@nutui/nutui-react-taro' |
|||
|
|||
/** |
|||
* 提现功能调试组件 |
|||
* 用于测试 Tabs 组件的点击和切换功能 |
|||
*/ |
|||
const WithdrawDebug: React.FC = () => { |
|||
const [activeTab, setActiveTab] = useState<string | number>('0') |
|||
const [clickCount, setClickCount] = useState(0) |
|||
|
|||
// Tab 切换处理函数
|
|||
const handleTabChange = (value: string | number) => { |
|||
console.log('Tab切换:', { from: activeTab, to: value, type: typeof value }) |
|||
setActiveTab(value) |
|||
setClickCount(prev => prev + 1) |
|||
} |
|||
|
|||
// 手动切换测试
|
|||
const manualSwitch = (tab: string | number) => { |
|||
console.log('手动切换到:', tab) |
|||
setActiveTab(tab) |
|||
setClickCount(prev => prev + 1) |
|||
} |
|||
|
|||
return ( |
|||
<View className="bg-gray-50 min-h-screen p-4"> |
|||
<View className="bg-white rounded-lg p-4 mb-4"> |
|||
<Text className="text-lg font-bold mb-2">调试信息</Text> |
|||
<Text className="block mb-1">当前Tab: {String(activeTab)}</Text> |
|||
<Text className="block mb-1">切换次数: {clickCount}</Text> |
|||
<Text className="block mb-1">Tab类型: {typeof activeTab}</Text> |
|||
</View> |
|||
|
|||
<View className="bg-white rounded-lg p-4 mb-4"> |
|||
<Text className="text-lg font-bold mb-2">手动切换测试</Text> |
|||
<View className="flex gap-2"> |
|||
<Button size="small" onClick={() => manualSwitch('0')}> |
|||
切换到申请提现 |
|||
</Button> |
|||
<Button size="small" onClick={() => manualSwitch('1')}> |
|||
切换到提现记录 |
|||
</Button> |
|||
</View> |
|||
</View> |
|||
|
|||
<View className="bg-white rounded-lg"> |
|||
<Tabs value={activeTab} onChange={handleTabChange}> |
|||
<Tabs.TabPane title="申请提现" value="0"> |
|||
<View className="p-4"> |
|||
<Text className="text-center text-gray-600">申请提现页面内容</Text> |
|||
<Text className="text-center text-sm text-gray-400 mt-2"> |
|||
当前Tab值: {String(activeTab)} |
|||
</Text> |
|||
</View> |
|||
</Tabs.TabPane> |
|||
|
|||
<Tabs.TabPane title="提现记录" value="1"> |
|||
<View className="p-4"> |
|||
<Text className="text-center text-gray-600">提现记录页面内容</Text> |
|||
<Text className="text-center text-sm text-gray-400 mt-2"> |
|||
当前Tab值: {String(activeTab)} |
|||
</Text> |
|||
</View> |
|||
</Tabs.TabPane> |
|||
</Tabs> |
|||
</View> |
|||
|
|||
<View className="bg-white rounded-lg p-4 mt-4"> |
|||
<Text className="text-lg font-bold mb-2">事件日志</Text> |
|||
<Text className="text-sm text-gray-500"> |
|||
请查看控制台输出以获取详细的切换日志 |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default WithdrawDebug |
|||
Loading…
Reference in new issue