fix(use-i18n): load date-fns

Author: philibea

packages/use-i18n/src/__tests__/usei18n.tsx

@@ -31,18 +31,32 @@ type NamespaceLocale = {
   languages: 'Languages'
 }
 
+const defaultSupportedLocales = ['en', 'fr', 'es']
+
 const wrapper =
   ({
-    loadDateLocale = async (locale: string) =>
-      import(`date-fns/locale/${locale}/index`),
+    loadDateLocale = async (locale: string) => {
+      if (locale === 'en') {
+        return (await import('date-fns/locale/en-GB')).enGB
+      }
+      if (locale === 'fr') {
+        return (await import('date-fns/locale/fr')).fr
+      }
+
+      if (locale === 'es') {
+        return (await import('date-fns/locale/es')).es
+      }
+
+      return (await import(`date-fns/locale/en-GB`)).enGB
+    },
     defaultLoad = async ({ locale }: { locale: string }) =>
       import(`./locales/${locale}.json`),
     defaultLocale = 'en',
     defaultTranslations = {},
     enableDebugKey = false,
     enableDefaultLocale = false,
     localeItemStorage = LOCALE_ITEM_STORAGE,
-    supportedLocales = ['en', 'fr', 'es'],
+    supportedLocales = defaultSupportedLocales,
   } = {}) =>
   ({ children }: { children: ReactNode }) => (
     <I18n
@@ -126,16 +140,16 @@ describe('i18n hook', () => {
       expect(result.current.t('title')).toEqual(en.title)
     })
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
       expect(result.current.t('title')).toEqual(fr.title)
     })
 
-    act(() => {
-      result.current.switchLocale('es')
+    await act(async () => {
+      await result.current.switchLocale('es')
     })
 
     await waitFor(() => {
@@ -176,8 +190,8 @@ describe('i18n hook', () => {
     expect(result.current.t('lastName')).toEqual('Last Name')
     expect(result.current.t('languages')).toEqual('Languages')
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -221,8 +235,8 @@ describe('i18n hook', () => {
 
     // current local will be 'en' based on navigator
     // await load of locales
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -281,7 +295,36 @@ describe('i18n hook', () => {
 
       await waitFor(() => {
         expect(result.current.currentLocale).toEqual('en')
-        expect(mockGetItem).toHaveBeenCalledTimes(2)
+        expect(mockGetItem).toHaveBeenCalledTimes(1)
+        expect(mockGetItem).toHaveBeenCalledWith(LOCALE_ITEM_STORAGE)
+      })
+      localStorageMock.mockRestore()
+    })
+
+    it('should not set current locale from localStorage when this value is not supported', async () => {
+      jest.spyOn(global, 'navigator', 'get').mockReturnValueOnce({
+        languages: ['bz'],
+      } as unknown as Navigator)
+      const mockGetItem = jest.fn().mockImplementation(() => 're')
+      const mockSetItem = jest.fn()
+      const localStorageMock = jest
+        .spyOn(global, 'localStorage', 'get')
+        .mockReturnValue({
+          getItem: mockGetItem,
+          setItem: mockSetItem,
+          clear: jest.fn(),
+        } as unknown as Storage)
+
+      const { result } = renderHook(() => useI18n(), {
+        wrapper: wrapper({
+          defaultLocale: 'en',
+          supportedLocales: ['en'],
+        }),
+      })
+
+      await waitFor(() => {
+        expect(result.current.currentLocale).toEqual('en')
+        expect(mockGetItem).toHaveBeenCalledTimes(1)
         expect(mockGetItem).toHaveBeenCalledWith(LOCALE_ITEM_STORAGE)
       })
       localStorageMock.mockRestore()
@@ -352,26 +395,26 @@ describe('i18n hook', () => {
     expect(result.current.currentLocale).toEqual('en')
     expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe(null)
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
       expect(result.current.currentLocale).toEqual('fr')
     })
     expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('fr')
 
-    act(() => {
-      result.current.switchLocale('es')
+    await act(async () => {
+      await result.current.switchLocale('es')
     })
 
     await waitFor(() => {
       expect(result.current.currentLocale).toEqual('es')
     })
     expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('es')
 
-    act(() => {
-      result.current.switchLocale('test')
+    await act(async () => {
+      await result.current.switchLocale('test')
     })
 
     await waitFor(() => {
@@ -441,8 +484,8 @@ describe('i18n hook', () => {
       }),
     ).toEqual('$2.00')
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     // https://stackoverflow.com/questions/58769806/identical-strings-not-matching-in-jest
@@ -491,8 +534,8 @@ describe('i18n hook', () => {
       }),
     ).toEqual('Motorcycle Bus Car')
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -565,8 +608,8 @@ describe('i18n hook', () => {
       }),
     ).toEqual('12/17/1995')
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -602,11 +645,12 @@ describe('i18n hook', () => {
 
     expect(result.current.relativeTime(date)).toEqual('over 20 years ago')
 
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
+      expect(result.current.dateFnsLocale.code).toBe('fr')
       expect(result.current.relativeTime(date)).toEqual('il y a plus de 20 ans')
     })
   })
@@ -621,8 +665,8 @@ describe('i18n hook', () => {
     const date = new Date('September 13, 2011 15:15:00')
 
     expect(result.current.relativeTimeStrict(date)).toEqual('3499 days ago')
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -642,8 +686,8 @@ describe('i18n hook', () => {
     expect(
       result.current.formatUnit(12, { short: false, unit: 'byte' }),
     ).toEqual('12 bytes')
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -663,8 +707,8 @@ describe('i18n hook', () => {
     expect(
       result.current.formatDate(new Date(2020, 1, 13, 16, 28), 'numericHour'),
     ).toEqual('2020-02-13 4:28 PM')
-    act(() => {
-      result.current.switchLocale('fr')
+    await act(async () => {
+      await result.current.switchLocale('fr')
     })
 
     await waitFor(() => {
@@ -681,10 +725,10 @@ describe('i18n hook', () => {
         supportedLocales: ['test'],
       }),
     })
-    expect(result.current.dateFnsLocale).toBe(undefined)
+    expect(result.current.dateFnsLocale).toMatchObject({ code: 'en-GB' })
 
     await waitFor(() => {
-      expect(result.current.dateFnsLocale?.code).toEqual('en-GB')
+      expect(result.current.dateFnsLocale.code).toEqual('en-GB')
     })
   })