889d85b0-6ffc-4571-91f0-4bd54689e32e

Committed 21 Mar 2024 04:03PM CUT coverage: 74.734% (+0.02%) from 74.715%

Build # 889d85b0-6ffc-4571-91f0-4bd54689e32e

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #4519 from mozilla/MPP-3753

MPP-3753: Disable DomainAddress address field updates

Run Details

2085 of 3048 branches covered (68.41%)

Branch coverage included in aggregate %.

7 of 7 new or added lines in 1 file covered. (100.0%)

6765 of 8794 relevant lines covered (76.93%)

20.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/frontend/src/components/waitlist/CountryPicker.tsx

import { SelectHTMLAttributes, useEffect, useState } from "react";
import { getLocale } from "../../functions/getLocale";
import { useL10n } from "../../hooks/l10n";

type LocaleDisplayNames = Record<string, string>;
type Territories = {
  main: Record<
    string,
    {
      localeDisplayNames: {
        territories: LocaleDisplayNames;
      };
    }
  >;
};
export type Props = SelectHTMLAttributes<HTMLSelectElement>;
export const CountryPicker = (props: Props) => {
  const l10n = useL10n();
  const currentLocale = getLocale(l10n);
  const [localeDisplayNames, setLocaleDisplayNames] =
    useState<LocaleDisplayNames>();

  useEffect(() => {
    importTerritories(currentLocale).then((localeDisplayNames) => {
      setLocaleDisplayNames(localeDisplayNames);
    });
  }, [currentLocale]);

  const options = Object.entries(localeDisplayNames ?? {})
    // cldr-localenames-modern also includes names of continents,
    // whose territory codes consist of numbers.
    // (See e.g. node_modules/cldr-localenames-modern/main/en/territories.json.)
    // Since we're only interested in countries, filter those out:
    .filter(
      ([code]) =>
        !["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].some((nr) =>
          code.includes(nr),
        ),
    )
    .sort(([_codeA, nameA], [_codeB, nameB]) => nameA.localeCompare(nameB))
    .map(([code, name]) => (
      <option key={code} value={code}>
        {name}
      </option>
    ));

  return <select {...props}>{options}</select>;
};

async function importTerritories(locale: string): Promise<LocaleDisplayNames> {
  try {
    const territories: Territories = await import(
      `cldr-localenames-modern/main/${locale}/territories.json`
    );
    return territories.main[locale].localeDisplayNames.territories;
  } catch (_e) {
    try {
      // cldr-localenames-modern doesn't include suffixed locale codes for
      // locales in their main territory (i.e. it only has `es`, not `es-ES`, or
      // `nl` but not `nl-NL`, or `sv` but not `sv-SE`), so try loading a
      // truncated version if the full version was not found:
      const truncatedLocale = locale.split("-")[0];
      const territories: Territories = await import(
        `cldr-localenames-modern/main/${truncatedLocale}/territories.json`
      );
      return territories.main[truncatedLocale].localeDisplayNames.territories;
    } catch (_e) {
      const territoriesEn = await import(
        "cldr-localenames-modern/main/en/territories.json"
      );
      return territoriesEn.main.en.localeDisplayNames.territories;
    }
  }
}

1	import { SelectHTMLAttributes, useEffect, useState } from "react";	×
2	import { getLocale } from "../../functions/getLocale";	×
3	import { useL10n } from "../../hooks/l10n";	×
4
5	type LocaleDisplayNames = Record<string, string>;
6	type Territories = {
7	main: Record<
8	string,
9	{
10	localeDisplayNames: {
11	territories: LocaleDisplayNames;
12	};
13	}
14	>;
15	};
16	export type Props = SelectHTMLAttributes<HTMLSelectElement>;
17	export const CountryPicker = (props: Props) => {	×
18	const l10n = useL10n();	×
19	const currentLocale = getLocale(l10n);	×
20	const [localeDisplayNames, setLocaleDisplayNames] =
21	useState<LocaleDisplayNames>();	×
22
23	useEffect(() => {	×
24	importTerritories(currentLocale).then((localeDisplayNames) => {	×
25	setLocaleDisplayNames(localeDisplayNames);	×
26	});
27	}, [currentLocale]);
28
29	const options = Object.entries(localeDisplayNames ?? {})	×
30	// cldr-localenames-modern also includes names of continents,
31	// whose territory codes consist of numbers.
32	// (See e.g. node_modules/cldr-localenames-modern/main/en/territories.json.)
33	// Since we're only interested in countries, filter those out:
34	.filter(
35	([code]) =>
36	!["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].some((nr) =>	×
37	code.includes(nr),	×
38	),
39	)
40	.sort(([_codeA, nameA], [_codeB, nameB]) => nameA.localeCompare(nameB))	×
41	.map(([code, name]) => (
42	<option key={code} value={code}>	×
43	{name}
44	</option>
45	));
46
47	return <select {...props}>{options}</select>;
48	};
49
50	async function importTerritories(locale: string): Promise<LocaleDisplayNames> {
51	try {	×
52	const territories: Territories = await import(	×
53	`cldr-localenames-modern/main/${locale}/territories.json`	×
54	);
55	return territories.main[locale].localeDisplayNames.territories;	×
56	} catch (_e) {
57	try {	×
58	// cldr-localenames-modern doesn't include suffixed locale codes for
59	// locales in their main territory (i.e. it only has `es`, not `es-ES`, or
60	// `nl` but not `nl-NL`, or `sv` but not `sv-SE`), so try loading a
61	// truncated version if the full version was not found:
62	const truncatedLocale = locale.split("-")[0];	×
63	const territories: Territories = await import(	×
64	`cldr-localenames-modern/main/${truncatedLocale}/territories.json`	×
65	);
66	return territories.main[truncatedLocale].localeDisplayNames.territories;	×
67	} catch (_e) {
68	const territoriesEn = await import(	×
69	"cldr-localenames-modern/main/en/territories.json"
70	);
71	return territoriesEn.main.en.localeDisplayNames.territories;	×
72	}
73	}
74	}

mozilla / fx-private-relay / 889d85b0-6ffc-4571-91f0-4bd54689e32e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous