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: React.ComponentProps<typeof ClosingAccountGeneralErrorContent> = {
+        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-reason-form.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ClosingAccountReasonForm from '../closing-account-reason-form';
+
+describe('<ClosingAccountReasonForm />', () => {
+    const mock_props: React.ComponentProps<typeof ClosingAccountReasonForm> = {
+        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,
+        });
+        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);
+    });
+});

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { act, render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import ClosingAccountReason from '../closing-account-reason';
+
+describe('<ClosingAccountReason />', () => {
+    const mockRootStore: ReturnType<typeof mockStore> = mockStore({});
+    const mock_props = {
+        redirectToSteps: jest.fn(),
+    };
+    let modal_root_el: HTMLDivElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    jest.mock('../closing-account-reason-form', () => <div>ClosingAccountReasonForm </div>);
+
+    const renderComponent = () =>
+        render(
+            <StoreProvider store={mockRootStore}>
+                <ClosingAccountReason {...mock_props} />
+            </StoreProvider>
+        );
+
+    it('Should render ClosingAccountReason component', async () => {
+        renderComponent();
+        await waitFor(() => {
+            expect(screen.getByText(/Please tell us why you’re leaving/i)).toBeInTheDocument();
+        });
+    });
+
+    it('Should be disabled when no reason has been selected', async () => {
+        renderComponent();
+        fireEvent.click(screen.getByRole('checkbox', { name: /I have other financial priorities./i }));
+        fireEvent.click(screen.getByRole('checkbox', { name: /I have other financial priorities./i }));
+
+        await waitFor(() => {
+            expect(screen.getByText(/Please select at least one reason/i)).toBeInTheDocument();
+            const continueButton = screen.getAllByRole('button')[1];
+            expect(continueButton).toBeDisabled();
+        });
+    });
+
+    it('should reduce remaining chars', async () => {
+        renderComponent();
+        expect(screen.getByText(/Remaining characters: 110/i)).toBeInTheDocument();
+
+        fireEvent.change(screen.getByLabelText(/I want to stop myself from trading/i), {
+            target: { value: 'true' },
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText(/Remaining characters: 110/i)).toBeInTheDocument();
+        });
+
+        fireEvent.change(screen.getByPlaceholderText(/What could we do to improve/i), {
+            target: { value: 'do_to_improve' },
+        });
+
+        expect(screen.getByText(/Remaining characters: 97/i)).toBeInTheDocument();
+    });
+
+    it('should call redirectToSteps when back button is clicked', async () => {
+        renderComponent();
+
+        const el_checkbox = screen.getByRole('checkbox', {
+            name: /i’m closing my account for other reasons\./i,
+        });
+        fireEvent.click(el_checkbox);
+
+        fireEvent.click(screen.getByRole('button', { name: /Back/i }));
+
+        await waitFor(() => {
+            expect(mock_props.redirectToSteps).toHaveBeenCalledTimes(1);
+        });
+    });
+});

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import ClosingAccountSteps from '../closing-account-steps';
+
+describe('<ClosingAccountSteps />', () => {
+    const mockRootStore = mockStore({});
+    const history = createBrowserHistory();
+    const mock_props: React.ComponentProps<typeof ClosingAccountSteps> = {
+        redirectToReasons: jest.fn(),
+    };
+
+    const renderComponent = () => {
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mockRootStore}>
+                <BrowserRouter>{children}</BrowserRouter>
+            </StoreProvider>
+        );
+        render(<ClosingAccountSteps {...mock_props} />, {
+            wrapper,
+        });
+    };
+
+    it('should render the ClosingAccountSteps component', () => {
+        renderComponent();
+        expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+        expect(screen.getByText('If you close your account:')).toBeInTheDocument();
+        expect(screen.getByText("You can't trade on Deriv.")).toBeInTheDocument();
+        expect(screen.getByText("You can't make transactions.")).toBeInTheDocument();
+        expect(screen.getByText('Before closing your account:')).toBeInTheDocument();
+        expect(screen.getByText('Close all your positions.')).toBeInTheDocument();
+        expect(screen.getByText('Withdraw your funds.')).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'We shall delete your personal information as soon as our legal obligations are met, as mentioned in the section on Data Retention in our'
+            )
+        ).toBeInTheDocument();
+    });
+
+    it('should have link to security and privacy policy pdf', () => {
+        renderComponent();
+        expect(screen.getByRole('link', { name: /Security and privacy policy/i })).toHaveAttribute(
+            'href',
+            'https://deriv.com/tnc/security-and-privacy.pdf'
+        );
+    });
+
+    it('should call redirectToReasons when close_account_button is clicked ', () => {
+        renderComponent();
+        const close_account_button = screen.getByRole('button', { name: /Close my account/i });
+        expect(close_account_button).toBeInTheDocument();
+        userEvent.click(close_account_button);
+        expect(mock_props.redirectToReasons).toHaveBeenCalled();
+    });
+
+    it('should navigate to root page on clicking the cancel button', () => {
+        renderComponent();
+        const cancel_button = screen.getByRole('button', { name: /Cancel/i });
+        expect(cancel_button).toBeInTheDocument();
+        userEvent.click(cancel_button);
+        expect(history.location.pathname).toBe('/');
+    });
+
+    it('should render proper button if is_from_derivgo is true', () => {
+        mockRootStore.common.is_from_derivgo = true;
+        renderComponent();
+        expect(screen.queryByRole('button', { name: /Cancel/i })).not.toBeInTheDocument();
+        const close_account_button = screen.getByRole('button', { name: /Close my account/i });
+        expect(close_account_button).toBeInTheDocument();
+        userEvent.click(close_account_button);
+        expect(mock_props.redirectToReasons).toHaveBeenCalled();
+    });
+});