Amina/wall 1525/close account ts migration

packages/account/src/Sections/Security/ClosingAccount/__tests__/closing-account-general-error-content.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ClosingAccountGeneralErrorContent from '../closing-account-general-error-content';
+
+describe('<ClosingAccountGeneralErrorContent />', () => {
+    const mock_props = {
+        message: 'mock message',
+        onClick: jest.fn(),
+    };
+    it('should render the ClosingAccountGeneralErrorContent component', () => {
+        render(<ClosingAccountGeneralErrorContent {...mock_props} />);
+        expect(screen.getByText('mock message')).toBeInTheDocument();
+    });
+
+    it('should call onClick when button is clicked', () => {
+        render(<ClosingAccountGeneralErrorContent {...mock_props} />);
+
+        const ok_button = screen.getByRole('button', { name: /OK/i });
+        userEvent.click(ok_button);
+
+        expect(mock_props.onClick).toHaveBeenCalledTimes(1);
+    });
+});

packages/account/src/Sections/Security/ClosingAccount/__tests__/closing-account-has-pending-conditions.spec.tsx

@@ -0,0 +1,253 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import ClosingAccountHasPendingConditions from '../closing-account-has-pending-conditions';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    getCFDAccountDisplay: jest.fn(() => 'Financial Demo'),
+}));
+
+describe('<ClosingAccountHasPendingConditions />', () => {
+    let store = mockStore({});
+    const mock_props = {
+        details: {
+            balance: {
+                CR123: {
+                    balance: 5000.0,
+                    currency: 'USD',
+                },
+                CR234: {
+                    balance: 0.18833116,
+                    currency: 'BTC',
+                },
+            },
+        },
+        onBackClick: jest.fn(),
+    };
+    store = mockStore({
+        client: {
+            mt5_login_list: [
+                {
+                    account_type: 'real',
+                    balance: 2,
+                    country: 'id',
+                    currency: 'USD',
+                    display_balance: '2.00',
+                    email: 'user@deriv.com',
+                    group: 'real\\p01_ts01\\financial\\svg_std-hr_usd',
+                    landing_company_short: 'svg',
+                    leverage: 1000,
+                    login: 'MTR456',
+                    market_type: 'financial',
+                    name: 'QA script userizbta',
+                    server: 'p01_ts01',
+                    server_info: {
+                        environment: 'Deriv-Server',
+                        geolocation: {
+                            group: 'all',
+                            location: 'Ireland',
+                            region: 'Europe',
+                            sequence: 1,
+                        },
+                        id: 'p01_ts01',
+                    },
+                    status: null,
+                    sub_account_category: '',
+                    sub_account_type: 'financial',
+                },
+            ],
+            dxtrade_accounts_list: [
+                {
+                    account_id: 'DXR345',
+                    account_type: 'real',
+                    balance: 2221,
+                    currency: 'USD',
+                    display_balance: '2221.00',
+                    landing_company_short: 'svg',
+                    login: '345',
+                    market_type: 'all',
+                },
+            ],
+            account_list: [
+                {
+                    loginid: 'CR123',
+                    is_virtual: 0,
+                    icon: 'usd',
+                    title: 'USD',
+                },
+                {
+                    loginid: 'CR234',
+                    is_virtual: 0,
+                    icon: 'btc',
+                    title: 'BTC',
+                },
+                {
+                    loginid: 'VRTC90000148',
+                    is_virtual: 1,
+                    icon: 'real',
+                    title: 'Real',
+                },
+            ],
+
+            is_eu: false,
+        },
+    });
+
+    it('should render the ClosingAccountHasPendingConditions component', () => {
+        const { container } = render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} />
+            </StoreProvider>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should show the accounts with deriv_balance', () => {
+        const details = {
+            balance: {
+                CR123: {
+                    balance: 2744.0,
+                    currency: 'USD',
+                },
+                CR234: {
+                    balance: 0.18833116,
+                    currency: 'BTC',
+                },
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(/please withdraw your funds from the following deriv account\(s\):/i)
+        ).toBeInTheDocument();
+        expect(screen.getByText(/2,744\.00/i)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+
+        expect(screen.getByText(/0\.18833116/i)).toBeInTheDocument();
+        expect(screen.getByText(/BTC/i)).toBeInTheDocument();
+    });
+
+    it('should show the accounts with open_positions', () => {
+        const details = {
+            open_positions: {
+                CR123: 1,
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(/please close your positions in the following deriv account\(s\):/i)
+        ).toBeInTheDocument();
+        expect(screen.getByText(/1 position/i)).toBeInTheDocument();
+    });
+
+    it('should show the accounts with pending withdrawals', () => {
+        const details = {
+            pending_withdrawals: {
+                CR123: 1,
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(screen.getByText(/Pending withdrawal request:/i)).toBeInTheDocument();
+        expect(screen.getByText(/We are still processing your withdrawal request/i)).toBeInTheDocument();
+        expect(
+            screen.getByText(/Please wait for the transaction to be completed before deactivating your account/i)
+        ).toBeInTheDocument();
+    });
+
+    it('should show the dxtrade accounts with balance', () => {
+        const details = {
+            balance: {
+                DXR345: {
+                    balance: 2221.0,
+                    currency: 'USD',
+                },
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(/please withdraw your funds from the following deriv x account\(s\):/i)
+        ).toBeInTheDocument();
+        expect(screen.getByText(/2,221\.00/i)).toBeInTheDocument();
+    });
+
+    it('should show the mt5 accounts with balance', () => {
+        const details = {
+            balance: {
+                MTR456: {
+                    balance: 2.0,
+                    currency: 'USD',
+                },
+                MTR567: {
+                    balance: 23.0,
+                    currency: 'USD',
+                },
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(/please withdraw your funds from the following deriv mt5 account\(s\):/i)
+        ).toBeInTheDocument();
+        expect(screen.getByText(/2.0/i)).toBeInTheDocument();
+    });
+
+    it('should show the mt5 accounts with open_positions', () => {
+        const details = {
+            open_positions: {
+                MTR456: 3,
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(/please close your positions in the following deriv mt5 account\(s\):/i)
+        ).toBeInTheDocument();
+        expect(screen.getByText(/3 position\(s\)/i)).toBeInTheDocument();
+    });
+
+    it('should show the derivx accounts with open_positions', () => {
+        const details = {
+            open_positions: {
+                DXR345: 6,
+            },
+        };
+
+        render(
+            <StoreProvider store={store}>
+                <ClosingAccountHasPendingConditions {...mock_props} details={details} />
+            </StoreProvider>
+        );
+        expect(
+            screen.getByText(/please close your positions in the following deriv x account\(s\):/i)
+        ).toBeInTheDocument();
+        expect(screen.getByText(/6 position\(s\)/i)).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Security/ClosingAccount/__tests__/closing-account-reason-form.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ClosingAccountReasonForm from '../closing-account-reason-form';
+
+describe('<ClosingAccountReasonForm />', () => {
+    const mock_props = {
+        validateFields: jest.fn(),
+        onSubmit: jest.fn(),
+        is_checkbox_disabled: false,
+        onChangeCheckbox: jest.fn(),
+        character_limit_no: 20,
+        onInputChange: jest.fn(),
+        onInputPaste: jest.fn(),
+        remaining_characters: 5,
+        onBackClick: jest.fn(),
+    };
+    it('Should render ClosingAccountReasonForm component', () => {
+        render(<ClosingAccountReasonForm {...mock_props} />);
+        expect(screen.getByLabelText(/I want to stop myself from trading./i)).toBeInTheDocument();
+        expect(
+            screen.getByPlaceholderText(/If you don’t mind sharing, which other trading platforms do you use?/i)
+        ).toBeInTheDocument();
+
+        expect(screen.getByRole('button', { name: /Continue/i })).toBeDisabled();
+    });
+
+    it('should call the onBackClick function when cancel button is clicked', () => {
+        render(<ClosingAccountReasonForm {...mock_props} />);
+
+        userEvent.click(screen.getByRole('button', { name: /Back/i }));
+
+        expect(mock_props.onBackClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onChangeCheckbox when checkbox is clicked', () => {
+        render(<ClosingAccountReasonForm {...mock_props} />);
+
+        const el_checkbox = screen.getByRole('checkbox', {
+            name: /i’m closing my account for other reasons\./i,
+        });
+        act(() => {
+            userEvent.click(el_checkbox);
+        });
+        expect(mock_props.onChangeCheckbox).toHaveBeenCalled();
+    });
+
+    it('should call the onInputChange and onInputPaste functions for textarea inputs', () => {
+        render(<ClosingAccountReasonForm {...mock_props} />);
+
+        const otherPlatformsInput = screen.getByPlaceholderText(
+            /If you don’t mind sharing, which other trading platforms do you use?/i
+        );
+        const improveInput = screen.getByPlaceholderText(/What could we do to improve?/i);
+
+        fireEvent.change(otherPlatformsInput, { target: { value: 'Other Platforms Input' } });
+        fireEvent.paste(improveInput, { clipboardData: { getData: () => 'Pasted Text' } });
+
+        expect(mock_props.onInputChange).toHaveBeenCalledTimes(1);
+        expect(mock_props.onInputPaste).toHaveBeenCalledTimes(1);
+    });
+});