diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx index c2bd4ea78f26..184ff0dbb1d0 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { WalletText } from '../../../../components'; import { TransactionStatus } from '../TransactionStatus'; -import WithdrawalCryptoProvider, { useWithdrawalCryptoContext } from './provider/WithdrawalCryptoProvider'; +import { WithdrawalCryptoProvider, useWithdrawalCryptoContext } from './provider'; import { WithdrawalCryptoDisclaimer, WithdrawalCryptoForm, WithdrawalCryptoReceipt } from './components'; import './WithdrawalCrypto.scss'; diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/__tests__/WithdrawalCrypto.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/__tests__/WithdrawalCrypto.spec.tsx new file mode 100644 index 000000000000..cb751f97fd7f --- /dev/null +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/__tests__/WithdrawalCrypto.spec.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { APIProvider, AuthProvider } from '@deriv/api-v2'; +import { render, screen } from '@testing-library/react'; +import { useWithdrawalCryptoContext } from '../provider'; +import WithdrawalCryptoModule from '../WithdrawalCrypto'; + +jest.mock('../components', () => ({ + ...jest.requireActual('../components'), + WithdrawalCryptoDisclaimer: jest.fn(() =>
WithdrawalCryptoDisclaimer
), + WithdrawalCryptoForm: jest.fn(() =>
WithdrawalCryptoForm
), + WithdrawalCryptoReceipt: jest.fn(() =>
WithdrawalCryptoReceipt
), +})); + +jest.mock('../../TransactionStatus', () => ({ + ...jest.requireActual('../../TransactionStatus'), + TransactionStatus: jest.fn(() =>
TransactionStatus
), +})); + +jest.mock('../provider', () => ({ + ...jest.requireActual('../provider'), + useWithdrawalCryptoContext: jest.fn(), + WithdrawalCryptoProvider: jest.fn(({ children }) =>
{children}
), +})); + +const mockUseWithdrawalCryptoContext = useWithdrawalCryptoContext as jest.MockedFunction< + typeof useWithdrawalCryptoContext +>; + +describe('WithdrawalCrypto', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('should render the WithdrawalCryptoDisclaimer on successful withdrawal', () => { + mockUseWithdrawalCryptoContext.mockReturnValue({ + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + activeWallet: {}, + isWithdrawalSuccess: false, + }); + + render( + + + + + + ); + expect(screen.getByText('WithdrawalCryptoDisclaimer')).toBeInTheDocument(); + }); + + it('should render the WithdrawalCryptoForm on successful withdrawal', () => { + mockUseWithdrawalCryptoContext.mockReturnValue({ + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + activeWallet: { + currency: 'BTC', + }, + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + getCurrencyConfig: jest.fn(() => { + 'Bitcoin'; + }), + isWithdrawalSuccess: false, + }); + + render( + + + + + + ); + expect(screen.getByText('WithdrawalCryptoForm')).toBeInTheDocument(); + expect(screen.getByText(/BTC/)).toBeInTheDocument(); + expect(screen.getByText('TransactionStatus')).toBeInTheDocument(); + }); + + it('should render the WithdrawalCryptoReceipt on successful withdrawal', () => { + mockUseWithdrawalCryptoContext.mockReturnValue({ + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + activeWallet: { + currency: 'BTC', + }, + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + getCurrencyConfig: jest.fn(() => { + 'Bitcoin'; + }), + isWithdrawalSuccess: true, + }); + + render( + + + + + + ); + expect(screen.getByText('WithdrawalCryptoReceipt')).toBeInTheDocument(); + }); +}); diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx index a0c7cf3b9b06..9962644d4cee 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/WithdrawalCryptoForm.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Field, FieldProps, Formik } from 'formik'; import { WalletButton, WalletTextField } from '../../../../../../components'; -import { useWithdrawalCryptoContext } from '../../provider/WithdrawalCryptoProvider'; +import { useWithdrawalCryptoContext } from '../../provider'; import { validateCryptoAddress } from '../../utils'; import { WithdrawalCryptoAmountConverter } from './components/WithdrawalCryptoAmountConverter'; import { WithdrawalCryptoPercentageSelector } from './components/WithdrawalCryptoPercentageSelector'; @@ -32,6 +32,7 @@ const WithdrawalCryptoForm: React.FC = () => { {({ field }: FieldProps) => ( ({ + ...jest.requireActual('../../../provider'), + useWithdrawalCryptoContext: jest.fn(), +})); + +jest.mock('../../../utils', () => ({ + ...jest.requireActual('../../../utils'), + validateCryptoAddress: jest.fn(), + validateCryptoInput: jest.fn(), + validateFiatInput: jest.fn(), +})); + +jest.mock('../components/WithdrawalCryptoPercentageSelector', () => ({ + ...jest.requireActual('../components'), + WithdrawalCryptoPercentageSelector: jest.fn(() =>
WithdrawalCryptoPercentageSelector
), +})); + +const mockUseWithdrawalCryptoContext = useWithdrawalCryptoContext as jest.MockedFunction< + typeof useWithdrawalCryptoContext +>; + +const wrapper = ({ children }: PropsWithChildren) => ( + + + jest.fn()} verificationCode='Abcd1234'> + {children} + + + +); + +const mockValues = { + accountLimits: { + remainder: undefined, + }, + activeAccount: { + currency: 'BTC', + }, + fractionalDigits: { + crypto: 8, + fiat: 2, + }, + getConvertedCryptoAmount: jest.fn(val => val), + getConvertedFiatAmount: jest.fn(val => val), + isClientVerified: false, + + requestCryptoWithdrawal: jest.fn(), +}; + +describe('WithdrawalCryptoForm', () => { + it('should check if requestCryptoWithdrawal was called with correct parameters', async () => { + mockUseWithdrawalCryptoContext.mockReturnValue( + // @ts-expect-error - since this is a mock, we only need partial properties of the hook + mockValues + ); + + render(, { wrapper }); + + const cryptoAddressInput = screen.getByTestId('dt_withdrawal_crypto_address_input'); + const cryptoAmountInput = screen.getByTestId('dt_withdrawal_crypto_amount_input'); + const submitButton = screen.getByText('Withdraw'); + + await act(async () => { + await userEvent.type(cryptoAddressInput, 'SampleAddress', { delay: 1 }); + userEvent.type(cryptoAmountInput, '123'); + userEvent.click(submitButton); + }); + + expect(mockValues.requestCryptoWithdrawal).toBeCalledWith({ address: 'SampleAddress', amount: 123 }); + }); +});