From 0d8b58cdd7d94bd2e8a897a1234cd84a04f91e63 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Aug 2023 17:15:16 +0100 Subject: [PATCH] Get country names from the browser instead of manual i18n (#11428) * Get country names from the browser instead of manual i18n * Make getUserLanguage more resilient to bad inputs * Improve coverage --- src/components/views/auth/CountryDropdown.tsx | 52 ++-- src/i18n/strings/en_EN.json | 249 ----------------- src/phonenumber.ts | 253 +----------------- .../views/auth/CountryDropdown-test.tsx | 17 +- 4 files changed, 48 insertions(+), 523 deletions(-) diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index 1d482f8a6a..9946e72dad 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -18,16 +18,15 @@ import React, { ReactElement } from "react"; import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from "../../../phonenumber"; import SdkConfig from "../../../SdkConfig"; -import { _t } from "../../../languageHandler"; +import { _t, getUserLanguage } from "../../../languageHandler"; import Dropdown from "../elements/Dropdown"; import { NonEmptyArray } from "../../../@types/common"; -const COUNTRIES_BY_ISO2: Record = {}; -for (const c of COUNTRIES) { - COUNTRIES_BY_ISO2[c.iso2] = c; +interface InternationalisedCountry extends PhoneNumberCountryDefinition { + name: string; // already translated to the user's locale } -function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDefinition): boolean { +function countryMatchesSearchQuery(query: string, country: InternationalisedCountry): boolean { // Remove '+' if present (when searching for a prefix) if (query[0] === "+") { query = query.slice(1); @@ -41,7 +40,7 @@ function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDef interface IProps { value?: string; - onOptionChange: (country: PhoneNumberCountryDefinition) => void; + onOptionChange: (country: InternationalisedCountry) => void; isSmall: boolean; // if isSmall, show +44 in the selected value showPrefix: boolean; className?: string; @@ -53,15 +52,25 @@ interface IState { } export default class CountryDropdown extends React.Component { - private readonly defaultCountry: PhoneNumberCountryDefinition; + private readonly defaultCountry: InternationalisedCountry; + private readonly countries: InternationalisedCountry[]; + private readonly countryMap: Map; public constructor(props: IProps) { super(props); - let defaultCountry: PhoneNumberCountryDefinition | undefined; + const displayNames = new Intl.DisplayNames([getUserLanguage()], { type: "region" }); + + this.countries = COUNTRIES.map((c) => ({ + name: displayNames.of(c.iso2) ?? c.iso2, + ...c, + })); + this.countryMap = new Map(this.countries.map((c) => [c.iso2, c])); + + let defaultCountry: InternationalisedCountry | undefined; const defaultCountryCode = SdkConfig.get("default_country_code"); if (defaultCountryCode) { - const country = COUNTRIES.find((c) => c.iso2 === defaultCountryCode.toUpperCase()); + const country = this.countries.find((c) => c.iso2 === defaultCountryCode.toUpperCase()); if (country) defaultCountry = country; } @@ -69,9 +78,8 @@ export default class CountryDropdown extends React.Component { try { const locale = new Intl.Locale(navigator.language ?? navigator.languages[0]); const code = locale.region ?? locale.language ?? locale.baseName; - const displayNames = new Intl.DisplayNames(["en"], { type: "region" }); const displayName = displayNames.of(code)!.toUpperCase(); - defaultCountry = COUNTRIES.find( + defaultCountry = this.countries.find( (c) => c.iso2 === code.toUpperCase() || c.name.toUpperCase() === displayName, ); } catch (e) { @@ -79,7 +87,7 @@ export default class CountryDropdown extends React.Component { } } - this.defaultCountry = defaultCountry ?? COUNTRIES[0]; + this.defaultCountry = defaultCountry ?? this.countries[0]; this.state = { searchQuery: "", }; @@ -101,7 +109,7 @@ export default class CountryDropdown extends React.Component { }; private onOptionChange = (iso2: string): void => { - this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]); + this.props.onOptionChange(this.countryMap.get(iso2)!); }; private flagImgForIso2(iso2: string): React.ReactNode { @@ -112,9 +120,9 @@ export default class CountryDropdown extends React.Component { if (!this.props.isSmall) { return undefined; } - let countryPrefix; + let countryPrefix: string | undefined; if (this.props.showPrefix) { - countryPrefix = "+" + COUNTRIES_BY_ISO2[iso2].prefix; + countryPrefix = "+" + this.countryMap.get(iso2)!.prefix; } return ( @@ -125,26 +133,28 @@ export default class CountryDropdown extends React.Component { }; public render(): React.ReactNode { - let displayedCountries; + let displayedCountries: InternationalisedCountry[]; if (this.state.searchQuery) { - displayedCountries = COUNTRIES.filter(countryMatchesSearchQuery.bind(this, this.state.searchQuery)); - if (this.state.searchQuery.length == 2 && COUNTRIES_BY_ISO2[this.state.searchQuery.toUpperCase()]) { + displayedCountries = this.countries.filter((country) => + countryMatchesSearchQuery(this.state.searchQuery, country), + ); + if (this.state.searchQuery.length == 2 && this.countryMap.has(this.state.searchQuery.toUpperCase())) { // exact ISO2 country name match: make the first result the matches ISO2 - const matched = COUNTRIES_BY_ISO2[this.state.searchQuery.toUpperCase()]; + const matched = this.countryMap.get(this.state.searchQuery.toUpperCase())!; displayedCountries = displayedCountries.filter((c) => { return c.iso2 != matched.iso2; }); displayedCountries.unshift(matched); } } else { - displayedCountries = COUNTRIES; + displayedCountries = this.countries; } const options = displayedCountries.map((country) => { return (
{this.flagImgForIso2(country.iso2)} - {_t(country.name)} (+{country.prefix}) + {country.name} (+{country.prefix})
); }) as NonEmptyArray; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 15f9e4c35c..d7b16ebd2c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -106,255 +106,6 @@ "Unable to enable Notifications": "Unable to enable Notifications", "This email address was not found": "This email address was not found", "Your email address does not appear to be associated with a Matrix ID on this homeserver.": "Your email address does not appear to be associated with a Matrix ID on this homeserver.", - "United Kingdom": "United Kingdom", - "United States": "United States", - "Afghanistan": "Afghanistan", - "Åland Islands": "Åland Islands", - "Albania": "Albania", - "Algeria": "Algeria", - "American Samoa": "American Samoa", - "Andorra": "Andorra", - "Angola": "Angola", - "Anguilla": "Anguilla", - "Antarctica": "Antarctica", - "Antigua & Barbuda": "Antigua & Barbuda", - "Argentina": "Argentina", - "Armenia": "Armenia", - "Aruba": "Aruba", - "Australia": "Australia", - "Austria": "Austria", - "Azerbaijan": "Azerbaijan", - "Bahamas": "Bahamas", - "Bahrain": "Bahrain", - "Bangladesh": "Bangladesh", - "Barbados": "Barbados", - "Belarus": "Belarus", - "Belgium": "Belgium", - "Belize": "Belize", - "Benin": "Benin", - "Bermuda": "Bermuda", - "Bhutan": "Bhutan", - "Bolivia": "Bolivia", - "Bosnia": "Bosnia", - "Botswana": "Botswana", - "Bouvet Island": "Bouvet Island", - "Brazil": "Brazil", - "British Indian Ocean Territory": "British Indian Ocean Territory", - "British Virgin Islands": "British Virgin Islands", - "Brunei": "Brunei", - "Bulgaria": "Bulgaria", - "Burkina Faso": "Burkina Faso", - "Burundi": "Burundi", - "Cambodia": "Cambodia", - "Cameroon": "Cameroon", - "Canada": "Canada", - "Cape Verde": "Cape Verde", - "Caribbean Netherlands": "Caribbean Netherlands", - "Cayman Islands": "Cayman Islands", - "Central African Republic": "Central African Republic", - "Chad": "Chad", - "Chile": "Chile", - "China": "China", - "Christmas Island": "Christmas Island", - "Cocos (Keeling) Islands": "Cocos (Keeling) Islands", - "Colombia": "Colombia", - "Comoros": "Comoros", - "Congo - Brazzaville": "Congo - Brazzaville", - "Congo - Kinshasa": "Congo - Kinshasa", - "Cook Islands": "Cook Islands", - "Costa Rica": "Costa Rica", - "Croatia": "Croatia", - "Cuba": "Cuba", - "Curaçao": "Curaçao", - "Cyprus": "Cyprus", - "Czech Republic": "Czech Republic", - "Côte d’Ivoire": "Côte d’Ivoire", - "Denmark": "Denmark", - "Djibouti": "Djibouti", - "Dominica": "Dominica", - "Dominican Republic": "Dominican Republic", - "Ecuador": "Ecuador", - "Egypt": "Egypt", - "El Salvador": "El Salvador", - "Equatorial Guinea": "Equatorial Guinea", - "Eritrea": "Eritrea", - "Estonia": "Estonia", - "Ethiopia": "Ethiopia", - "Falkland Islands": "Falkland Islands", - "Faroe Islands": "Faroe Islands", - "Fiji": "Fiji", - "Finland": "Finland", - "France": "France", - "French Guiana": "French Guiana", - "French Polynesia": "French Polynesia", - "French Southern Territories": "French Southern Territories", - "Gabon": "Gabon", - "Gambia": "Gambia", - "Georgia": "Georgia", - "Germany": "Germany", - "Ghana": "Ghana", - "Gibraltar": "Gibraltar", - "Greece": "Greece", - "Greenland": "Greenland", - "Grenada": "Grenada", - "Guadeloupe": "Guadeloupe", - "Guam": "Guam", - "Guatemala": "Guatemala", - "Guernsey": "Guernsey", - "Guinea": "Guinea", - "Guinea-Bissau": "Guinea-Bissau", - "Guyana": "Guyana", - "Haiti": "Haiti", - "Heard & McDonald Islands": "Heard & McDonald Islands", - "Honduras": "Honduras", - "Hong Kong": "Hong Kong", - "Hungary": "Hungary", - "Iceland": "Iceland", - "India": "India", - "Indonesia": "Indonesia", - "Iran": "Iran", - "Iraq": "Iraq", - "Ireland": "Ireland", - "Isle of Man": "Isle of Man", - "Israel": "Israel", - "Italy": "Italy", - "Jamaica": "Jamaica", - "Japan": "Japan", - "Jersey": "Jersey", - "Jordan": "Jordan", - "Kazakhstan": "Kazakhstan", - "Kenya": "Kenya", - "Kiribati": "Kiribati", - "Kosovo": "Kosovo", - "Kuwait": "Kuwait", - "Kyrgyzstan": "Kyrgyzstan", - "Laos": "Laos", - "Latvia": "Latvia", - "Lebanon": "Lebanon", - "Lesotho": "Lesotho", - "Liberia": "Liberia", - "Libya": "Libya", - "Liechtenstein": "Liechtenstein", - "Lithuania": "Lithuania", - "Luxembourg": "Luxembourg", - "Macau": "Macau", - "Macedonia": "Macedonia", - "Madagascar": "Madagascar", - "Malawi": "Malawi", - "Malaysia": "Malaysia", - "Maldives": "Maldives", - "Mali": "Mali", - "Malta": "Malta", - "Marshall Islands": "Marshall Islands", - "Martinique": "Martinique", - "Mauritania": "Mauritania", - "Mauritius": "Mauritius", - "Mayotte": "Mayotte", - "Mexico": "Mexico", - "Micronesia": "Micronesia", - "Moldova": "Moldova", - "Monaco": "Monaco", - "Mongolia": "Mongolia", - "Montenegro": "Montenegro", - "Montserrat": "Montserrat", - "Morocco": "Morocco", - "Mozambique": "Mozambique", - "Myanmar": "Myanmar", - "Namibia": "Namibia", - "Nauru": "Nauru", - "Nepal": "Nepal", - "Netherlands": "Netherlands", - "New Caledonia": "New Caledonia", - "New Zealand": "New Zealand", - "Nicaragua": "Nicaragua", - "Niger": "Niger", - "Nigeria": "Nigeria", - "Niue": "Niue", - "Norfolk Island": "Norfolk Island", - "North Korea": "North Korea", - "Northern Mariana Islands": "Northern Mariana Islands", - "Norway": "Norway", - "Oman": "Oman", - "Pakistan": "Pakistan", - "Palau": "Palau", - "Palestine": "Palestine", - "Panama": "Panama", - "Papua New Guinea": "Papua New Guinea", - "Paraguay": "Paraguay", - "Peru": "Peru", - "Philippines": "Philippines", - "Pitcairn Islands": "Pitcairn Islands", - "Poland": "Poland", - "Portugal": "Portugal", - "Puerto Rico": "Puerto Rico", - "Qatar": "Qatar", - "Romania": "Romania", - "Russia": "Russia", - "Rwanda": "Rwanda", - "Réunion": "Réunion", - "Samoa": "Samoa", - "San Marino": "San Marino", - "Saudi Arabia": "Saudi Arabia", - "Senegal": "Senegal", - "Serbia": "Serbia", - "Seychelles": "Seychelles", - "Sierra Leone": "Sierra Leone", - "Singapore": "Singapore", - "Sint Maarten": "Sint Maarten", - "Slovakia": "Slovakia", - "Slovenia": "Slovenia", - "Solomon Islands": "Solomon Islands", - "Somalia": "Somalia", - "South Africa": "South Africa", - "South Georgia & South Sandwich Islands": "South Georgia & South Sandwich Islands", - "South Korea": "South Korea", - "South Sudan": "South Sudan", - "Spain": "Spain", - "Sri Lanka": "Sri Lanka", - "St. Barthélemy": "St. Barthélemy", - "St. Helena": "St. Helena", - "St. Kitts & Nevis": "St. Kitts & Nevis", - "St. Lucia": "St. Lucia", - "St. Martin": "St. Martin", - "St. Pierre & Miquelon": "St. Pierre & Miquelon", - "St. Vincent & Grenadines": "St. Vincent & Grenadines", - "Sudan": "Sudan", - "Suriname": "Suriname", - "Svalbard & Jan Mayen": "Svalbard & Jan Mayen", - "Swaziland": "Swaziland", - "Sweden": "Sweden", - "Switzerland": "Switzerland", - "Syria": "Syria", - "São Tomé & Príncipe": "São Tomé & Príncipe", - "Taiwan": "Taiwan", - "Tajikistan": "Tajikistan", - "Tanzania": "Tanzania", - "Thailand": "Thailand", - "Timor-Leste": "Timor-Leste", - "Togo": "Togo", - "Tokelau": "Tokelau", - "Tonga": "Tonga", - "Trinidad & Tobago": "Trinidad & Tobago", - "Tunisia": "Tunisia", - "Turkey": "Turkey", - "Turkmenistan": "Turkmenistan", - "Turks & Caicos Islands": "Turks & Caicos Islands", - "Tuvalu": "Tuvalu", - "U.S. Virgin Islands": "U.S. Virgin Islands", - "Uganda": "Uganda", - "Ukraine": "Ukraine", - "United Arab Emirates": "United Arab Emirates", - "Uruguay": "Uruguay", - "Uzbekistan": "Uzbekistan", - "Vanuatu": "Vanuatu", - "Vatican City": "Vatican City", - "Venezuela": "Venezuela", - "Vietnam": "Vietnam", - "Wallis & Futuna": "Wallis & Futuna", - "Western Sahara": "Western Sahara", - "Yemen": "Yemen", - "Zambia": "Zambia", - "Zimbabwe": "Zimbabwe", "Sign In or Create Account": "Sign In or Create Account", "Sign In": "Sign In", "Use your account or create a new one to continue.": "Use your account or create a new one to continue.", diff --git a/src/phonenumber.ts b/src/phonenumber.ts index 64150e6f50..cc92630144 100644 --- a/src/phonenumber.ts +++ b/src/phonenumber.ts @@ -14,8 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { _td, TranslationKey } from "./languageHandler"; - const PHONE_NUMBER_REGEXP = /^[0-9 -.]+$/; /* @@ -42,1256 +40,1007 @@ export const getEmojiFlag = (countryCode: string): string => { return String.fromCodePoint(...countryCode.split("").map((l) => UNICODE_BASE + l.charCodeAt(0))); }; +// Use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames to get name export interface PhoneNumberCountryDefinition { iso2: string; - name: TranslationKey; prefix: string; } export const COUNTRIES: PhoneNumberCountryDefinition[] = [ { iso2: "GB", - name: _td("United Kingdom"), prefix: "44", }, { iso2: "US", - name: _td("United States"), prefix: "1", }, { iso2: "AF", - name: _td("Afghanistan"), prefix: "93", }, { iso2: "AX", - name: _td("\u00c5land Islands"), prefix: "358", }, { iso2: "AL", - name: _td("Albania"), prefix: "355", }, { iso2: "DZ", - name: _td("Algeria"), prefix: "213", }, { iso2: "AS", - name: _td("American Samoa"), prefix: "1", }, { iso2: "AD", - name: _td("Andorra"), prefix: "376", }, { iso2: "AO", - name: _td("Angola"), prefix: "244", }, { iso2: "AI", - name: _td("Anguilla"), prefix: "1", }, { iso2: "AQ", - name: _td("Antarctica"), prefix: "672", }, { iso2: "AG", - name: _td("Antigua & Barbuda"), prefix: "1", }, { iso2: "AR", - name: _td("Argentina"), prefix: "54", }, { iso2: "AM", - name: _td("Armenia"), prefix: "374", }, { iso2: "AW", - name: _td("Aruba"), prefix: "297", }, { iso2: "AU", - name: _td("Australia"), prefix: "61", }, { iso2: "AT", - name: _td("Austria"), prefix: "43", }, { iso2: "AZ", - name: _td("Azerbaijan"), prefix: "994", }, { iso2: "BS", - name: _td("Bahamas"), prefix: "1", }, { iso2: "BH", - name: _td("Bahrain"), prefix: "973", }, { iso2: "BD", - name: _td("Bangladesh"), prefix: "880", }, { iso2: "BB", - name: _td("Barbados"), prefix: "1", }, { iso2: "BY", - name: _td("Belarus"), prefix: "375", }, { iso2: "BE", - name: _td("Belgium"), prefix: "32", }, { iso2: "BZ", - name: _td("Belize"), prefix: "501", }, { iso2: "BJ", - name: _td("Benin"), prefix: "229", }, { iso2: "BM", - name: _td("Bermuda"), prefix: "1", }, { iso2: "BT", - name: _td("Bhutan"), prefix: "975", }, { iso2: "BO", - name: _td("Bolivia"), prefix: "591", }, { iso2: "BA", - name: _td("Bosnia"), prefix: "387", }, { iso2: "BW", - name: _td("Botswana"), prefix: "267", }, { iso2: "BV", - name: _td("Bouvet Island"), prefix: "47", }, { iso2: "BR", - name: _td("Brazil"), prefix: "55", }, { iso2: "IO", - name: _td("British Indian Ocean Territory"), prefix: "246", }, { iso2: "VG", - name: _td("British Virgin Islands"), prefix: "1", }, { iso2: "BN", - name: _td("Brunei"), prefix: "673", }, { iso2: "BG", - name: _td("Bulgaria"), prefix: "359", }, { iso2: "BF", - name: _td("Burkina Faso"), prefix: "226", }, { iso2: "BI", - name: _td("Burundi"), prefix: "257", }, { iso2: "KH", - name: _td("Cambodia"), prefix: "855", }, { iso2: "CM", - name: _td("Cameroon"), prefix: "237", }, { iso2: "CA", - name: _td("Canada"), prefix: "1", }, { iso2: "CV", - name: _td("Cape Verde"), prefix: "238", }, { iso2: "BQ", - name: _td("Caribbean Netherlands"), prefix: "599", }, { iso2: "KY", - name: _td("Cayman Islands"), prefix: "1", }, { iso2: "CF", - name: _td("Central African Republic"), prefix: "236", }, { iso2: "TD", - name: _td("Chad"), prefix: "235", }, { iso2: "CL", - name: _td("Chile"), prefix: "56", }, { iso2: "CN", - name: _td("China"), prefix: "86", }, { iso2: "CX", - name: _td("Christmas Island"), prefix: "61", }, { iso2: "CC", - name: _td("Cocos (Keeling) Islands"), prefix: "61", }, { iso2: "CO", - name: _td("Colombia"), prefix: "57", }, { iso2: "KM", - name: _td("Comoros"), prefix: "269", }, { iso2: "CG", - name: _td("Congo - Brazzaville"), prefix: "242", }, { iso2: "CD", - name: _td("Congo - Kinshasa"), prefix: "243", }, { iso2: "CK", - name: _td("Cook Islands"), prefix: "682", }, { iso2: "CR", - name: _td("Costa Rica"), prefix: "506", }, { iso2: "HR", - name: _td("Croatia"), prefix: "385", }, { iso2: "CU", - name: _td("Cuba"), prefix: "53", }, { iso2: "CW", - name: _td("Cura\u00e7ao"), prefix: "599", }, { iso2: "CY", - name: _td("Cyprus"), prefix: "357", }, { iso2: "CZ", - name: _td("Czech Republic"), prefix: "420", }, { iso2: "CI", - name: _td("C\u00f4te d\u2019Ivoire"), prefix: "225", }, { iso2: "DK", - name: _td("Denmark"), prefix: "45", }, { iso2: "DJ", - name: _td("Djibouti"), prefix: "253", }, { iso2: "DM", - name: _td("Dominica"), prefix: "1", }, { iso2: "DO", - name: _td("Dominican Republic"), prefix: "1", }, { iso2: "EC", - name: _td("Ecuador"), prefix: "593", }, { iso2: "EG", - name: _td("Egypt"), prefix: "20", }, { iso2: "SV", - name: _td("El Salvador"), prefix: "503", }, { iso2: "GQ", - name: _td("Equatorial Guinea"), prefix: "240", }, { iso2: "ER", - name: _td("Eritrea"), prefix: "291", }, { iso2: "EE", - name: _td("Estonia"), prefix: "372", }, { iso2: "ET", - name: _td("Ethiopia"), prefix: "251", }, { iso2: "FK", - name: _td("Falkland Islands"), prefix: "500", }, { iso2: "FO", - name: _td("Faroe Islands"), prefix: "298", }, { iso2: "FJ", - name: _td("Fiji"), prefix: "679", }, { iso2: "FI", - name: _td("Finland"), prefix: "358", }, { iso2: "FR", - name: _td("France"), prefix: "33", }, { iso2: "GF", - name: _td("French Guiana"), prefix: "594", }, { iso2: "PF", - name: _td("French Polynesia"), prefix: "689", }, { iso2: "TF", - name: _td("French Southern Territories"), prefix: "262", }, { iso2: "GA", - name: _td("Gabon"), prefix: "241", }, { iso2: "GM", - name: _td("Gambia"), prefix: "220", }, { iso2: "GE", - name: _td("Georgia"), prefix: "995", }, { iso2: "DE", - name: _td("Germany"), prefix: "49", }, { iso2: "GH", - name: _td("Ghana"), prefix: "233", }, { iso2: "GI", - name: _td("Gibraltar"), prefix: "350", }, { iso2: "GR", - name: _td("Greece"), prefix: "30", }, { iso2: "GL", - name: _td("Greenland"), prefix: "299", }, { iso2: "GD", - name: _td("Grenada"), prefix: "1", }, { iso2: "GP", - name: _td("Guadeloupe"), prefix: "590", }, { iso2: "GU", - name: _td("Guam"), prefix: "1", }, { iso2: "GT", - name: _td("Guatemala"), prefix: "502", }, { iso2: "GG", - name: _td("Guernsey"), prefix: "44", }, { iso2: "GN", - name: _td("Guinea"), prefix: "224", }, { iso2: "GW", - name: _td("Guinea-Bissau"), prefix: "245", }, { iso2: "GY", - name: _td("Guyana"), prefix: "592", }, { iso2: "HT", - name: _td("Haiti"), prefix: "509", }, { iso2: "HM", - name: _td("Heard & McDonald Islands"), prefix: "672", }, { iso2: "HN", - name: _td("Honduras"), prefix: "504", }, { iso2: "HK", - name: _td("Hong Kong"), prefix: "852", }, { iso2: "HU", - name: _td("Hungary"), prefix: "36", }, { iso2: "IS", - name: _td("Iceland"), prefix: "354", }, { iso2: "IN", - name: _td("India"), prefix: "91", }, { iso2: "ID", - name: _td("Indonesia"), prefix: "62", }, { iso2: "IR", - name: _td("Iran"), prefix: "98", }, { iso2: "IQ", - name: _td("Iraq"), prefix: "964", }, { iso2: "IE", - name: _td("Ireland"), prefix: "353", }, { iso2: "IM", - name: _td("Isle of Man"), prefix: "44", }, { iso2: "IL", - name: _td("Israel"), prefix: "972", }, { iso2: "IT", - name: _td("Italy"), prefix: "39", }, { iso2: "JM", - name: _td("Jamaica"), prefix: "1", }, { iso2: "JP", - name: _td("Japan"), prefix: "81", }, { iso2: "JE", - name: _td("Jersey"), prefix: "44", }, { iso2: "JO", - name: _td("Jordan"), prefix: "962", }, { iso2: "KZ", - name: _td("Kazakhstan"), prefix: "7", }, { iso2: "KE", - name: _td("Kenya"), prefix: "254", }, { iso2: "KI", - name: _td("Kiribati"), prefix: "686", }, { iso2: "XK", - name: _td("Kosovo"), prefix: "383", }, { iso2: "KW", - name: _td("Kuwait"), prefix: "965", }, { iso2: "KG", - name: _td("Kyrgyzstan"), prefix: "996", }, { iso2: "LA", - name: _td("Laos"), prefix: "856", }, { iso2: "LV", - name: _td("Latvia"), prefix: "371", }, { iso2: "LB", - name: _td("Lebanon"), prefix: "961", }, { iso2: "LS", - name: _td("Lesotho"), prefix: "266", }, { iso2: "LR", - name: _td("Liberia"), prefix: "231", }, { iso2: "LY", - name: _td("Libya"), prefix: "218", }, { iso2: "LI", - name: _td("Liechtenstein"), prefix: "423", }, { iso2: "LT", - name: _td("Lithuania"), prefix: "370", }, { iso2: "LU", - name: _td("Luxembourg"), prefix: "352", }, { iso2: "MO", - name: _td("Macau"), prefix: "853", }, { iso2: "MK", - name: _td("Macedonia"), prefix: "389", }, { iso2: "MG", - name: _td("Madagascar"), prefix: "261", }, { iso2: "MW", - name: _td("Malawi"), prefix: "265", }, { iso2: "MY", - name: _td("Malaysia"), prefix: "60", }, { iso2: "MV", - name: _td("Maldives"), prefix: "960", }, { iso2: "ML", - name: _td("Mali"), prefix: "223", }, { iso2: "MT", - name: _td("Malta"), prefix: "356", }, { iso2: "MH", - name: _td("Marshall Islands"), prefix: "692", }, { iso2: "MQ", - name: _td("Martinique"), prefix: "596", }, { iso2: "MR", - name: _td("Mauritania"), prefix: "222", }, { iso2: "MU", - name: _td("Mauritius"), prefix: "230", }, { iso2: "YT", - name: _td("Mayotte"), prefix: "262", }, { iso2: "MX", - name: _td("Mexico"), prefix: "52", }, { iso2: "FM", - name: _td("Micronesia"), prefix: "691", }, { iso2: "MD", - name: _td("Moldova"), prefix: "373", }, { iso2: "MC", - name: _td("Monaco"), prefix: "377", }, { iso2: "MN", - name: _td("Mongolia"), prefix: "976", }, { iso2: "ME", - name: _td("Montenegro"), prefix: "382", }, { iso2: "MS", - name: _td("Montserrat"), prefix: "1", }, { iso2: "MA", - name: _td("Morocco"), prefix: "212", }, { iso2: "MZ", - name: _td("Mozambique"), prefix: "258", }, { iso2: "MM", - name: _td("Myanmar"), prefix: "95", }, { iso2: "NA", - name: _td("Namibia"), prefix: "264", }, { iso2: "NR", - name: _td("Nauru"), prefix: "674", }, { iso2: "NP", - name: _td("Nepal"), prefix: "977", }, { iso2: "NL", - name: _td("Netherlands"), prefix: "31", }, { iso2: "NC", - name: _td("New Caledonia"), prefix: "687", }, { iso2: "NZ", - name: _td("New Zealand"), prefix: "64", }, { iso2: "NI", - name: _td("Nicaragua"), prefix: "505", }, { iso2: "NE", - name: _td("Niger"), prefix: "227", }, { iso2: "NG", - name: _td("Nigeria"), prefix: "234", }, { iso2: "NU", - name: _td("Niue"), prefix: "683", }, { iso2: "NF", - name: _td("Norfolk Island"), prefix: "672", }, { iso2: "KP", - name: _td("North Korea"), prefix: "850", }, { iso2: "MP", - name: _td("Northern Mariana Islands"), prefix: "1", }, { iso2: "NO", - name: _td("Norway"), prefix: "47", }, { iso2: "OM", - name: _td("Oman"), prefix: "968", }, { iso2: "PK", - name: _td("Pakistan"), prefix: "92", }, { iso2: "PW", - name: _td("Palau"), prefix: "680", }, { iso2: "PS", - name: _td("Palestine"), prefix: "970", }, { iso2: "PA", - name: _td("Panama"), prefix: "507", }, { iso2: "PG", - name: _td("Papua New Guinea"), prefix: "675", }, { iso2: "PY", - name: _td("Paraguay"), prefix: "595", }, { iso2: "PE", - name: _td("Peru"), prefix: "51", }, { iso2: "PH", - name: _td("Philippines"), prefix: "63", }, { iso2: "PN", - name: _td("Pitcairn Islands"), prefix: "870", }, { iso2: "PL", - name: _td("Poland"), prefix: "48", }, { iso2: "PT", - name: _td("Portugal"), prefix: "351", }, { iso2: "PR", - name: _td("Puerto Rico"), prefix: "1", }, { iso2: "QA", - name: _td("Qatar"), prefix: "974", }, { iso2: "RO", - name: _td("Romania"), prefix: "40", }, { iso2: "RU", - name: _td("Russia"), prefix: "7", }, { iso2: "RW", - name: _td("Rwanda"), prefix: "250", }, { iso2: "RE", - name: _td("R\u00e9union"), prefix: "262", }, { iso2: "WS", - name: _td("Samoa"), prefix: "685", }, { iso2: "SM", - name: _td("San Marino"), prefix: "378", }, { iso2: "SA", - name: _td("Saudi Arabia"), prefix: "966", }, { iso2: "SN", - name: _td("Senegal"), prefix: "221", }, { iso2: "RS", - name: _td("Serbia"), prefix: "381 p", }, { iso2: "SC", - name: _td("Seychelles"), prefix: "248", }, { iso2: "SL", - name: _td("Sierra Leone"), prefix: "232", }, { iso2: "SG", - name: _td("Singapore"), prefix: "65", }, { iso2: "SX", - name: _td("Sint Maarten"), prefix: "1", }, { iso2: "SK", - name: _td("Slovakia"), prefix: "421", }, { iso2: "SI", - name: _td("Slovenia"), prefix: "386", }, { iso2: "SB", - name: _td("Solomon Islands"), prefix: "677", }, { iso2: "SO", - name: _td("Somalia"), prefix: "252", }, { iso2: "ZA", - name: _td("South Africa"), prefix: "27", }, { iso2: "GS", - name: _td("South Georgia & South Sandwich Islands"), prefix: "500", }, { iso2: "KR", - name: _td("South Korea"), prefix: "82", }, { iso2: "SS", - name: _td("South Sudan"), prefix: "211", }, { iso2: "ES", - name: _td("Spain"), prefix: "34", }, { iso2: "LK", - name: _td("Sri Lanka"), prefix: "94", }, { iso2: "BL", - name: _td("St. Barth\u00e9lemy"), prefix: "590", }, { iso2: "SH", - name: _td("St. Helena"), prefix: "290 n", }, { iso2: "KN", - name: _td("St. Kitts & Nevis"), prefix: "1", }, { iso2: "LC", - name: _td("St. Lucia"), prefix: "1", }, { iso2: "MF", - name: _td("St. Martin"), prefix: "590", }, { iso2: "PM", - name: _td("St. Pierre & Miquelon"), prefix: "508", }, { iso2: "VC", - name: _td("St. Vincent & Grenadines"), prefix: "1", }, { iso2: "SD", - name: _td("Sudan"), prefix: "249", }, { iso2: "SR", - name: _td("Suriname"), prefix: "597", }, { iso2: "SJ", - name: _td("Svalbard & Jan Mayen"), prefix: "47", }, { iso2: "SZ", - name: _td("Swaziland"), prefix: "268", }, { iso2: "SE", - name: _td("Sweden"), prefix: "46", }, { iso2: "CH", - name: _td("Switzerland"), prefix: "41", }, { iso2: "SY", - name: _td("Syria"), prefix: "963", }, { iso2: "ST", - name: _td("S\u00e3o Tom\u00e9 & Pr\u00edncipe"), prefix: "239", }, { iso2: "TW", - name: _td("Taiwan"), prefix: "886", }, { iso2: "TJ", - name: _td("Tajikistan"), prefix: "992", }, { iso2: "TZ", - name: _td("Tanzania"), prefix: "255", }, { iso2: "TH", - name: _td("Thailand"), prefix: "66", }, { iso2: "TL", - name: _td("Timor-Leste"), prefix: "670", }, { iso2: "TG", - name: _td("Togo"), prefix: "228", }, { iso2: "TK", - name: _td("Tokelau"), prefix: "690", }, { iso2: "TO", - name: _td("Tonga"), prefix: "676", }, { iso2: "TT", - name: _td("Trinidad & Tobago"), prefix: "1", }, { iso2: "TN", - name: _td("Tunisia"), prefix: "216", }, { iso2: "TR", - name: _td("Turkey"), prefix: "90", }, { iso2: "TM", - name: _td("Turkmenistan"), prefix: "993", }, { iso2: "TC", - name: _td("Turks & Caicos Islands"), prefix: "1", }, { iso2: "TV", - name: _td("Tuvalu"), prefix: "688", }, { iso2: "VI", - name: _td("U.S. Virgin Islands"), prefix: "1", }, { iso2: "UG", - name: _td("Uganda"), prefix: "256", }, { iso2: "UA", - name: _td("Ukraine"), prefix: "380", }, { iso2: "AE", - name: _td("United Arab Emirates"), prefix: "971", }, { iso2: "UY", - name: _td("Uruguay"), prefix: "598", }, { iso2: "UZ", - name: _td("Uzbekistan"), prefix: "998", }, { iso2: "VU", - name: _td("Vanuatu"), prefix: "678", }, { iso2: "VA", - name: _td("Vatican City"), prefix: "39", }, { iso2: "VE", - name: _td("Venezuela"), prefix: "58", }, { iso2: "VN", - name: _td("Vietnam"), prefix: "84", }, { iso2: "WF", - name: _td("Wallis & Futuna"), prefix: "681", }, { iso2: "EH", - name: _td("Western Sahara"), prefix: "212", }, { iso2: "YE", - name: _td("Yemen"), prefix: "967", }, { iso2: "ZM", - name: _td("Zambia"), prefix: "260", }, { iso2: "ZW", - name: _td("Zimbabwe"), prefix: "263", }, ]; diff --git a/test/components/views/auth/CountryDropdown-test.tsx b/test/components/views/auth/CountryDropdown-test.tsx index 95cd5abe75..4a8e990cd3 100644 --- a/test/components/views/auth/CountryDropdown-test.tsx +++ b/test/components/views/auth/CountryDropdown-test.tsx @@ -15,7 +15,8 @@ limitations under the License. */ import React from "react"; -import { render } from "@testing-library/react"; +import { fireEvent, render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import CountryDropdown from "../../../../src/components/views/auth/CountryDropdown"; import SdkConfig from "../../../../src/SdkConfig"; @@ -65,4 +66,18 @@ describe("CountryDropdown", () => { expect(fn).toHaveBeenCalledWith(expect.objectContaining({ prefix: defaultCountryCode.toString() })); }); }); + + it("should allow filtering", async () => { + const fn = jest.fn(); + const { getByRole, findByText } = render( + , + ); + + const dropdown = getByRole("button"); + fireEvent.click(dropdown); + + await userEvent.keyboard("Al"); + + await expect(findByText("Albania (+355)")).resolves.toBeInTheDocument(); + }); });