diff --git a/src/register/data/utils.js b/src/register/data/utils.js
index c73e0dd9..99f3ba0c 100644
--- a/src/register/data/utils.js
+++ b/src/register/data/utils.js
@@ -97,8 +97,10 @@ export function validateCountryField(value, countryList, errorMessage) {
// evaluated and set its value as a valid value.
const selectedCountry = countryList.find(
(country) => (
- country[COUNTRY_DISPLAY_KEY].toLowerCase() === normalizedValue
- || country[COUNTRY_CODE_KEY].toLowerCase() === normalizedValue
+ // When translations apply extra space added in country value so we should
+ // trim that.
+ country[COUNTRY_DISPLAY_KEY].toLowerCase().trim() === normalizedValue
+ || country[COUNTRY_CODE_KEY].toLowerCase().trim() === normalizedValue
),
);
if (selectedCountry) {
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index 22c51def..5976ed5e 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 { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
@@ -26,6 +28,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();
@@ -150,6 +156,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;
@@ -938,6 +945,27 @@ describe('RegistrationPage', () => {
expect(registrationPage.find('input#password').props().value).toEqual('password1');
expect(registrationPage.find('.email-warning-alert-link').first().text()).toEqual('john.doe@hotmail.com');
});
+
+ it('should set country in component state on country change with translations', () => {
+ getLocale.mockImplementation(() => ('ar-ae'));
+
+ const registrationPage = mount(reduxWrapper());
+ registrationPage.find('input#country').simulate('focus');
+ registrationPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: 'أفغانستان ', name: 'countryItem' } });
+ expect(registrationPage.find('div[feedback-for="country"]').exists()).toBeFalsy();
+ });
+
+ it('should set country in component state on country change with chrome translations', () => {
+ getLocale.mockImplementation(() => ('en-us'));
+
+ store.dispatch = jest.fn(store.dispatch);
+
+ const registrationPage = mount(reduxWrapper());
+ registrationPage.find('input#country').simulate('focus');
+ registrationPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: undefined, name: undefined, parentElement: { parentElement: { value: 'Afghanistan' } } } });
+ expect(registrationPage.find('input#country').props().value).toEqual('Afghanistan');
+ expect(registrationPage.find('div[feedback-for="country"]').exists()).toBeFalsy();
+ });
});
describe('Test Configurable Fields', () => {