tests(localization): Add automation for localization and new util functions. Tweak getting resources.

skrustev · skrustev · commit b574d71c054e · 2025-08-28T10:36:14.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/i18n/resources.spec.ts b/projects/igniteui-angular/src/lib/core/i18n/resources.spec.ts
@@ -0,0 +1,127 @@
+import { getCurrentResourceStrings, getI18nManager, registerI18n, setCurrentI18n } from 'igniteui-i18n-core';
+import { ActionStripResourceStringsEN } from './action-strip-resources';
+import { BannerResourceStringsEN } from './banner-resources';
+import { changei18n, getCurrentResourceStrings as igxGetCurrentResourceStrings } from './resources';
+import { ActionStripResourceStringsBG } from 'projects/igniteui-angular-i18n/src/i18n/BG/action-strip-resources';
+import { BannerResourceStringsBG, ResourceStringsBG } from 'igniteui-i18n-resources';
+
+describe('i18n', () => {
+    beforeEach(() => {
+        // Clear manager state between tests.
+        getI18nManager()['_resourcesMap'] = new Map([[getI18nManager().currentLocale, {}]]);
+    });
+
+    describe('old public API', () => {
+        it('should correctly register old igx_ prefixed resources to new manager', () => {
+            expect(getCurrentResourceStrings()).toEqual({});
+            changei18n(ActionStripResourceStringsEN);
+
+            expect(getCurrentResourceStrings()).toEqual({
+                action_strip_button_more_title: 'More'
+            });
+        });
+
+        it('should append new registered resources, if they have different keys', () => {
+            changei18n(ActionStripResourceStringsEN);
+            changei18n(BannerResourceStringsEN);
+
+            expect(getCurrentResourceStrings()).toEqual({
+                action_strip_button_more_title: 'More',
+                banner_button_dismiss: 'Dismiss'
+            });
+        });
+
+        it('should override old registered resources, if they have same keys', () => {
+            changei18n(ActionStripResourceStringsEN);
+            changei18n(BannerResourceStringsEN);
+            changei18n(ActionStripResourceStringsBG);
+
+            expect(getCurrentResourceStrings()).toEqual({
+                action_strip_button_more_title: 'Още',
+                banner_button_dismiss: 'Dismiss'
+            });
+        });
+    });
+
+    describe('internal API', () => {
+        it('should correctly return component resources based on registered init resources', () => {
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, true);
+
+            expect(igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false)).toEqual({
+                igx_action_strip_button_more_title: 'More'
+            });
+        });
+
+        it('should correctly filter out component resources based on registered init resources', () => {
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, true);
+            igxGetCurrentResourceStrings(BannerResourceStringsEN, true);
+
+            expect(getCurrentResourceStrings()).toEqual({
+                action_strip_button_more_title: 'More',
+                banner_button_dismiss: 'Dismiss'
+            });
+            expect(igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false)).toEqual({
+                igx_action_strip_button_more_title: 'More'
+            });
+        });
+
+        it('getting correctly filter out component resources should interfere with other calls for getting resources', () => {
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, true);
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false);
+            igxGetCurrentResourceStrings(BannerResourceStringsEN, true);
+            igxGetCurrentResourceStrings(BannerResourceStringsEN, false);
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false);
+
+            expect(getCurrentResourceStrings()).toEqual({
+                action_strip_button_more_title: 'More',
+                banner_button_dismiss: 'Dismiss'
+            });
+            expect(igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false)).toEqual({
+                igx_action_strip_button_more_title: 'More'
+            });
+        });
+    });
+
+    describe('new public API', () => {
+        it('should return correct component resources when locale is changed using new API', () => {
+            // Components init their default locales
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, true);
+            igxGetCurrentResourceStrings(BannerResourceStringsEN, true);
+
+            // User registers new locale
+            registerI18n(ResourceStringsBG, 'bg');
+            setCurrentI18n('bg');
+
+            expect(igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false)).toEqual({
+                igx_action_strip_button_more_title: 'Още'
+            });
+        })
+
+        it('should return default strings if locale is changed using new API, but its missing resources', () => {
+            // Components init their default locales
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, true);
+            igxGetCurrentResourceStrings(BannerResourceStringsEN, true);
+
+            // User registers new locale
+            setCurrentI18n('bg');
+
+            expect(igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false)).toEqual({
+                igx_action_strip_button_more_title: 'More'
+            });
+        });
+
+        it('should return default strings if locale is changed using new API, but its missing resources for this particular component', () => {
+            // Components init their default locales
+            igxGetCurrentResourceStrings(ActionStripResourceStringsEN, true);
+            igxGetCurrentResourceStrings(BannerResourceStringsEN, true);
+
+            // User registers new locale
+            registerI18n(BannerResourceStringsBG, 'bg');
+            setCurrentI18n('bg');
+
+            expect(igxGetCurrentResourceStrings(ActionStripResourceStringsEN, false)).toEqual({
+                igx_action_strip_button_more_title: 'More'
+            });
+        });
+    });
+});
diff --git a/projects/igniteui-angular/src/lib/core/i18n/resources.ts b/projects/igniteui-angular/src/lib/core/i18n/resources.ts
@@ -17,8 +17,7 @@ import {
     getCurrentResourceStrings as getCurrentResourceStringsCore,
     IResourceStrings as IResourceStringsCore,
     setCurrentI18n,
-    getI18nManager,
-    getCurrentI18n
+    getI18nManager
 } from 'igniteui-i18n-core';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings,
@@ -27,7 +26,7 @@ export interface IResourceStrings extends IGridResourceStrings, ITimePickerResou
     IActionStripResourceStrings, IQueryBuilderResourceStrings, IBannerResourceStrings { }
 
 
-function igxRegisterI18n(resourceStrings: IResourceStrings, locale: string)  {
+function igxRegisterI18n(resourceStrings: IResourceStrings, locale: string) {
     // Remove `igx_` prefix for compatibility with older versions.
     const genericResourceStrings: IResourceStringsCore = {};
     for (const key of Object.keys(resourceStrings)) {
@@ -60,13 +59,15 @@ export function getCurrentResourceStrings<T>(defaultEN: T, init = true) {
     const resourceStrings = getCurrentResourceStringsCore();
     const normalizedResourceStrings: T = {} as T;
     const resourceStringsKeys = Object.keys(resourceStrings);
-    for (const key of resourceStringsKeys) {
-        let stringKey = key;
-        if (!stringKey.startsWith("igx_")) {
-            stringKey = "igx_" + stringKey;
+    for (const igxKey of igxResourceStringKeys) {
+        let coreKey = igxKey;
+        if (coreKey.startsWith("igx_")) {
+            coreKey = coreKey.replace("igx_", "");
         }
-        if (igxResourceStringKeys.includes(stringKey)) {
-            normalizedResourceStrings[stringKey] = resourceStrings[key];
+        if (resourceStringsKeys.includes(coreKey)) {
+            normalizedResourceStrings[igxKey] = resourceStrings[coreKey];
+        } else {
+            normalizedResourceStrings[igxKey] = defaultEN[igxKey];
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/utils.spec.ts b/projects/igniteui-angular/src/lib/core/utils.spec.ts
@@ -1,4 +1,4 @@
-import { cloneValue, isObject, isDate } from './utils';
+import { cloneValue, isObject, isDate, getCurrencyCode, getCurrencySymbol, getLocaleFirstDayOfWeek, formatDate, formatCurrency, formatPercent, formatNumber, getLocaleDateFormat, getLocaleDateTimeFormat } from './utils';
 import { SampleTestData } from '../test-utils/sample-test-data.spec';
 
 describe('Utils', () => {
@@ -253,4 +253,133 @@ describe('Utils', () => {
             expect(isDate(variable)).toBeFalsy();
         });
     });
+
+    describe('Localization', () => {
+        describe('number formatting', () => {
+            it('should format number correctly', () => {
+                expect(formatNumber(1.25, 'en')).toEqual('1.25');
+                expect(formatNumber(125, 'en')).toEqual('125');
+                expect(formatNumber(1250, 'en')).toEqual('1,250');
+                expect(formatNumber(12500, 'en')).toEqual('12,500');
+
+                expect(formatNumber(1.25, 'bg')).toEqual('1,25');
+                expect(formatNumber(125, 'bg')).toEqual('125');
+                expect(formatNumber(1250, 'bg')).toEqual('1250');
+                expect(formatNumber(12500, 'bg')).toEqual('12 500');
+
+                expect(formatNumber(1.25, 'de')).toEqual('1,25');
+                expect(formatNumber(125, 'de')).toEqual('125');
+                expect(formatNumber(1250, 'de')).toEqual('1.250');
+                expect(formatNumber(12500, 'de')).toEqual('12.500');
+            });
+
+            it('should format percent correctly', () => {
+                expect(formatPercent(1.25, 'en')).toEqual('125%');
+                expect(formatPercent(125, 'en')).toEqual('12,500%');
+                expect(formatPercent(1.25, 'bg')).toEqual('125%');
+                expect(formatPercent(125, 'bg')).toEqual('12 500%');
+            });
+
+            it('should format currency correctly', () => {
+                expect(formatCurrency(12345, 'en', 'symbol', 'EUR')).toEqual('€12,345.00');
+                expect(formatCurrency(12345, 'en', 'symbol', 'EUR', '1.0-3')).toEqual('€12,345');
+                expect(formatCurrency('12345.33', 'en', 'symbol', 'EUR', '1.0-3')).toEqual('€12,345.33');
+                expect(formatCurrency(12345, 'en', 'symbol', 'EUR', '1.1-3')).toEqual('€12,345.0');
+                expect(formatCurrency('12345', 'en', 'symbol', 'EUR', '1.1-3')).toEqual('€12,345.0');
+            });
+        })
+
+        describe('date formatting', () => {
+            it('should format string to dateTime', () => {
+                expect(formatDate('2025-01-25T14:15:00', 'short', 'en-US')).toEqual('1/25/25, 2:15 PM');
+                expect(formatDate('2025-01-25T14:15:00', 'medium', 'en-US')).toEqual('Jan 25, 2025, 2:15:00 PM');
+                expect(formatDate('2025-01-25T14:15:00', 'long', 'en-US')).toEqual('January 25, 2025 at 2:15:00 PM GMT+2');
+                expect(formatDate('2025-01-25T14:15:00', 'full', 'en-US')).toEqual('Saturday, January 25, 2025 at 2:15:00 PM Eastern European Standard Time');
+            });
+
+            it('should format string to date', () => {
+                expect(formatDate('2025-01-25T14:15:00', 'shortDate', 'en-US')).toEqual('1/25/25');
+                expect(formatDate('2025-01-25T14:15:00', 'mediumDate', 'en-US')).toEqual('Jan 25, 2025');
+                expect(formatDate('2025-01-25T14:15:00', 'longDate', 'en-US')).toEqual('January 25, 2025');
+                expect(formatDate('2025-01-25T14:15:00', 'fullDate', 'en-US')).toEqual('Saturday, January 25, 2025');
+            });
+
+            it('should format string to time', () => {
+                expect(formatDate('2025-01-25T14:15:00', 'shortTime', 'en-US')).toEqual('2:15 PM');
+                expect(formatDate('2025-01-25T14:15:00', 'mediumTime', 'en-US')).toEqual('2:15:00 PM');
+                expect(formatDate('2025-01-25T14:15:00', 'longTime', 'en-US')).toEqual('2:15:00 PM GMT+2');
+                expect(formatDate('2025-01-25T14:15:00', 'fullTime', 'en-US')).toEqual('2:15:00 PM Eastern European Standard Time');
+            });
+
+            it('should format string to custom format', () => {
+                expect(formatDate('2025-01-25T14:15:00', 'ex: hh:mm bbb GGG', 'en-US')).toEqual('ex: 02:15 in th. af. AD');
+                expect(formatDate('2025-01-25T14:15:00', 'ex: HH:mm bbb GGG', 'en-US')).toEqual('ex: 14:15 in th. af. AD');
+            });
+
+            it('should return correct date format per locale', () => {
+                // Defaults to Angular's one because they are registered in tests
+                expect(getLocaleDateFormat('en', 'short')).toEqual('M/d/yy');
+                expect(getLocaleDateFormat('en', 'medium')).toEqual('MMM d, y');
+                expect(getLocaleDateFormat('en', 'long')).toEqual('MMMM d, y');
+                expect(getLocaleDateFormat('en', 'full')).toEqual('EEEE, MMMM d, y');
+
+                expect(getLocaleDateFormat('de', 'short')).toEqual('dd.MM.yy');
+                expect(getLocaleDateFormat('de', 'medium')).toEqual('dd.MM.y');
+                expect(getLocaleDateFormat('de', 'long')).toEqual('d. MMMM y');
+                expect(getLocaleDateFormat('de', 'full')).toEqual('EEEE, d. MMMM y');
+
+                // There's no registered locale for IT in tests, so use new API
+                expect(getLocaleDateFormat('it', 'short')).toEqual('dd/MM/yy');
+                expect(getLocaleDateFormat('it', 'medium')).toEqual('d MMM yyyy');
+                expect(getLocaleDateFormat('it', 'long')).toEqual(`d MMMM yyyy`);
+                expect(getLocaleDateFormat('it', 'full')).toEqual(`EEEE d MMMM yyyy`);
+            });
+
+            it('should return correct datetime format per locale', () => {
+                // Defaults to Angular's one because they are registered in tests
+                expect(getLocaleDateTimeFormat('en', 'short')).toEqual('{1}, {0}');
+                expect(getLocaleDateTimeFormat('en', 'medium')).toEqual('{1}, {0}');
+                expect(getLocaleDateTimeFormat('en', 'long')).toEqual(`{1} 'at' {0}`);
+                expect(getLocaleDateTimeFormat('en', 'full')).toEqual(`{1} 'at' {0}`);
+
+                expect(getLocaleDateTimeFormat('de', 'short')).toEqual('{1}, {0}');
+                expect(getLocaleDateTimeFormat('de', 'medium')).toEqual('{1}, {0}');
+                expect(getLocaleDateTimeFormat('de', 'long')).toEqual(`{1} 'um' {0}`);
+                expect(getLocaleDateTimeFormat('de', 'full')).toEqual(`{1} 'um' {0}`);
+
+                // There's no registered locale for IT in tests, so use new API
+                expect(getLocaleDateTimeFormat('it', 'short')).toEqual('dd/MM/yy, HH:mm');
+                expect(getLocaleDateTimeFormat('it', 'medium')).toEqual('d MMM yyyy, HH:mm:ss');
+                expect(getLocaleDateTimeFormat('it', 'long')).toEqual(`d MMMM yyyy alle ore HH:mm:ss z`);
+                expect(getLocaleDateTimeFormat('it', 'full')).toEqual(`EEEE d MMMM yyyy alle ore HH:mm:ss zzzz`);
+            });
+        });
+
+        describe('other', () => {
+            it('getCurrencyCode should return default USD as currency code for locale, if no Angular is defined', () => {
+                expect(getCurrencyCode('en-US')).toEqual('USD');
+
+                // Registered in tests, that's why they are available
+                expect(getCurrencyCode('bg')).toEqual('BGN');
+                expect(getCurrencyCode('de')).toEqual('EUR');
+
+                // This is not registered in tests yet
+                expect(getCurrencyCode('it')).toEqual('USD');
+            });
+
+            it('getCurrencySymbol should return correct currency symbol', () => {
+                expect(getCurrencySymbol('USD', 'en-US')).toEqual('$');
+                expect(getCurrencySymbol('BGN', 'bg')).toEqual('лв.');
+                expect(getCurrencySymbol('EUR', 'de')).toEqual('€');
+                expect(getCurrencySymbol('EUR', 'it')).toEqual('€');
+            });
+
+            it('getLocaleFirstDayOfWeek should return correct values per locale', () => {
+                expect(getLocaleFirstDayOfWeek('en-US')).toEqual(0); // This is Angular's default
+                expect(getLocaleFirstDayOfWeek('bg')).toEqual(1);
+                expect(getLocaleFirstDayOfWeek('de')).toEqual(1);
+                expect(getLocaleFirstDayOfWeek('it')).toEqual(1);
+            });
+        });
+    });
 });
diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -601,7 +601,7 @@ export function onResourceChangeHandle(destroyObj: Subject<any> | DestroyRef, ca
         destroyObj.onDestroy(() => removeHandler());
     } else if (destroyObj) {
         destroyObj.subscribe({
-            complete: () =>  removeHandler()
+            complete: () => removeHandler()
         });
     }
 }
@@ -753,15 +753,15 @@ export function getCurrencyCode(locale: string, overrideCode?: string) {
     return currencyCode;
 }
 
-export function getCurrencySymbol(currencyCode: string, locale?: string,  currencyDisplay: keyof Intl.NumberFormatOptionsCurrencyDisplayRegistry = "symbol") {
+export function getCurrencySymbol(currencyCode: string, locale?: string, currencyDisplay: keyof Intl.NumberFormatOptionsCurrencyDisplayRegistry = "symbol") {
     return getI18nManager().getCurrencySymbol(currencyCode, locale, currencyDisplay);
 }
 
 export function getLocaleFirstDayOfWeek(locale?: string) {
     try {
         // Angular returns 0 for Sunday...
         return ngGetLocaleFirstDayOfWeek(locale);
-    } catch {}
+    } catch { }
     return getI18nManager().getFirstDayOfWeek(locale);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -601,7 +601,7 @@ export function onResourceChangeHandle(destroyObj: Subject<any> \| DestroyRef, ca`
`601`	`601`	`destroyObj.onDestroy(() => removeHandler());`
`602`	`602`	`} else if (destroyObj) {`
`603`	`603`	`destroyObj.subscribe({`
`604`		`- complete: () => removeHandler()`
	`604`	`+ complete: () => removeHandler()`
`605`	`605`	`});`
`606`	`606`	`}`
`607`	`607`	`}`
`@@ -753,15 +753,15 @@ export function getCurrencyCode(locale: string, overrideCode?: string) {`
`753`	`753`	`return currencyCode;`
`754`	`754`	`}`
`755`	`755`
`756`		`-export function getCurrencySymbol(currencyCode: string, locale?: string, currencyDisplay: keyof Intl.NumberFormatOptionsCurrencyDisplayRegistry = "symbol") {`
	`756`	`+export function getCurrencySymbol(currencyCode: string, locale?: string, currencyDisplay: keyof Intl.NumberFormatOptionsCurrencyDisplayRegistry = "symbol") {`
`757`	`757`	`return getI18nManager().getCurrencySymbol(currencyCode, locale, currencyDisplay);`
`758`	`758`	`}`
`759`	`759`
`760`	`760`	`export function getLocaleFirstDayOfWeek(locale?: string) {`
`761`	`761`	`try {`
`762`	`762`	`// Angular returns 0 for Sunday...`
`763`	`763`	`return ngGetLocaleFirstDayOfWeek(locale);`
`764`		`- } catch {}`
	`764`	`+ } catch { }`
`765`	`765`	`return getI18nManager().getFirstDayOfWeek(locale);`
`766`	`766`	`}`
`767`	`767`