Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

P2PS 899 refactor my profile form #5

Merged
merged 4 commits into from
Jun 9, 2023
Merged

P2PS 899 refactor my profile form #5

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
99d589e
chore: refactored MyProfileForm component
ameerul-deriv Jun 8, 2023
93ea141
chore: removed the role in div
ameerul-deriv Jun 8, 2023
d4bfbe6
Update packages/p2p/src/components/my-profile/my-profile-form/__test_…
ameerul-deriv Jun 9, 2023
2be75b3
Update packages/p2p/src/components/my-profile/my-profile-form/__test_…
ameerul-deriv Jun 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<ReturnType<typeof useStores>>;

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',
}) => (
<div>
{page_header_text}
<button onClick={pageHeaderReturnFn}>Return</button>
{children}
</div>
),
}));

describe('<MyProfileForm />', () => {
beforeEach(() => {
mock_store = {
my_profile_store: {
is_loading: false,
setActiveTab: jest.fn(),
},
general_store: {
contact_info: '',
default_advert_description: '',
},
};
});

it('renders MyProfileForm component', () => {
ameerul-deriv marked this conversation as resolved.
Show resolved Hide resolved
render(<MyProfileForm />);

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', () => {
ameerul-deriv marked this conversation as resolved.
Show resolved Hide resolved
mock_store.my_profile_store.is_loading = true;

render(<MyProfileForm />);

expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument();
});

it('expects the setActiveTab function to be called when return function is clicked', () => {
render(<MyProfileForm />);

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);
});
});
2 changes: 1 addition & 1 deletion ...nents/my-profile/my-profile-form/index.js → ...nents/my-profile/my-profile-form/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
51 changes: 28 additions & 23 deletions ...ofile/my-profile-form/my-profile-form.jsx → ...ofile/my-profile-form/my-profile-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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}
Expand All @@ -29,37 +29,37 @@ const MyProfileForm = () => {
{({ field }) => (
<Input
{...field}
type='textarea'
className='my-profile-form__textarea'
error={errors.contact_info}
has_character_counter
initial_character_count={general_store.contact_info.length}
label={
<Text color='less-prominent' size='xs'>
<Localize i18n_default_text='Contact details' />
</Text>
}
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'
/>
)}
</Field>
<Field name='default_advert_description'>
{({ field }) => (
<Input
{...field}
type='textarea'
className='my-profile-form__textarea'
error={errors.default_advert_description}
has_character_counter
hint={localize('This information will be visible to everyone.')}
initial_character_count={general_store?.default_advert_description?.length}
ameerul-deriv marked this conversation as resolved.
Show resolved Hide resolved
is_relative_hint
max_characters={300}
label={
<Text color='less-prominent' size='xs'>
<Localize i18n_default_text='Instructions' />
</Text>
}
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'
/>
)}
</Field>
Expand All @@ -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')}
/>
)}
</Observer>
Expand All @@ -93,13 +93,18 @@ const MyProfileForm = () => {

return (
<>
<DesktopWrapper className='my-profile-form'>{content}</DesktopWrapper>
<DesktopWrapper>
<div className='my-profile-form'>{content}</div>
</DesktopWrapper>
<MobileWrapper>
<MobileFullPageModal
className='my-profile-form'
is_modal_open={my_profile_store.active_tab === my_profile_tabs.AD_TEMPLATE}
page_header_text={localize('Ad details')}
onClickClose={() => {
// do nothing
}}
pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
page_header_text={localize('Ad details')}
>
{content}
</MobileFullPageModal>
Expand Down
3 changes: 3 additions & 0 deletions packages/p2p/src/stores/general-store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down