From 51272c0fc426fd846fae8039bb69a134470d5c9d Mon Sep 17 00:00:00 2001 From: Attiya Ishaque Date: Wed, 2 Nov 2022 18:03:13 +0500 Subject: [PATCH] fix: [VAN-1135] Fix selecting country error while creating account (#656) --- src/register/CountryDropdown.jsx | 15 ++++++-- src/register/RegistrationPage.jsx | 6 ++-- src/register/tests/RegistrationPage.test.jsx | 37 +++++++++++++++++++- 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/register/CountryDropdown.jsx b/src/register/CountryDropdown.jsx index 71049897..6b464c88 100644 --- a/src/register/CountryDropdown.jsx +++ b/src/register/CountryDropdown.jsx @@ -117,9 +117,14 @@ class CountryDropdown extends React.Component { if (this.props.handleFocus) { this.props.handleFocus(e); } } - handleOnBlur(e, itemClicked = false) { + handleOnBlur(e, itemClicked = false, country = '') { const { name } = e.target; - const countryValue = itemClicked ? e.target.value : this.state.displayValue; + let countryValue = ''; + if (country) { + countryValue = country; + } else { + countryValue = itemClicked ? e.target.value : this.state.displayValue; + } // For a better user experience, do not validate when focus out from 'country' field // and focus on 'countryItem' or 'countryExpand' button. if (e.relatedTarget && e.relatedTarget.name === 'countryItem' && (name === 'country' || name === 'countryExpand')) { @@ -134,8 +139,12 @@ class CountryDropdown extends React.Component { } handleItemClick(e) { + let countryValue = ''; + if (!e.target.value) { + countryValue = e.target.parentElement.parentElement.value; + } this.setState({ dropDownItems: '', icon: this.expandMoreButton() }); - this.handleOnBlur(e, true); + this.handleOnBlur(e, true, countryValue); } expandMoreButton() { diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 25d2e7b4..d72fdd88 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -525,7 +525,8 @@ class RegistrationPage extends React.Component { value = value.trim(); // eslint-disable-line no-param-reassign if (value) { const normalizedValue = value.toLowerCase(); - let selectedCountry = this.countryList.find((o) => o[COUNTRY_DISPLAY_KEY].toLowerCase() === normalizedValue); + let selectedCountry = ( + this.countryList.find((o) => o[COUNTRY_DISPLAY_KEY].toLowerCase().trim() === normalizedValue)); if (selectedCountry) { value = selectedCountry[COUNTRY_CODE_KEY]; // eslint-disable-line no-param-reassign errors.country = ''; @@ -533,7 +534,8 @@ class RegistrationPage extends React.Component { } else { // Handling a case here where user enters a valid country code that needs to be // evaluated and set its value as a valid value. - selectedCountry = this.countryList.find((o) => o[COUNTRY_CODE_KEY].toLowerCase() === normalizedValue); + selectedCountry = ( + this.countryList.find((o) => o[COUNTRY_CODE_KEY].toLowerCase().trim() === normalizedValue)); if (selectedCountry) { value = selectedCountry[COUNTRY_CODE_KEY]; // eslint-disable-line no-param-reassign errors.country = ''; diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index 7fdd83e2..e95f969a 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/src/register/tests/RegistrationPage.test.jsx @@ -4,7 +4,9 @@ import { Provider } from 'react-redux'; import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner'; import { getConfig, mergeConfig } from '@edx/frontend-platform'; import * as analytics from '@edx/frontend-platform/analytics'; -import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { + configure, getLocale, injectIntl, IntlProvider, +} from '@edx/frontend-platform/i18n'; import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router-dom'; import renderer from 'react-test-renderer'; @@ -25,6 +27,10 @@ import RegistrationFailureMessage from '../RegistrationFailure'; import RegistrationPage from '../RegistrationPage'; jest.mock('@edx/frontend-platform/analytics'); +jest.mock('@edx/frontend-platform/i18n', () => ({ + ...jest.requireActual('@edx/frontend-platform/i18n'), + getLocale: jest.fn(), +})); analytics.sendTrackEvent = jest.fn(); analytics.sendPageEvent = jest.fn(); @@ -147,6 +153,7 @@ describe('RegistrationPage', () => { // ******** test registration form submission ******** it('should submit form for valid input', () => { + getLocale.mockImplementation(() => ('en-us')); jest.spyOn(global.Date, 'now').mockImplementation(() => 0); delete window.location; @@ -1012,6 +1019,34 @@ describe('RegistrationPage', () => { registerPage.find('RegistrationPage').instance().shouldComponentUpdate(nextProps); expect(registerPage.find('RegistrationPage').state('country')).toEqual('PK'); }); + + it('should set country in component state on country change with translations', () => { + getLocale.mockImplementation(() => ('ar-ae')); + registrationFormData = { + errors: { ...registrationFormData.errors }, + country: 'AF', + }; + store.dispatch = jest.fn(store.dispatch); + + const registerPage = mount(reduxWrapper()); + registerPage.find('input#country').simulate('focus'); + registerPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: 'أفغانستان ', name: 'countryItem' } }); + expect(store.dispatch).toHaveBeenCalledWith(setRegistrationFormData(registrationFormData)); + }); + + it('should set country in component state on country change with chrome translations', () => { + getLocale.mockImplementation(() => ('en-us')); + registrationFormData = { + errors: { ...registrationFormData.errors }, + country: 'AF', + }; + store.dispatch = jest.fn(store.dispatch); + + const registerPage = mount(reduxWrapper()); + registerPage.find('input#country').simulate('focus'); + registerPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: undefined, name: undefined, parentElement: { parentElement: { value: 'Afghanistan' } } } }); + expect(store.dispatch).toHaveBeenCalledWith(setRegistrationFormData(registrationFormData)); + }); }); describe('TestDynamicFields', () => {