diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx index d3cdc30b0..2164a99cd 100644 --- a/src/components/join-flow/country-step.jsx +++ b/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'}), diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx index 415f38ac9..686dd40e6 100644 --- a/src/components/registration/steps.jsx +++ b/src/components/registration/steps.jsx @@ -44,7 +44,7 @@ const getCountryOptions = reactIntl => ( disabled: true, value: '' }, - ...countryData.registrationCountryOptions + ...countryData.registrationCountryCodeOptions ] ); diff --git a/src/lib/country-data.js b/src/lib/country-data.js index 3d2f32884..046fcaae7 100644 --- a/src/lib/country-data.js +++ b/src/lib/country-data.js @@ -1059,23 +1059,28 @@ const dupeCommonCountries = module.exports.dupeCommonCountries = (startingCountr }; /* - * registrationCountryOptions is the result of taking the standard countryInfo, - * and duplicating 'United States of America' and 'United Kingdom' at the top of the list. + * registrationCountryNameOptions is the result of taking the standard countryInfo, + * 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'}, - * {code: 'gb', name: 'United Kingdom'}, - * {code: 'af', name: 'Afghanistan'}, + * {value: 'United States', label: 'United States of America'}, + * {value: 'United Kingdom', label: 'United Kingdom'}, + * {value: 'Afghanistan', label: 'Afghanistan'}, * ... - * {code: 'ae', name: 'United Arab Emirates'}, - * {code: 'us', name: 'United States', display: 'United States of America'}, - * {code: 'gb', name: 'United Kingdom'}, - * {code: 'uz', name: 'Uzbekistan'}, + * {value: 'United Arab Emirates', label: 'United Arab Emirates'}, + * {value: 'United States', label: 'United States of America'}, + * {value: 'United Kingdom', label: 'United Kingdom'}, + * {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: diff --git a/test/unit/lib/country-data.test.js b/test/unit/lib/country-data.test.js index 5c8122604..5768e62dd 100644 --- a/test/unit/lib/country-data.test.js +++ b/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', () => { - expect(typeof registrationCountryOptions).toBe('object'); + test('registrationCountryNameOptions object uses country names for both option label and option value', () => { + 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(registrationCountryOptions[0]).toEqual({value: 'us', label: 'United States of America'}); - expect(registrationCountryOptions[1]).toEqual({value: 'gb', label: 'United Kingdom'}); + expect(registrationCountryNameOptions.length).toEqual(numCountries + 2); + expect(registrationCountryNameOptions[0]).toEqual({value: 'United States', label: 'United States of America'}); + 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) => ( - thisCountry.value === 'us' ? [...acc, thisCountry] : acc + const usaOptions = registrationCountryNameOptions.reduce((acc, thisCountry) => ( + 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) => ( - thisCountry.value === 'gb' ? [...acc, thisCountry] : acc + const ukOptions = registrationCountryNameOptions.reduce((acc, thisCountry) => ( + thisCountry.value === 'United Kingdom' ? [...acc, thisCountry] : acc ), []); expect(ukOptions.length).toEqual(2); });