From 99d589ec82c2fd06020a2208e9259f4fab910d01 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 8 Jun 2023 12:44:34 +0800 Subject: [PATCH 1/4] chore: refactored MyProfileForm component --- .../__test__/my-profile-form.spec.tsx | 69 +++++++++++++++++++ .../my-profile-form/{index.js => index.ts} | 2 +- ...y-profile-form.jsx => my-profile-form.tsx} | 51 +++++++------- packages/p2p/src/stores/general-store.js | 3 + 4 files changed, 101 insertions(+), 24 deletions(-) create mode 100644 packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx rename packages/p2p/src/components/my-profile/my-profile-form/{index.js => index.ts} (55%) rename packages/p2p/src/components/my-profile/my-profile-form/{my-profile-form.jsx => my-profile-form.tsx} (92%) diff --git a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx new file mode 100644 index 000000000000..50b5b48e879d --- /dev/null +++ b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { useStores } from 'Stores/index'; +import MyProfileForm from '../my-profile-form'; + +let mock_store: DeepPartial>; + +jest.mock('Stores', () => ({ + ...jest.requireActual('Stores'), + useStores: jest.fn(() => mock_store), +})); + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + DesktopWrapper: jest.fn(({ children }) => children), + MobileWrapper: jest.fn(({ children }) => children), + MobileFullPageModal: ({ + children, + pageHeaderReturnFn = mock_store.setActiveTab, + page_header_text = 'Ad details', + }) => ( +
+ {page_header_text} + + {children} +
+ ), +})); + +describe('', () => { + beforeEach(() => { + mock_store = { + my_profile_store: { + is_loading: false, + setActiveTab: jest.fn(), + }, + general_store: { + contact_info: '', + default_advert_description: '', + }, + }; + }); + + it('renders MyProfileForm component', () => { + render(); + + expect(screen.getAllByText('Contact details').length).toBe(2); + expect(screen.getAllByText('Instructions').length).toBe(2); + }); + + it('renders the Loading component when my_profile_store.is_loading is set to true', () => { + mock_store.my_profile_store.is_loading = true; + + render(); + + expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument(); + }); + + it('expects the setActiveTab function to be called when return function is clicked', () => { + render(); + + const returnButton = screen.getByRole('button', { name: 'Return' }); + userEvent.click(returnButton); + + expect(screen.getByText('Ad details')).toBeInTheDocument(); + expect(mock_store.my_profile_store.setActiveTab).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/p2p/src/components/my-profile/my-profile-form/index.js b/packages/p2p/src/components/my-profile/my-profile-form/index.ts similarity index 55% rename from packages/p2p/src/components/my-profile/my-profile-form/index.js rename to packages/p2p/src/components/my-profile/my-profile-form/index.ts index 3c8a69067ed5..02c5cf5b2726 100644 --- a/packages/p2p/src/components/my-profile/my-profile-form/index.js +++ b/packages/p2p/src/components/my-profile/my-profile-form/index.ts @@ -1,4 +1,4 @@ -import MyProfileForm from './my-profile-form.jsx'; +import MyProfileForm from './my-profile-form'; import './my-profile-form.scss'; export default MyProfileForm; diff --git a/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx b/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.tsx similarity index 92% rename from packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx rename to packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.tsx index 56642eec0e40..77721c1ecffb 100644 --- a/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx +++ b/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.tsx @@ -1,12 +1,13 @@ -import * as React from 'react'; +import React from 'react'; +import classNames from 'classnames'; import { Field, Form, Formik } from 'formik'; +import { Observer } from 'mobx-react-lite'; import { Button, DesktopWrapper, Input, Loading, MobileFullPageModal, MobileWrapper, Text } from '@deriv/components'; -import { observer, Observer } from 'mobx-react-lite'; -import classNames from 'classnames'; +import { observer } from '@deriv/stores'; +import { useStores } from 'Stores'; import { Localize, localize } from 'Components/i18next'; import FormError from 'Components/form/error.jsx'; import { my_profile_tabs } from 'Constants/my-profile-tabs'; -import { useStores } from 'Stores'; const MyProfileForm = () => { const { general_store, my_profile_store } = useStores(); @@ -17,7 +18,6 @@ const MyProfileForm = () => { initialValues={{ contact_info: general_store.contact_info, default_advert_description: general_store.default_advert_description, - payment_info: my_profile_store.payment_info, }} onSubmit={my_profile_store.handleSubmit} validate={my_profile_store.validateForm} @@ -29,17 +29,17 @@ const MyProfileForm = () => { {({ field }) => ( } - error={errors.contact_info} - className='my-profile-form__textarea' - has_character_counter - initial_character_count={general_store.contact_info.length} max_characters={300} + type='textarea' /> )} @@ -47,19 +47,19 @@ const MyProfileForm = () => { {({ field }) => ( } - error={errors.default_advert_description} - hint={localize('This information will be visible to everyone.')} - is_relative_hint - className='my-profile-form__textarea' - has_character_counter - initial_character_count={general_store.default_advert_description.length} - max_characters={300} + type='textarea' /> )} @@ -71,12 +71,12 @@ const MyProfileForm = () => { className={classNames('my-profile-form__footer-button', { 'dc-btn--green': my_profile_store.is_submit_success, })} + has_effect is_disabled={!dirty || isSubmitting || !isValid} is_submit_success={my_profile_store.is_submit_success} - text={localize('Save')} - has_effect - primary large + primary + text={localize('Save')} /> )} @@ -93,13 +93,18 @@ const MyProfileForm = () => { return ( <> - {content} + +
{content}
+ { + // do nothing + }} pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)} + page_header_text={localize('Ad details')} > {content} diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js index c8f74bf96647..b34226a155cf 100644 --- a/packages/p2p/src/stores/general-store.js +++ b/packages/p2p/src/stores/general-store.js @@ -23,6 +23,7 @@ export default class GeneralStore extends BaseStore { balance; cancels_remaining = null; contact_info = ''; + default_advert_description = ''; error_code = ''; external_stores = {}; feature_level = null; @@ -84,6 +85,8 @@ export default class GeneralStore extends BaseStore { advertiser_relations_response: observable, //TODO: Remove this when backend has fixed is_blocked flag issue block_unblock_user_error: observable, balance: observable, + contact_info: observable, + default_advert_description: observable, external_stores: observable, feature_level: observable, formik_ref: observable, From 93ea141f7d3708729b850219ffc24fc6e7835c98 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 8 Jun 2023 12:47:19 +0800 Subject: [PATCH 2/4] chore: removed the role in div --- .../my-profile-form/__test__/my-profile-form.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx index 50b5b48e879d..4eb8a22e5e59 100644 --- a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx +++ b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx @@ -20,7 +20,7 @@ jest.mock('@deriv/components', () => ({ pageHeaderReturnFn = mock_store.setActiveTab, page_header_text = 'Ad details', }) => ( -
+
{page_header_text} {children} From d4bfbe654f7dfa0b27eb362f3374fb779c7ab01b Mon Sep 17 00:00:00 2001 From: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com> Date: Fri, 9 Jun 2023 10:26:58 +0800 Subject: [PATCH 3/4] Update packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> --- .../my-profile-form/__test__/my-profile-form.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx index 4eb8a22e5e59..7655f60b5a92 100644 --- a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx +++ b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx @@ -42,7 +42,7 @@ describe('', () => { }; }); - it('renders MyProfileForm component', () => { + it('should render MyProfileForm component', () => { render(); expect(screen.getAllByText('Contact details').length).toBe(2); From 2be75b38a4372d2ebd908fe35a06ea8ab35b220f Mon Sep 17 00:00:00 2001 From: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com> Date: Fri, 9 Jun 2023 10:27:10 +0800 Subject: [PATCH 4/4] Update packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> --- .../my-profile-form/__test__/my-profile-form.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx index 7655f60b5a92..c6f903569001 100644 --- a/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx +++ b/packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx @@ -49,7 +49,7 @@ describe('', () => { expect(screen.getAllByText('Instructions').length).toBe(2); }); - it('renders the Loading component when my_profile_store.is_loading is set to true', () => { + it('should render the Loading component when my_profile_store.is_loading is set to true', () => { mock_store.my_profile_store.is_loading = true; render();