Skip to content

Commit

Permalink
Update components behavior and fix tests to accomodate to the new Pho…
Browse files Browse the repository at this point in the history
…neInput
  • Loading branch information
danielmx-dev committed Jul 16, 2024
1 parent d6ddc1b commit 2f0f9ed
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 45 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React, { useEffect, useState, useCallback } from 'react';
import { __ } from '@wordpress/i18n';
// eslint-disable-next-line import/no-unresolved
import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
import { validatePhoneNumber } from '@woocommerce/components/build/phone-number-input/validation';

/**
* Internal dependencies
Expand Down Expand Up @@ -92,9 +93,14 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
const handleCheckboxClick = ( e ) => {
const isChecked = e.target.checked;
if ( isChecked ) {
setPhoneNumber( getPhoneFieldValue() );
const phoneFieldValue = getPhoneFieldValue();
setPhoneNumber( phoneFieldValue );
onPhoneValidationChange(
validatePhoneNumber( phoneFieldValue, '' )
);
} else {
setPhoneNumber( '' );
onPhoneValidationChange( null );
if ( isBlocksCheckout ) {
sendExtensionData( true );
}
Expand Down Expand Up @@ -245,6 +251,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
inputProps={ {
name:
'woopay_user_phone_field[no-country-code]',
id: 'woopay_user_phone_field_no_country_code',
} }
isBlocksCheckout={ isBlocksCheckout }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
* External dependencies
*/
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import {
render,
screen,
waitFor,
queryByAttribute,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// eslint-disable-next-line import/no-unresolved
import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
Expand Down Expand Up @@ -248,9 +253,19 @@ describe( 'CheckoutPageSaveUser', () => {
} );

it( 'fills the phone input on blocks checkout with phone number field fallback', async () => {
render( <CheckoutPageSaveUser isBlocksCheckout={ true } />, {
wrapper: BlocksCheckoutEnvironmentMock,
} );
const { container } = render(
<CheckoutPageSaveUser isBlocksCheckout={ true } />,
{
wrapper: BlocksCheckoutEnvironmentMock,
}
);

const getPhoneInput = () =>
queryByAttribute(
'id',
container,
'woopay_user_phone_field_no_country_code'
);

const saveMyInfoCheckbox = screen.getByLabelText(
'Securely save my information for 1-click checkout'
Expand All @@ -261,9 +276,7 @@ describe( 'CheckoutPageSaveUser', () => {
// click on the checkbox to show the phone field, input should be filled with the first phone input field
userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
'2015555551'
);
expect( getPhoneInput().value ).toEqual( '2015555551' );

// click on the checkbox to hide/show it again (and reset the previously entered values)
userEvent.click( saveMyInfoCheckbox );
Expand All @@ -272,9 +285,7 @@ describe( 'CheckoutPageSaveUser', () => {

userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
'2015555552'
);
expect( getPhoneInput().value ).toEqual( '2015555552' );

// click on the checkbox to hide/show it again (and reset the previously entered values)
userEvent.click( saveMyInfoCheckbox );
Expand All @@ -283,9 +294,7 @@ describe( 'CheckoutPageSaveUser', () => {

userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
'2015555553'
);
expect( getPhoneInput().value ).toEqual( '2015555553' );

// click on the checkbox to hide/show it again (and reset the previously entered values)
userEvent.click( saveMyInfoCheckbox );
Expand All @@ -294,9 +303,7 @@ describe( 'CheckoutPageSaveUser', () => {

userEvent.click( saveMyInfoCheckbox );
expect( saveMyInfoCheckbox ).toBeChecked();
expect( screen.getByLabelText( 'Mobile phone number' ).value ).toEqual(
''
);
expect( getPhoneInput().value ).toEqual( '' );
await waitFor( () => expect( extensionCartUpdate ).toHaveBeenCalled() );
} );

Expand Down
7 changes: 1 addition & 6 deletions client/settings/phone-input/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import React from 'react';
import React, { useEffect } from 'react';

Check warning on line 4 in client/settings/phone-input/index.tsx

View workflow job for this annotation

GitHub Actions / JS linting

'useEffect' is defined but never used
import { __ } from '@wordpress/i18n';

Check warning on line 5 in client/settings/phone-input/index.tsx

View workflow job for this annotation

GitHub Actions / JS linting

'__' is defined but never used
import { PhoneNumberInput } from '@woocommerce/components';
import { validatePhoneNumber } from '@woocommerce/components/build/phone-number-input/validation';
Expand Down Expand Up @@ -56,11 +56,6 @@ const PhoneInput = ( {
<PhoneNumberInput
value={ value }
onChange={ handlePhoneInputChange }
placeholder={ __( 'Mobile number', 'woocommerce-payments' ) }
aria-label={
inputProps.ariaLabel ||
__( 'Mobile phone number', 'woocommerce-payments' )
}
name={ inputProps.name }
id={ inputProps.id }
className="phone-input input-text"
Expand Down
27 changes: 17 additions & 10 deletions client/settings/phone-input/test/phone-input.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
* External dependencies
*/
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import {
render,
screen,
fireEvent,
queryByAttribute,
} from '@testing-library/react';

/**
* Internal dependencies
Expand All @@ -12,6 +17,7 @@ import PhoneInput from '../';
describe( 'PhoneInput', () => {
const handlePhoneNumberChangeMock = jest.fn();
const handlePhoneValidationChangeMock = jest.fn();
const phoneInputId = 'phone-input-id';

beforeEach( () => {
window.wcpaySettings = {
Expand All @@ -22,15 +28,16 @@ describe( 'PhoneInput', () => {
} );

it( 'should render phone number input', () => {
render(
const { container } = render(
<PhoneInput
onValueChange={ handlePhoneNumberChangeMock }
onValidationChange={ handlePhoneValidationChangeMock }
id={ phoneInputId }
value="123"
/>
);
expect(
screen.queryByLabelText( 'Mobile phone number' )
queryByAttribute( 'id', container, phoneInputId )
).toBeInTheDocument();
} );

Expand All @@ -42,38 +49,38 @@ describe( 'PhoneInput', () => {
value="123"
/>
);
expect(
screen.queryByRole( 'combobox', { name: 'United States: +1' } )
).toBeInTheDocument();
expect( screen.queryByText( '+1' ) ).toBeInTheDocument();
} );

it( 'should call the onValueChange with phone number including country code', () => {
render(
const { container } = render(
<PhoneInput
onValueChange={ handlePhoneNumberChangeMock }
onValidationChange={ handlePhoneValidationChangeMock }
id={ phoneInputId }
value="123"
/>
);

expect( handlePhoneNumberChangeMock ).not.toHaveBeenCalled();

const input = screen.queryByLabelText( 'Mobile phone number' ); // The label text for our input.
const input = queryByAttribute( 'id', container, phoneInputId );
fireEvent.change( input, { target: { value: '201' } } );

expect( handlePhoneNumberChangeMock ).toHaveBeenCalledWith( '+1201' );
} );

it( 'should call the onValidationChange with true if value is valid', () => {
render(
const { container } = render(
<PhoneInput
onValueChange={ handlePhoneNumberChangeMock }
onValidationChange={ handlePhoneValidationChangeMock }
id={ phoneInputId }
value="123"
/>
);

const input = screen.queryByLabelText( 'Mobile phone number' ); // The label text for our input.
const input = queryByAttribute( 'id', container, phoneInputId );

expect( handlePhoneValidationChangeMock ).toHaveBeenLastCalledWith(
false
Expand Down
9 changes: 7 additions & 2 deletions client/settings/support-phone-input/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/**
* External dependencies
*/
import { validatePhoneNumber } from '@woocommerce/components/build/phone-number-input/validation';
import { BaseControl, Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect, useRef, useMemo } from 'react';

/**
* Internal dependencies
Expand All @@ -22,12 +23,16 @@ const SupportPhoneInput = ( { setInputVallid } ) => {
?.account_business_support_phone?.message;

const currentPhone = useRef( supportPhone ).current;
const currentPhoneValid = useMemo(
() => validatePhoneNumber( currentPhone ),
[ currentPhone ]
);
const isEmptyPhoneValid = supportPhone === '' && currentPhone === '';
const isDevModeEnabled = useDevMode();
const isTestPhoneValid =
isDevModeEnabled && supportPhone === '+10000000000';

const [ isPhoneValid, setPhoneValidity ] = useState( true );
const [ isPhoneValid, setPhoneValidity ] = useState( currentPhoneValid );
if ( ! isTestPhoneValid && ! isPhoneValid && ! isEmptyPhoneValid ) {
supportPhoneError = __(
'Please enter a valid phone number.',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { fireEvent, render, screen } from '@testing-library/react';
import { fireEvent, render, queryByAttribute } from '@testing-library/react';

/**
* Internal dependencies
Expand Down Expand Up @@ -39,14 +39,22 @@ describe( 'SupportPhoneInput', () => {
'+12345678901',
setSupportPhone,
] );
render( <SupportPhoneInput /> );
const { container } = render( <SupportPhoneInput /> );

const newPhone = '+12377778888';
fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
target: { value: newPhone },
} );
const expectedNewPhone = '+12377778888';
const newPhone = expectedNewPhone.replace( '+1', '' );
fireEvent.change(
queryByAttribute(
'id',
container,
'account-business-support-phone-input'
),
{
target: { value: newPhone },
}
);

expect( setSupportPhone ).toHaveBeenCalledWith( newPhone );
expect( setSupportPhone ).toHaveBeenCalledWith( expectedNewPhone );
} );

it( 'displays error message for empty phone input when it has been set', async () => {
Expand All @@ -64,9 +72,16 @@ describe( 'SupportPhoneInput', () => {
// Mock that the phone number input is set to empty.
useAccountBusinessSupportPhone.mockReturnValue( [ '', jest.fn() ] );

fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
target: { value: '' },
} );
fireEvent.change(
queryByAttribute(
'id',
container,
'account-business-support-phone-input'
),
{
target: { value: '' },
}
);

// The error message is displayed.
expect(
Expand Down
3 changes: 3 additions & 0 deletions client/settings/transactions/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ import { select } from '@wordpress/data';
jest.mock( '@wordpress/data', () => ( {
select: jest.fn(),
registerStore: jest.fn(),
dispatch: jest.fn().mockReturnValue( {
onLoad: jest.fn(),
} ),
} ) );
const settingsMock = {
account_country: 'US',
Expand Down

0 comments on commit 2f0f9ed

Please sign in to comment.