mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 17:16:11 -05:00
consolidated country-data and contry-list
This commit is contained in:
parent
50e706efa8
commit
51aa38fb34
6 changed files with 1192 additions and 1227 deletions
|
@ -33,29 +33,20 @@ require('./steps.scss');
|
|||
const DEFAULT_COUNTRY = 'us';
|
||||
|
||||
/**
|
||||
* Return a list of options to give to frc select
|
||||
* Return a list of options to give to select
|
||||
* @param {object} reactIntl react-intl, used to localize strings
|
||||
* @param {string} defaultCountry optional string of default country to put at top of list
|
||||
* @return {object} ordered set of county options formatted for frc select
|
||||
* @return {object} ordered set of county options formatted for select
|
||||
*/
|
||||
const getCountryOptions = (reactIntl, defaultCountry) => {
|
||||
const options = countryData.countryOptions.concat({
|
||||
label: reactIntl.formatMessage({id: 'registration.selectCountry'}),
|
||||
disabled: true,
|
||||
value: ''
|
||||
});
|
||||
|
||||
if (typeof defaultCountry !== 'undefined') {
|
||||
return options.sort((a, b) => {
|
||||
if (a.disabled) return -1;
|
||||
if (b.disabled) return 1;
|
||||
if (a.value === defaultCountry) return -1;
|
||||
if (b.value === defaultCountry) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return options;
|
||||
};
|
||||
const getCountryOptions = reactIntl => (
|
||||
[
|
||||
{
|
||||
label: reactIntl.formatMessage({id: 'registration.selectCountry'}),
|
||||
disabled: true,
|
||||
value: ''
|
||||
},
|
||||
...countryData.registrationCountryOptions
|
||||
]
|
||||
);
|
||||
|
||||
const NextStepButton = props => (
|
||||
<Button
|
||||
|
@ -445,6 +436,13 @@ class DemographicsStep extends React.Component {
|
|||
this.setState({otherDisabled: gender !== 'other'});
|
||||
}
|
||||
handleValidSubmit (formData) {
|
||||
// look up country name using user's country code selection
|
||||
if (formData.countryCode) {
|
||||
const countryInfo = countryData.lookupCountryInfo(formData.countryCode);
|
||||
if (countryInfo) {
|
||||
formData.user.country = countryInfo.name;
|
||||
}
|
||||
}
|
||||
return this.props.onNextStep(formData);
|
||||
}
|
||||
isValidBirthdate (year, month) {
|
||||
|
@ -460,7 +458,7 @@ class DemographicsStep extends React.Component {
|
|||
return isValid ? true : this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'});
|
||||
}
|
||||
render () {
|
||||
const countryOptions = getCountryOptions(this.props.intl, DEFAULT_COUNTRY);
|
||||
const countryOptions = getCountryOptions(this.props.intl);
|
||||
return (
|
||||
<Slide className="registration-step demographics-step">
|
||||
<h2>
|
||||
|
@ -539,7 +537,7 @@ class DemographicsStep extends React.Component {
|
|||
<Select
|
||||
required
|
||||
label={this.props.intl.formatMessage({id: 'general.country'})}
|
||||
name="user.country"
|
||||
name="countryCode"
|
||||
options={countryOptions}
|
||||
value={countryOptions[0].value}
|
||||
/>
|
||||
|
@ -948,6 +946,7 @@ class AddressStep extends React.Component {
|
|||
render () {
|
||||
let stateOptions = countryData.subdivisionOptions[this.state.countryChoice];
|
||||
stateOptions = [{}].concat(stateOptions);
|
||||
const countryOptions = getCountryOptions(this.props.intl);
|
||||
return (
|
||||
<Slide className="registration-step address-step">
|
||||
<h2>
|
||||
|
@ -970,7 +969,7 @@ class AddressStep extends React.Component {
|
|||
this.props.intl.formatMessage({id: 'general.country'})
|
||||
}
|
||||
name="address.country"
|
||||
options={getCountryOptions(this.props.intl)}
|
||||
options={countryOptions}
|
||||
value={this.props.defaultCountry}
|
||||
onChange={this.handleChangeCountry}
|
||||
/>
|
||||
|
|
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
@ -115,9 +115,7 @@ class TeacherRegistration extends React.Component {
|
|||
onNextStep={this.handleAdvanceStep}
|
||||
/>
|
||||
<Steps.PhoneNumberStep
|
||||
defaultCountry={
|
||||
this.state.formData.user && this.state.formData.user.country
|
||||
}
|
||||
defaultCountry={this.state.formData.countryCode}
|
||||
waiting={this.state.waiting}
|
||||
onNextStep={this.handleAdvanceStep}
|
||||
/>
|
||||
|
@ -126,9 +124,7 @@ class TeacherRegistration extends React.Component {
|
|||
onNextStep={this.handleAdvanceStep}
|
||||
/>
|
||||
<Steps.AddressStep
|
||||
defaultCountry={
|
||||
this.state.formData.user && this.state.formData.user.country
|
||||
}
|
||||
defaultCountry={this.state.formData.countryCode}
|
||||
waiting={this.state.waiting}
|
||||
onNextStep={this.handleAdvanceStep}
|
||||
/>
|
||||
|
|
|
@ -1,28 +1,99 @@
|
|||
const {
|
||||
countryInfo,
|
||||
countryOptions,
|
||||
lookupCountryInfo,
|
||||
dupeCommonCountries,
|
||||
registrationCountryOptions,
|
||||
subdivisionOptions
|
||||
} = require('../../../src/lib/country-data');
|
||||
|
||||
describe('unit test lib/country-data.js', () => {
|
||||
|
||||
test('countryOptions has the ballpark number of countries we expect', () => {
|
||||
expect(typeof countryOptions).toBe('object');
|
||||
expect(countryOptions.length > 200).toEqual(true);
|
||||
expect(countryOptions.length < 300).toEqual(true);
|
||||
test('countryInfo has the ballpark number of countries we expect', () => {
|
||||
expect(typeof countryInfo).toBe('object');
|
||||
expect(countryInfo.length > 200).toEqual(true);
|
||||
expect(countryInfo.length < 300).toEqual(true);
|
||||
});
|
||||
|
||||
test('countryOptions is in alphabetical order', () => {
|
||||
// test whether countryOptions is already sorted, by:
|
||||
// 1) creating a sorted version of countryOptions
|
||||
const sortedCountryOptions = countryOptions.sort((a, b) => {
|
||||
if (a.label < b.label) {
|
||||
return -1;
|
||||
}
|
||||
return 1;
|
||||
});
|
||||
// 2) comparing sorted version of countryOptions to original
|
||||
expect(countryOptions.map(option => option.label))
|
||||
.toEqual(sortedCountryOptions.map(option => option.label));
|
||||
test('countryOptions() maintains number of items', () => {
|
||||
expect(typeof countryOptions).toBe('function');
|
||||
const myCountryOptions = countryOptions(countryInfo, 'name');
|
||||
const numCountries = countryInfo.length;
|
||||
expect(myCountryOptions.length).toEqual(numCountries);
|
||||
});
|
||||
|
||||
test('countryOptions() called with value=name will use correct display strings and country name', () => {
|
||||
expect(typeof countryOptions).toBe('function');
|
||||
const myCountryOptions = countryOptions(countryInfo, 'name');
|
||||
|
||||
const eswatiniInfo = myCountryOptions.find(country => country.value === 'Swaziland');
|
||||
expect(eswatiniInfo).toBeTruthy();
|
||||
expect(eswatiniInfo.label).toEqual('Eswatini');
|
||||
|
||||
const swedenInfo = myCountryOptions.find(country => country.value === 'Sweden');
|
||||
expect(swedenInfo).toBeTruthy();
|
||||
expect(swedenInfo.label).toEqual('Sweden');
|
||||
});
|
||||
|
||||
test('countryOptions() called with value==code will use correct display strings and country code', () => {
|
||||
expect(typeof countryOptions).toBe('function');
|
||||
const myCountryOptions = countryOptions(countryInfo, 'code');
|
||||
const szInfo = myCountryOptions
|
||||
.find(country => country.value === 'sz');
|
||||
expect(szInfo).toBeTruthy();
|
||||
expect(szInfo.label).toEqual('Eswatini');
|
||||
});
|
||||
|
||||
test('lookupCountryInfo() will find country info', () => {
|
||||
expect(typeof lookupCountryInfo).toBe('function');
|
||||
const eswatiniInfo = lookupCountryInfo('sz');
|
||||
expect(eswatiniInfo.name).toEqual('Swaziland');
|
||||
expect(eswatiniInfo.display).toEqual('Eswatini');
|
||||
expect(eswatiniInfo.code).toEqual('sz');
|
||||
});
|
||||
|
||||
test('calling dupeCommonCountries() will duplicate the requested country info at start of array', () => {
|
||||
expect(typeof dupeCommonCountries).toBe('function');
|
||||
const countryInfoWithCommon = dupeCommonCountries(countryInfo, ['ca', 'gb']);
|
||||
|
||||
// test that the two entries have been added to the start of the array
|
||||
const numCountries = countryInfo.length;
|
||||
expect(countryInfoWithCommon.length).toEqual(numCountries + 2);
|
||||
expect(countryInfoWithCommon[0]).toEqual({code: 'ca', name: 'Canada'});
|
||||
expect(countryInfoWithCommon[1]).toEqual({code: 'gb', name: 'United Kingdom'});
|
||||
|
||||
// test that there are now two entries for Canada
|
||||
const canadaItems = countryInfoWithCommon.reduce((acc, thisCountry) => (
|
||||
thisCountry.code === 'ca' ? [...acc, thisCountry] : acc
|
||||
), []);
|
||||
expect(canadaItems.length).toEqual(2);
|
||||
// test that there are now two entries for UK
|
||||
const ukItems = countryInfoWithCommon.reduce((acc, thisCountry) => (
|
||||
thisCountry.code === 'gb' ? [...acc, thisCountry] : acc
|
||||
), []);
|
||||
expect(ukItems.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('registrationCountryOptions object places USA and UK at start, with display name versions', () => {
|
||||
expect(typeof registrationCountryOptions).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'});
|
||||
|
||||
// test that there are now two entries for USA
|
||||
const usaOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
|
||||
thisCountry.value === 'us' ? [...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
|
||||
), []);
|
||||
expect(ukOptions.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('subdivisionOptions object should include correct info for sample country', () => {
|
||||
|
|
|
@ -1,88 +0,0 @@
|
|||
const {
|
||||
countryInfo,
|
||||
countryOptions,
|
||||
dupeCommonCountries,
|
||||
registrationCountryOptions
|
||||
} = require('../../../src/lib/country-list');
|
||||
|
||||
describe('unit test lib/country-list.js', () => {
|
||||
|
||||
test('countryInfo has the ballpark number of countries we expect', () => {
|
||||
expect(typeof countryInfo).toBe('object');
|
||||
expect(countryInfo.length > 200).toEqual(true);
|
||||
expect(countryInfo.length < 300).toEqual(true);
|
||||
});
|
||||
|
||||
test('countryOptions() maintains number of items', () => {
|
||||
expect(typeof countryOptions).toBe('function');
|
||||
const myCountryOptions = countryOptions(countryInfo, 'name');
|
||||
const numCountries = countryInfo.length;
|
||||
expect(myCountryOptions.length).toEqual(numCountries);
|
||||
});
|
||||
|
||||
test('countryOptions() called with value=name will use correct display strings and country name', () => {
|
||||
expect(typeof countryOptions).toBe('function');
|
||||
const myCountryOptions = countryOptions(countryInfo, 'name');
|
||||
|
||||
const eswatiniInfo = myCountryOptions.find(country => country.value === 'Swaziland');
|
||||
expect(eswatiniInfo).toBeTruthy();
|
||||
expect(eswatiniInfo.label).toEqual('Eswatini');
|
||||
|
||||
const swedenInfo = myCountryOptions.find(country => country.value === 'Sweden');
|
||||
expect(swedenInfo).toBeTruthy();
|
||||
expect(swedenInfo.label).toEqual('Sweden');
|
||||
});
|
||||
|
||||
test('countryOptions() called with value==code will use correct display strings and country code', () => {
|
||||
expect(typeof countryOptions).toBe('function');
|
||||
const myCountryOptions = countryOptions(countryInfo, 'code');
|
||||
const szInfo = myCountryOptions
|
||||
.find(country => country.value === 'sz');
|
||||
expect(szInfo).toBeTruthy();
|
||||
expect(szInfo.label).toEqual('Eswatini');
|
||||
});
|
||||
|
||||
test('calling dupeCommonCountries() will duplicate the requested country info at start of array', () => {
|
||||
expect(typeof dupeCommonCountries).toBe('function');
|
||||
const countryInfoWithCommon = dupeCommonCountries(countryInfo, ['ca', 'gb']);
|
||||
|
||||
// test that the two entries have been added to the start of the array
|
||||
const numCountries = countryInfo.length;
|
||||
expect(countryInfoWithCommon.length).toEqual(numCountries + 2);
|
||||
expect(countryInfoWithCommon[0]).toEqual({code: 'ca', name: 'Canada'});
|
||||
expect(countryInfoWithCommon[1]).toEqual({code: 'gb', name: 'United Kingdom'});
|
||||
|
||||
// test that there are now two entries for Canada
|
||||
const canadaItems = countryInfoWithCommon.reduce((acc, thisCountry) => (
|
||||
thisCountry.code === 'ca' ? [...acc, thisCountry] : acc
|
||||
), []);
|
||||
expect(canadaItems.length).toEqual(2);
|
||||
// test that there are now two entries for UK
|
||||
const ukItems = countryInfoWithCommon.reduce((acc, thisCountry) => (
|
||||
thisCountry.code === 'gb' ? [...acc, thisCountry] : acc
|
||||
), []);
|
||||
expect(ukItems.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('registrationCountryOptions object places USA and UK at start, with display name versions', () => {
|
||||
expect(typeof registrationCountryOptions).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'});
|
||||
|
||||
// test that there are now two entries for USA
|
||||
const usaOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
|
||||
thisCountry.value === 'us' ? [...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
|
||||
), []);
|
||||
expect(ukOptions.length).toEqual(2);
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue