chore: fix test case failing for poi-confirm-with-example-form-container

Author: suisin-deriv

packages/account/src/Components/forms/personal-details-form.jsx

@@ -43,7 +43,7 @@ const PersonalDetailsForm = props => {
     // need to put this check related to DIEL clients
     const is_svg_only = is_svg && !is_eu_user;
 
-    const is_country_code_dropdown_enabled = false;
+    const is_country_code_dropdown_enabled = true;
 
     const { errors, touched, values, setFieldValue, handleChange, handleBlur } = useFormikContext();
 
@@ -388,6 +388,7 @@ const PersonalDetailsForm = props => {
                         )}
                         {!is_svg_only && 'phone' in values && (
                             <PhoneField
+                                is_country_code_dropdown_enabled={is_country_code_dropdown_enabled}
                                 handleChange={handleChange}
                                 setFieldValue={setFieldValue}
                                 country_code_list={legacy_core_countries_list}

packages/account/src/Components/personal-details/personal-details.tsx

@@ -79,7 +79,7 @@ const PersonalDetails = observer(
         } = useStore();
         const { account_status, account_settings, residence, real_account_signup_target } = props;
 
-        const is_country_code_dropdown_enabled = false;
+        const is_country_code_dropdown_enabled = true;
         const { isDesktop } = useDevice();
         const handleCancel = (values: TPersonalDetailsSectionForm) => {
             const current_step = getCurrentStep() - 1;

packages/account/src/Components/poi/poi-confirm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx

@@ -4,12 +4,18 @@ import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PoiConfirmWithExampleFormContainer from '../poi-confirm-with-example-form-container';
 import { APIProvider } from '@deriv/api';
+import { useGetPhoneNumberList } from '@deriv/hooks';
 
 jest.mock('@deriv/quill-icons', () => ({
     ...jest.requireActual('@deriv/quill-icons'),
     DerivLightNameDobPoiIcon: () => 'DerivLightNameDobPoiIcon',
 }));
 
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useGetPhoneNumberList: jest.fn(),
+}));
+
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
     isDesktop: jest.fn(() => true),
@@ -46,6 +52,11 @@ jest.mock('@deriv/shared', () => ({
 describe('<PoiConfirmWithExampleFormContainer/>', () => {
     beforeAll(() => {
         (ReactDOM.createPortal as jest.Mock) = jest.fn(element => element);
+        (useGetPhoneNumberList as jest.Mock).mockReturnValue({
+            legacy_core_countries_list: [
+                { text: 'United States (+1)', value: '+1', id: '1_US', carriers: [], disabled: false },
+            ],
+        });
     });
     afterEach(() => {
         (ReactDOM.createPortal as jest.Mock).mockClear();
@@ -71,7 +82,7 @@ describe('<PoiConfirmWithExampleFormContainer/>', () => {
         expect(await screen.findByText('DerivLightNameDobPoiIcon')).toBeInTheDocument();
         expect(screen.getByText(clarification_message)).toBeInTheDocument();
         const checkbox_el: HTMLInputElement = screen.getByRole('checkbox');
-        expect(checkbox_el.checked).toBeFalsy();
+        expect(checkbox_el).not.toBeChecked();
 
         const input_fields: HTMLInputElement[] = screen.getAllByRole('textbox');
         expect(input_fields).toHaveLength(3);
@@ -84,29 +95,29 @@ describe('<PoiConfirmWithExampleFormContainer/>', () => {
         renderComponent({});
 
         const checkbox_el: HTMLInputElement = await screen.findByRole('checkbox');
-        expect(checkbox_el.checked).toBeFalsy();
+        expect(checkbox_el).not.toBeChecked();
 
         const input_fields: HTMLInputElement[] = screen.getAllByRole('textbox');
         const first_name_input = input_fields[0];
         const last_name_input = input_fields[1];
         const dob_input = input_fields[2];
 
-        expect(first_name_input.value).toBe('test first name');
-        expect(last_name_input.value).toBe('test last name');
-        expect(dob_input.value).toBe('2003-08-02');
+        expect(first_name_input).toHaveValue('test first name');
+        expect(last_name_input).toHaveValue('test last name');
+        expect(dob_input).toHaveValue('2003-08-02');
 
-        userEvent.clear(first_name_input);
-        userEvent.clear(last_name_input);
-        userEvent.type(first_name_input, 'new test first name');
-        userEvent.type(last_name_input, 'new test last name');
+        await userEvent.clear(first_name_input);
+        await userEvent.clear(last_name_input);
+        await userEvent.type(first_name_input, 'new test first name');
+        await userEvent.type(last_name_input, 'new test last name');
 
         await waitFor(() => {
             expect(first_name_input.value).toBe('new test first name');
             expect(last_name_input.value).toBe('new test last name');
         });
 
         const button_el = screen.getByRole('button');
-        userEvent.click(button_el);
+        await userEvent.click(button_el);
         await userEvent.click(button_el);
         act(() => {
             jest.advanceTimersByTime(500);

packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx

@@ -57,7 +57,7 @@ const StepperHeader = ({ has_target, has_real_account, items, getCurrentStep, ge
 const AccountWizard = observer(props => {
     const { client, notifications, ui, traders_hub } = useStore();
 
-    const is_country_code_dropdown_enabled = false;
+    const is_country_code_dropdown_enabled = true;
     const { selected_phone_code } = useGetPhoneNumberList();
 
     const { is_eu_user } = traders_hub;