Merge pull request #9 from ameerul-deriv/P2PS-904-refactor-remaining-…

…components

Ameerul /P2PS 904 Refactor remaining components

packages/p2p/src/components/my-profile/__tests__/my-profile.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { useStores } from 'Stores/index';
+import MyProfile from '../my-profile';
+
+const mock_store: DeepPartial<ReturnType<typeof useStores>> = {
+    my_profile_store: {
+        error_message: '',
+        getSettings: jest.fn(),
+        setActiveTab: jest.fn(),
+        setShouldShowAddPaymentMethodForm: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+jest.mock('../my-profile-content', () => jest.fn(() => <div>MyProfileContent</div>));
+jest.mock('../my-profile-stats/my-profile-details-container', () =>
+    jest.fn(() => <div>MyProfileDetailsContainer</div>)
+);
+jest.mock('../my-profile-header', () => jest.fn(() => <div>MyProfileHeader</div>));
+
+describe('<MyProfile />', () => {
+    it('should render MyProfile component', () => {
+        render(<MyProfile />);
+
+        expect(screen.getByText('MyProfileContent')).toBeInTheDocument();
+        expect(screen.getByText('MyProfileDetailsContainer')).toBeInTheDocument();
+        expect(screen.getByText('MyProfileHeader')).toBeInTheDocument();
+    });
+
+    it('should show error message if error_message has value', () => {
+        mock_store.my_profile_store.error_message = 'test error';
+
+        render(<MyProfile />);
+
+        expect(screen.getByText('test error')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/my-profile/block-user/__tests__/block-user.spec.tsx

@@ -60,8 +60,6 @@ const mock_modal_manager: DeepPartial<ReturnType<typeof useModalManagerContext>>
     useRegisterModalProps: jest.fn(),
 };
 
-const el_modal = document.createElement('div');
-
 jest.mock('Stores', () => ({
     ...jest.requireActual('Stores'),
     useStores: jest.fn(() => mock_store),

packages/p2p/src/components/my-profile/index.js → packages/p2p/src/components/my-profile/index.ts

@@ -1,4 +1,4 @@
-import MyProfile from './my-profile.jsx';
+import MyProfile from './my-profile';
 import './my-profile.scss';
 
 export default MyProfile;

packages/p2p/src/components/my-profile/my-profile-content/__tests__/my-profile-content.spec.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { my_profile_tabs } from 'Constants/my-profile-tabs';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores/index';
+import MyProfileContent from '../my-profile-content';
+
+const mock_modal_manager: DeepPartial<ReturnType<typeof useModalManagerContext>> = {
+    showModal: jest.fn(),
+};
+
+let mock_store: DeepPartial<ReturnType<typeof useStores>>;
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    MobileWrapper: jest.fn(({ children }) => children),
+}));
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn(() => mock_modal_manager),
+}));
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+jest.mock('../../my-profile-form', () => jest.fn(() => <div>MyProfileForm</div>));
+jest.mock('../../my-profile-stats', () => jest.fn(() => <div>MyProfileStats</div>));
+jest.mock('../../payment-methods', () => jest.fn(() => <div>PaymentMethods</div>));
+jest.mock('../../block-user', () => jest.fn(() => <div>BlockUser</div>));
+
+describe('<MyProfileContent />', () => {
+    beforeEach(() => {
+        mock_store = {
+            general_store: {
+                is_form_modified: false,
+            },
+            my_profile_store: {
+                active_tab: my_profile_tabs.MY_STATS,
+                hideAddPaymentMethodForm: jest.fn(),
+                selected_payment_method: 'alipay',
+                setShouldShowEditPaymentMethodForm: jest.fn(),
+                should_show_add_payment_method_form: false,
+                should_show_edit_payment_method_form: false,
+            },
+        };
+    });
+
+    it('should render MyProfileStats if active_tab is MY_STATS', () => {
+        render(<MyProfileContent />);
+
+        expect(screen.getByText('MyProfileStats')).toBeInTheDocument();
+    });
+
+    it('should render MyProfileForm if active_tab is AD_TEMPLATE', () => {
+        mock_store.my_profile_store.active_tab = my_profile_tabs.AD_TEMPLATE;
+
+        render(<MyProfileContent />);
+
+        expect(screen.getByText('MyProfileForm')).toBeInTheDocument();
+    });
+
+    it('should render BlockUser if active_tab is MY_COUNTERPARTIES', () => {
+        mock_store.my_profile_store.active_tab = my_profile_tabs.MY_COUNTERPARTIES;
+
+        render(<MyProfileContent />);
+
+        expect(screen.getByText('BlockUser')).toBeInTheDocument();
+    });
+
+    it('should render PaymentMethods if active_tab is PAYMENT_METHODS', () => {
+        mock_store.my_profile_store.active_tab = my_profile_tabs.PAYMENT_METHODS;
+
+        render(<MyProfileContent />);
+
+        expect(screen.getAllByText('PaymentMethods').length).toBe(2);
+    });
+
+    it('should call hideAddPaymentMethodForm and setShouldShowEditPaymentMethodForm when clicking return icon', () => {
+        mock_store.my_profile_store.selected_payment_method = '';
+        mock_store.my_profile_store.active_tab = my_profile_tabs.PAYMENT_METHODS;
+
+        render(<MyProfileContent />);
+
+        const pageReturnIcon = screen.getByTestId('dt_mobile_full_page_return_icon');
+
+        userEvent.click(pageReturnIcon);
+
+        expect(mock_store.my_profile_store.hideAddPaymentMethodForm).toBeCalled();
+        expect(mock_store.my_profile_store.setShouldShowEditPaymentMethodForm).toBeCalledWith(false);
+    });
+
+    it('should call showModal with CancelAddPaymentMethodModal if is_form_modified is true and should_show_add_payment_method_form is true', () => {
+        mock_store.my_profile_store.active_tab = my_profile_tabs.PAYMENT_METHODS;
+        mock_store.general_store.is_form_modified = true;
+        mock_store.my_profile_store.should_show_add_payment_method_form = true;
+
+        render(<MyProfileContent />);
+
+        const pageReturnIcon = screen.getByTestId('dt_mobile_full_page_return_icon');
+
+        userEvent.click(pageReturnIcon);
+
+        expect(mock_modal_manager.showModal).toBeCalledWith({ key: 'CancelAddPaymentMethodModal' });
+    });
+
+    it('should call showModal with CancelEditPaymentMethodModal if is_form_modified is true and should_show_edit_payment_method_form is true', () => {
+        mock_store.my_profile_store.active_tab = my_profile_tabs.PAYMENT_METHODS;
+        mock_store.general_store.is_form_modified = true;
+        mock_store.my_profile_store.should_show_edit_payment_method_form = true;
+
+        render(<MyProfileContent />);
+
+        const pageReturnIcon = screen.getByTestId('dt_mobile_full_page_return_icon');
+
+        userEvent.click(pageReturnIcon);
+
+        expect(mock_modal_manager.showModal).toBeCalledWith({ key: 'CancelEditPaymentMethodModal' });
+    });
+});

packages/p2p/src/components/my-profile/my-profile-content/index.ts

@@ -0,0 +1,3 @@
+import MyProfileContent from './my-profile-content';
+
+export default MyProfileContent;

packages/p2p/src/components/my-profile/my-profile-content.jsx → packages/p2p/src/components/my-profile/my-profile-content/my-profile-content.tsx

@@ -1,23 +1,29 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
 import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
-import { observer } from 'mobx-react-lite';
+import { observer } from '@deriv/stores';
 import { localize } from 'Components/i18next';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { useStores } from 'Stores';
-import MyProfileForm from './my-profile-form';
-import MyProfileStats from './my-profile-stats';
-import PaymentMethods from './payment-methods';
-import BlockUser from './block-user';
-import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import BlockUser from '../block-user';
+import MyProfileForm from '../my-profile-form';
+import MyProfileStats from '../my-profile-stats';
+import PaymentMethods from '../payment-methods';
 
 const MyProfileContent = () => {
-    const { my_profile_store, general_store } = useStores();
+    const { general_store, my_profile_store } = useStores();
+    const {
+        active_tab,
+        selected_payment_method,
+        should_show_add_payment_method_form,
+        should_show_edit_payment_method_form,
+    } = my_profile_store;
     const { showModal } = useModalManagerContext();
 
-    if (my_profile_store.active_tab === my_profile_tabs.AD_TEMPLATE) {
+    if (active_tab === my_profile_tabs.AD_TEMPLATE) {
         return <MyProfileForm />;
-    } else if (my_profile_store.active_tab === my_profile_tabs.PAYMENT_METHODS) {
+    } else if (active_tab === my_profile_tabs.PAYMENT_METHODS) {
         return (
             <React.Fragment>
                 <DesktopWrapper>
@@ -27,22 +33,21 @@ const MyProfileContent = () => {
                     <MobileFullPageModal
                         body_className={classNames('payment-methods-list__modal', {
                             'payment-methods-list__modal-add':
-                                my_profile_store.selected_payment_method ||
-                                my_profile_store.should_show_edit_payment_method_form,
+                                selected_payment_method || should_show_edit_payment_method_form,
                         })}
                         height_offset='80px'
                         is_modal_open
                         is_flex
                         page_header_className='buy-sell__modal-header'
                         page_header_text={localize('Add payment method')}
                         pageHeaderReturnFn={() => {
-                            if (general_store.is_form_modified || my_profile_store.selected_payment_method.length > 0) {
-                                if (my_profile_store.should_show_add_payment_method_form) {
+                            if (general_store.is_form_modified || !!selected_payment_method) {
+                                if (should_show_add_payment_method_form) {
                                     showModal({
                                         key: 'CancelAddPaymentMethodModal',
                                     });
                                 }
-                                if (my_profile_store.should_show_edit_payment_method_form) {
+                                if (should_show_edit_payment_method_form) {
                                     showModal({
                                         key: 'CancelEditPaymentMethodModal',
                                     });
@@ -58,7 +63,7 @@ const MyProfileContent = () => {
                 </MobileWrapper>
             </React.Fragment>
         );
-    } else if (my_profile_store.active_tab === my_profile_tabs.MY_COUNTERPARTIES) {
+    } else if (active_tab === my_profile_tabs.MY_COUNTERPARTIES) {
         return <BlockUser />;
     }
     return <MyProfileStats />;

packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.scss

@@ -7,4 +7,13 @@
             width: 100vw;
         }
     }
+
+    &__navigation {
+        display: flex;
+        justify-content: space-between;
+
+        &:last-child {
+            margin-bottom: 1.6rem;
+        }
+    }
 }

packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.tsx

@@ -54,7 +54,7 @@ const MyProfileStats = () => {
                 {tabs.map((tab, key) => {
                     return (
                         <React.Fragment key={key}>
-                            <div className='my-profile__navigation' onClick={tab.onClick}>
+                            <div className='my-profile-stats__navigation' onClick={tab.onClick}>
                                 <Text color='prominent' size='xxs'>
                                     <Localize i18n_default_text={tab.default_text} />
                                 </Text>

packages/p2p/src/components/my-profile/my-profile.scss

@@ -33,13 +33,4 @@
             }
         }
     }
-
-    &__navigation {
-        display: flex;
-        justify-content: space-between;
-
-        &:last-child {
-            margin-bottom: 1.6rem;
-        }
-    }
 }

packages/p2p/src/components/my-profile/my-profile.jsx → packages/p2p/src/components/my-profile/my-profile.tsx

@@ -3,7 +3,7 @@ import { AutoSizer, DesktopWrapper, Text } from '@deriv/components';
 import { observer } from '@deriv/stores';
 import { useStores } from 'Stores';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
-import MyProfileContent from './my-profile-content.jsx';
+import MyProfileContent from './my-profile-content';
 import MyProfileDetailsContainer from './my-profile-stats/my-profile-details-container';
 import MyProfileHeader from './my-profile-header';