Merge pull request #3505 from LLK/revert-3495-revert-3468-country-data-name-fix

Revert "Revert "fixed country options to use full country name string as option value""

src/components/join-flow/country-step.jsx

@@ -27,7 +27,7 @@ class CountryStep extends React.Component {
     }
     setCountryOptions () {
         if (this.countryOptions.length === 0) {
-            this.countryOptions = [...countryData.registrationCountryOptions];
+            this.countryOptions = [...countryData.registrationCountryNameOptions];
             this.countryOptions.unshift({ // add placeholder as first option
                 disabled: true,
                 label: this.props.intl.formatMessage({id: 'registration.selectCountry'}),

src/components/registration/steps.jsx

@@ -44,7 +44,7 @@ const getCountryOptions = reactIntl => (
             disabled: true,
             value: ''
         },
-        ...countryData.registrationCountryOptions
+        ...countryData.registrationCountryCodeOptions
     ]
 );
 

src/lib/country-data.js

@@ -1059,23 +1059,28 @@ const dupeCommonCountries = module.exports.dupeCommonCountries = (startingCountr
 };
 
 /*
- * registrationCountryOptions is the result of taking the standard countryInfo,
+ * registrationCountryNameOptions is the result of taking the standard countryInfo,
- * and duplicating 'United States of America' and 'United Kingdom' at the top of the list.
+ * setting a 'value' key and a 'label' key both to the country data's 'name' value,
+ * but using the 'display' value for 'label' instead of 'name' if 'display' exists;
+ * then duplicating 'United States of America' and 'United Kingdom' at the top of the list.
  * The result is an array like:
  * [
- *    {code: 'us', name: 'United States', display: 'United States of America'},
+ *    {value: 'United States', label: 'United States of America'},
- *    {code: 'gb', name: 'United Kingdom'},
+ *    {value: 'United Kingdom', label: 'United Kingdom'},
- *    {code: 'af', name: 'Afghanistan'},
+ *    {value: 'Afghanistan', label: 'Afghanistan'},
  *    ...
- *    {code: 'ae', name: 'United Arab Emirates'},
+ *    {value: 'United Arab Emirates', label: 'United Arab Emirates'},
- *    {code: 'us', name: 'United States', display: 'United States of America'},
+ *    {value: 'United States', label: 'United States of America'},
- *    {code: 'gb', name: 'United Kingdom'},
+ *    {value: 'United Kingdom', label: 'United Kingdom'},
- *    {code: 'uz', name: 'Uzbekistan'},
+ *    {value: 'Uzbekistan', label: 'Uzbekistan'},
  *    ...
- *    {code: 'zm', name: 'Zimbabwe'}
+ *    {value: 'Zimbabwe', label: 'Zimbabwe'}
  * ]
  */
-module.exports.registrationCountryOptions =
+module.exports.registrationCountryNameOptions =
+    countryOptions(dupeCommonCountries(countryInfo, ['us', 'gb']), 'name');
+// use country code for value, instead of country name:
+module.exports.registrationCountryCodeOptions =
     countryOptions(dupeCommonCountries(countryInfo, ['us', 'gb']), 'code');
 
 /* subdivisionOptions uses iso-3166 data to produce an array like:

test/unit/lib/country-data.test.js

@@ -3,7 +3,8 @@ const {
     countryOptions,
     lookupCountryInfo,
     dupeCommonCountries,
-    registrationCountryOptions,
+    registrationCountryCodeOptions,
+    registrationCountryNameOptions,
     subdivisionOptions
 } = require('../../../src/lib/country-data');
 
@@ -74,24 +75,42 @@ describe('unit test lib/country-data.js', () => {
         expect(ukItems.length).toEqual(2);
     });
 
-    test('registrationCountryOptions object places USA and UK at start, with display name versions', () => {
+    test('registrationCountryNameOptions object uses country names for both option label and option value', () => {
-        expect(typeof registrationCountryOptions).toBe('object');
+        expect(typeof registrationCountryNameOptions).toBe('object');
+        // test that there is one option with label and value === 'Brazil'
+        const brazilOptions = registrationCountryNameOptions.reduce((acc, thisCountry) => (
+            (thisCountry.value === 'Brazil' && thisCountry.label === 'Brazil') ? [...acc, thisCountry] : acc
+        ), []);
+        expect(brazilOptions.length).toEqual(1);
+    });
+
+    test('registrationCountryCodeOptions object uses country codes for option value', () => {
+        expect(typeof registrationCountryCodeOptions).toBe('object');
+        // test that there is one option with label and value === 'Brazil'
+        const brazilOptions = registrationCountryCodeOptions.reduce((acc, thisCountry) => (
+            (thisCountry.value === 'br' && thisCountry.label === 'Brazil') ? [...acc, thisCountry] : acc
+        ), []);
+        expect(brazilOptions.length).toEqual(1);
+    });
+
+    test('registrationCountryNameOptions object places USA and UK at start, with display name versions', () => {
+        expect(typeof registrationCountryNameOptions).toBe('object');
         const numCountries = countryInfo.length;
 
         // test that the two entries have been added to the start of the array, and that
         // the name of the USA includes "America"
-        expect(registrationCountryOptions.length).toEqual(numCountries + 2);
+        expect(registrationCountryNameOptions.length).toEqual(numCountries + 2);
-        expect(registrationCountryOptions[0]).toEqual({value: 'us', label: 'United States of America'});
+        expect(registrationCountryNameOptions[0]).toEqual({value: 'United States', label: 'United States of America'});
-        expect(registrationCountryOptions[1]).toEqual({value: 'gb', label: 'United Kingdom'});
+        expect(registrationCountryNameOptions[1]).toEqual({value: 'United Kingdom', label: 'United Kingdom'});
 
         // test that there are now two entries for USA
-        const usaOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
+        const usaOptions = registrationCountryNameOptions.reduce((acc, thisCountry) => (
-            thisCountry.value === 'us' ? [...acc, thisCountry] : acc
+            thisCountry.value === 'United States' ? [...acc, thisCountry] : acc
         ), []);
         expect(usaOptions.length).toEqual(2);
         // test that there are now two entries for UK
-        const ukOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
+        const ukOptions = registrationCountryNameOptions.reduce((acc, thisCountry) => (
-            thisCountry.value === 'gb' ? [...acc, thisCountry] : acc
+            thisCountry.value === 'United Kingdom' ? [...acc, thisCountry] : acc
         ), []);
         expect(ukOptions.length).toEqual(2);
     });