Shaheer/90982/personal details spec

packages/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details.spec.js

@@ -1,6 +1,6 @@
 import { jest, test } from '@jest/globals';
 import React from 'react';
-import { cleanup, render, waitForElementToBeRemoved, waitFor } from '@testing-library/react';
+import { cleanup, render, waitForElementToBeRemoved, waitFor, screen, fireEvent } from '@testing-library/react';
 import { createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 import { PersonalDetailsForm } from '../personal-details.jsx';
@@ -19,6 +19,45 @@ jest.mock('@deriv/shared/src/services/ws-methods', () => ({
 
 describe('<PersonalDetailsForm />', () => {
     const history = createBrowserHistory();
+    const mock_props = {
+        authentication_status: {},
+        is_eu: true,
+        is_mf: false,
+        is_uk: false,
+        is_svg: false,
+        is_virtual: false,
+        residence_list: [{}],
+        states_list: [],
+        refreshNotifications: jest.fn(),
+        showPOAAddressMismatchSuccessNotification: jest.fn(),
+        showPOAAddressMismatchFailureNotification: jest.fn(),
+        Notifications: '',
+        fetchResidenceList: jest.fn(),
+        fetchStatesList: jest.fn(),
+        has_residence: false,
+        account_settings: {},
+        getChangeableFields: jest
+            .fn()
+            .mockReturnValue(['first_name', 'last_name', 'phone', 'address_line_1', 'address_city']),
+        current_landing_company: {},
+        history: {},
+        is_social_signup: false,
+        updateAccountStatus: jest.fn(),
+        has_poa_address_mismatch: false,
+        is_language_changing: false,
+    };
+
+    const renderComponent = (modified_props = {}) => {
+        const updated_props = {
+            ...mock_props,
+            ...modified_props,
+        };
+        render(
+            <Router history={history}>
+                <PersonalDetailsForm {...updated_props} />
+            </Router>
+        );
+    };
 
     it('should_render_successfully', async () => {
         window.HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -54,6 +93,105 @@ describe('<PersonalDetailsForm />', () => {
         );
     });
 
+    it('should render all the personal details fields', async () => {
+        renderComponent();
+        await waitFor(() => {
+            expect(screen.queryByText('First name*')).toBeInTheDocument();
+            expect(screen.queryByText('Last name*')).toBeInTheDocument();
+            expect(screen.queryByText('Place of birth*')).toBeInTheDocument();
+            expect(screen.queryByText('Date of birth*')).toBeInTheDocument();
+            expect(screen.queryByText('Citizenship*')).toBeInTheDocument();
+            expect(screen.queryByText('Country of residence*')).toBeInTheDocument();
+            expect(screen.queryByText('Phone number*')).toBeInTheDocument();
+            expect(screen.queryByText('First line of address*')).toBeInTheDocument();
+            expect(screen.queryByText('Second line of address (optional)')).toBeInTheDocument();
+            expect(screen.queryByText('Town/City*')).toBeInTheDocument();
+            expect(screen.queryByText('State/Province (optional)')).toBeInTheDocument();
+            expect(screen.queryByText('Postal/ZIP code')).toBeInTheDocument();
+        });
+    });
+
+    it('should display label "Place of birth" without asterisk if is_svg is true', async () => {
+        renderComponent({ is_svg: true });
+        await waitFor(() => {
+            expect(screen.queryByText('Place of birth')).toBeInTheDocument();
+        });
+    });
+
+    it('should display label "Citizenship" without asterisk if is_eu is false', async () => {
+        renderComponent({ is_eu: false });
+        await waitFor(() => {
+            expect(screen.queryByText('Citizenship')).toBeInTheDocument();
+        });
+    });
+
+    it('should have "required" validation errors on required form fields', async () => {
+        renderComponent();
+        await waitFor(async () => {
+            const first_name = screen.getByTestId('dt_first_name');
+            const last_name = screen.getByTestId('dt_last_name');
+            const phone = screen.getByTestId('dt_phone');
+            const address_line_1 = screen.getByTestId('dt_address_line_1');
+            const address_city = screen.getByTestId('dt_address_city');
+            fireEvent.blur(first_name);
+            fireEvent.blur(last_name);
+            fireEvent.blur(phone);
+            fireEvent.blur(address_line_1);
+            fireEvent.blur(address_city);
+        });
+        expect(screen.getAllByText('This field is required')).toHaveLength(5);
+    });
+
+    it('should display error for 2-50 characters length validation, for First and Last name when entered characters are less than 2', async () => {
+        renderComponent();
+        await waitFor(async () => {
+            const first_name = screen.getByTestId('dt_first_name');
+            const last_name = screen.getByTestId('dt_last_name');
+            fireEvent.input(first_name, { target: { value: 'a' } });
+            fireEvent.input(last_name, { target: { value: 'b' } });
+        });
+        expect(screen.getAllByText('You should enter 2-50 characters.')).toHaveLength(2);
+    });
+
+    it('should display error for 2-50 characters length validation, for First and Last name when entered characters are more than 50', async () => {
+        renderComponent();
+        await waitFor(async () => {
+            const first_name = screen.getByTestId('dt_first_name');
+            const last_name = screen.getByTestId('dt_last_name');
+            fireEvent.input(first_name, { target: { value: 'fifty chars fifty chars fifty chars fifty chars fifty' } });
+            fireEvent.input(last_name, { target: { value: 'fifty chars fifty chars fifty chars fifty chars fifty' } });
+        });
+        expect(screen.getAllByText('You should enter 2-50 characters.')).toHaveLength(2);
+    });
+
+    it('should display error for the regex validation, for First and Last name when unacceptable characters are entered', async () => {
+        renderComponent();
+        await waitFor(async () => {
+            const first_name = screen.getByTestId('dt_first_name');
+            const last_name = screen.getByTestId('dt_last_name');
+            fireEvent.input(first_name, { target: { value: 'test 3' } });
+            fireEvent.input(last_name, { target: { value: 'name_' } });
+            expect(screen.getAllByText('Letters, spaces, periods, hyphens, apostrophes only.')).toHaveLength(2);
+            fireEvent.input(first_name, { target: { value: 'name_' } });
+            fireEvent.input(last_name, { target: { value: 'test 3' } });
+            expect(screen.getAllByText('Letters, spaces, periods, hyphens, apostrophes only.')).toHaveLength(2);
+        });
+    });
+
+    it('should not display error for the regex validation, for First and Last name when acceptable characters are entered', async () => {
+        renderComponent();
+        await waitFor(async () => {
+            const first_name = screen.getByTestId('dt_first_name');
+            const last_name = screen.getByTestId('dt_last_name');
+            fireEvent.input(first_name, { target: { value: "test-with' chars." } });
+            fireEvent.input(last_name, { target: { value: 'Deuxième Prénom résidence' } });
+            expect(screen.queryByText('Letters, spaces, periods, hyphens, apostrophes only.')).not.toBeInTheDocument();
+            fireEvent.input(first_name, { target: { value: 'Deuxième Prénom résidence' } });
+            fireEvent.input(last_name, { target: { value: "test-with' chars." } });
+            expect(screen.queryByText('Letters, spaces, periods, hyphens, apostrophes only.')).not.toBeInTheDocument();
+        });
+    });
+
     test.todo('Personal details component tests for different landing companies');
     test.todo('Personal detail update Profile');
 });

packages/account/src/Sections/Profile/PersonalDetails/personal-details.jsx

@@ -449,7 +449,7 @@ export const PersonalDetailsForm = ({
     const showForm = show_form => setRestState({ show_form });
 
     const isChangeableField = name => {
-        return rest_state.changeable_fields.some(field => field === name);
+        return rest_state.changeable_fields?.some(field => field === name);
     };
 
     const initializeFormValues = () => {
@@ -584,6 +584,7 @@ export const PersonalDetailsForm = ({
                                 'account-form account-form__personal-details--dashboard': is_appstore,
                             })}
                             onSubmit={handleSubmit}
+                            data-testid='dt_account_personal_details_section'
                         >
                             <FormBody scroll_offset={isMobile() ? '199px' : '80px'}>
                                 <FormSubHeader title={localize('Details')} />
@@ -652,6 +653,7 @@ export const PersonalDetailsForm = ({
                                                         disabled={!isChangeableField('first_name')}
                                                         error={errors.first_name}
                                                         id={'first_name'}
+                                                        data-testid='dt_first_name'
                                                     />
                                                     <Input
                                                         id={'last_name'}
@@ -665,6 +667,7 @@ export const PersonalDetailsForm = ({
                                                         required
                                                         disabled={!isChangeableField('last_name')}
                                                         error={errors.last_name}
+                                                        data-testid='dt_last_name'
                                                     />
                                                 </InputGroup>
                                             </DesktopWrapper>
@@ -682,6 +685,7 @@ export const PersonalDetailsForm = ({
                                                         required
                                                         disabled={!isChangeableField('first_name')}
                                                         error={errors.first_name}
+                                                        data-testid='dt_first_name'
                                                     />
                                                 </fieldset>
                                                 <fieldset className='account-form__fieldset'>
@@ -697,6 +701,7 @@ export const PersonalDetailsForm = ({
                                                         required
                                                         disabled={!isChangeableField('last_name')}
                                                         error={errors.last_name}
+                                                        data-testid='dt_last_name'
                                                     />
                                                 </fieldset>
                                             </MobileWrapper>
@@ -872,6 +877,7 @@ export const PersonalDetailsForm = ({
                                                     onBlur={handleBlur}
                                                     required
                                                     error={errors.phone}
+                                                    data-testid='dt_phone'
                                                 />
                                             </fieldset>
                                         </FormBodySection>
@@ -1007,6 +1013,7 @@ export const PersonalDetailsForm = ({
                                                             error={errors.address_line_1}
                                                             required
                                                             disabled={!isChangeableField('address_line_1')}
+                                                            data-testid='dt_address_line_1'
                                                         />
                                                     </fieldset>
                                                     <fieldset className='account-form__fieldset'>
@@ -1040,6 +1047,7 @@ export const PersonalDetailsForm = ({
                                                             onBlur={handleBlur}
                                                             required
                                                             disabled={!isChangeableField('address_city')}
+                                                            data-testid='dt_address_city'
                                                         />
                                                     </fieldset>
                                                     <fieldset className='account-form__fieldset'>

packages/shared/src/utils/location/location.ts

@@ -15,7 +15,7 @@ export type TLocationList = TType & {
 
 export const getLocation = (location_list: TLocationList[], value: string, type: keyof TType) => {
     const location_obj = location_list.find(
-        location => location[type === 'text' ? 'value' : 'text'].toLowerCase() === value.toLowerCase()
+        location => location[type === 'text' ? 'value' : 'text']?.toLowerCase() === value.toLowerCase()
     );
 
     if (location_obj) return location_obj[type];

packages/shared/src/utils/validation/declarative-validation-rules.ts

@@ -25,17 +25,17 @@ export const validAddress = (value: string, options?: TOptions) => {
     if (options?.is_required && (!value || value.match(/^\s*$/))) {
         return {
             is_ok: false,
-            message: form_error_messages.empty_address(),
+            message: form_error_messages?.empty_address(),
         };
     } else if (!validLength(value, { min: 0, max: 70 })) {
         return {
             is_ok: false,
-            message: form_error_messages.maxNumber(70),
+            message: form_error_messages?.maxNumber(70),
         };
     } else if (!/^[\p{L}\p{Nd}\s'.,:;()\u00b0@#/-]{0,70}$/u.test(value)) {
         return {
             is_ok: false,
-            message: form_error_messages.address(),
+            message: form_error_messages?.address(),
         };
     }
     return { is_ok: true };