Merge pull request #286 from Ferlab-Ste-Justine/feat/FLUI-65-add-loca…

…le-to-number-format feat(number): FLUI-65 manage locale in number
Ferlab-Ste-Justine · Jun 5, 2023 · e6b47bd · e6b47bd
2 parents 48c8d64 + 662ac6e
commit e6b47bd
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 3 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "7.6.0",
+    "version": "7.7.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

diff --git a/packages/ui/src/utils/localeUtils.test.ts b/packages/ui/src/utils/localeUtils.test.ts
@@ -0,0 +1,44 @@
+import { setLocale } from './localeUtils';
+
+export const localStorageMock = (function () {
+    let store: any = {};
+    return {
+        clear: function () {
+            store = {};
+        },
+        getItem: (key: string) => store[key],
+        removeItem: function (key: string) {
+            delete store[key];
+        },
+        setItem: function (key: string, value: string) {
+            store[key] = value.toString();
+        },
+    };
+})();
+
+describe(`${setLocale.name}()`, () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+        Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+    });
+    it('should setItem with "fr" if locale is "fr"', () => {
+        setLocale('fr');
+        expect(localStorage.getItem('locale')).toStrictEqual('fr');
+    });
+    it('should setItem with "en" if locale is "en"', () => {
+        setLocale('en');
+        expect(localStorage.getItem('locale')).toStrictEqual('en');
+    });
+    it('should setItem with "en" if locale is undefined', () => {
+        setLocale(undefined as never);
+        expect(localStorage.getItem('locale')).toStrictEqual('en');
+    });
+    it('should setItem with "en" if locale is null', () => {
+        setLocale(null as never);
+        expect(localStorage.getItem('locale')).toStrictEqual('en');
+    });
+    it('should setItem with "en" if locale is an empty string', () => {
+        setLocale('');
+        expect(localStorage.getItem('locale')).toStrictEqual('en');
+    });
+});
diff --git a/packages/ui/src/utils/localeUtils.ts b/packages/ui/src/utils/localeUtils.ts
@@ -0,0 +1,3 @@
+export const setLocale = (locale: string): void => {
+    localStorage.setItem('locale', locale || 'en');
+};
diff --git a/packages/ui/src/utils/numberUtils.test.ts b/packages/ui/src/utils/numberUtils.test.ts
@@ -33,13 +33,37 @@ describe(`${numberFormat.name}()`, () => {
         expect(numberFormat(0)).toBe(0);
     });
 
-    it('should return the localized string if num is in BLACK_LIST_LENGTH', () => {
+    it('should return the english localized string if num is in BLACK_LIST_LENGTH and locale is en', () => {
+        localStorage.setItem('locale', 'en');
         expect(numberFormat(1)).toBe('1');
         expect(numberFormat(10)).toBe('10');
         expect(numberFormat(100)).toBe('100');
         expect(numberFormat(1000)).toBe('1,000');
     });
 
+    it('should return the french localized string if num is in BLACK_LIST_LENGTH and locale is fr', () => {
+        localStorage.setItem('locale', 'fr');
+        expect(numberFormat(1)).toBe('1');
+        expect(numberFormat(10)).toBe('10');
+        expect(numberFormat(100)).toBe('100');
+        expect(numberFormat(1000)).toEqual('1\xa0000');
+    });
+
+    it('should return the default localized string if num is in BLACK_LIST_LENGTH and locale is not defined', () => {
+        localStorage.setItem('locale', undefined as never);
+        expect(numberFormat(1000)).toBe('1,000');
+    });
+
+    it('should return the default localized string if num is in BLACK_LIST_LENGTH and locale is null', () => {
+        localStorage.setItem('locale', null as never);
+        expect(numberFormat(1000)).toBe('1,000');
+    });
+
+    it('should return the default localized string if num is in BLACK_LIST_LENGTH and locale is an empty string', () => {
+        localStorage.setItem('locale', '');
+        expect(numberFormat(1000)).toBe('1,000');
+    });
+
     it('should return the symbolized value if num is not in BLACK_LIST_LENGTH', () => {
         expect(numberFormat(10000)).toBe('10K');
         expect(numberFormat(100000)).toBe('100K');

diff --git a/packages/ui/src/utils/numberUtils.ts b/packages/ui/src/utils/numberUtils.ts
@@ -23,11 +23,13 @@ export const getDefaultDigits = (num: number) => {
 export const numberFormat = (num: number, digits = 0) => {
     if (!num) return 0;
 
+    const locale = localStorage.getItem('locale') === 'fr' ? 'fr-CA' : 'en-US';
+
     let index: number;
     digits = digits ? digits : getDefaultDigits(num);
 
     if (BLACK_LIST_LENGTH.includes(num.toString().length)) {
-        return num.toLocaleString();
+        return num.toLocaleString(locale);
     } else {
         VALUE_SYMBOLE_LIST.forEach((si: any, i) => {
             if (num >= si.value) {