From c4fb3f72e5badf20f44b3b9e5f2a3780efef9a90 Mon Sep 17 00:00:00 2001
From: Attiya Ishaque <atiya.ishaq@arbisoft.com>
Date: Fri, 9 Dec 2022 15:09:40 +0500
Subject: [PATCH] fix: Fix selecting country error while applying translations
 (#693)

---
 src/register/data/utils.js                   |  6 ++--
 src/register/tests/RegistrationPage.test.jsx | 30 +++++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

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(<IntlRegistrationPage {...props} />));
+      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(<IntlRegistrationPage {...props} />));
+      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', () => {