chore: withdrawal crypto and withdrawal crypto form unit test (deriv-…

…com#14162)

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';
 

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(() => <div>WithdrawalCryptoDisclaimer</div>),
+    WithdrawalCryptoForm: jest.fn(() => <div>WithdrawalCryptoForm</div>),
+    WithdrawalCryptoReceipt: jest.fn(() => <div>WithdrawalCryptoReceipt</div>),
+}));
+
+jest.mock('../../TransactionStatus', () => ({
+    ...jest.requireActual('../../TransactionStatus'),
+    TransactionStatus: jest.fn(() => <div>TransactionStatus</div>),
+}));
+
+jest.mock('../provider', () => ({
+    ...jest.requireActual('../provider'),
+    useWithdrawalCryptoContext: jest.fn(),
+    WithdrawalCryptoProvider: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+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(
+            <APIProvider>
+                <AuthProvider>
+                    <WithdrawalCryptoModule onClose={jest.fn()} verificationCode='Abcd1234' />
+                </AuthProvider>
+            </APIProvider>
+        );
+        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(
+            <APIProvider>
+                <AuthProvider>
+                    <WithdrawalCryptoModule onClose={jest.fn()} verificationCode='Abcd1234' />
+                </AuthProvider>
+            </APIProvider>
+        );
+        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(
+            <APIProvider>
+                <AuthProvider>
+                    <WithdrawalCryptoModule onClose={jest.fn()} verificationCode='Abcd1234' />
+                </AuthProvider>
+            </APIProvider>
+        );
+        expect(screen.getByText('WithdrawalCryptoReceipt')).toBeInTheDocument();
+    });
+});

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<string>) => (
                                     <WalletTextField
                                         {...field}
+                                        data-testid='dt_withdrawal_crypto_address_input'
                                         errorMessage={errors.cryptoAddress}
                                         isInvalid={Boolean(errors?.cryptoAddress)}
                                         label={`Your ${activeWallet?.currency_config?.name} cryptocurrency wallet address`}

packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/__tests__/WithdrawalCryptoForm.spec.tsx

@@ -0,0 +1,78 @@
+import React, { PropsWithChildren } from 'react';
+import { APIProvider, AuthProvider } from '@deriv/api-v2';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useWithdrawalCryptoContext, WithdrawalCryptoProvider } from '../../../provider';
+import WithdrawalCryptoForm from '../WithdrawalCryptoForm';
+
+jest.mock('../../../provider', () => ({
+    ...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(() => <div>WithdrawalCryptoPercentageSelector</div>),
+}));
+
+const mockUseWithdrawalCryptoContext = useWithdrawalCryptoContext as jest.MockedFunction<
+    typeof useWithdrawalCryptoContext
+>;
+
+const wrapper = ({ children }: PropsWithChildren) => (
+    <APIProvider>
+        <AuthProvider>
+            <WithdrawalCryptoProvider onClose={() => jest.fn()} verificationCode='Abcd1234'>
+                {children}
+            </WithdrawalCryptoProvider>
+        </AuthProvider>
+    </APIProvider>
+);
+
+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(<WithdrawalCryptoForm />, { 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 });
+    });
+});