🦺(lib-test) more options on wrapInIntlProvider

We can now pass more options to the wrapInIntlProvider function. This will allow us to test easily translated texts.
openfun · Nov 13, 2023 · fa6e449 · fa6e449
1 parent fec2a25
commit fa6e449
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/frontend/packages/lib_classroom/src/components/ClassroomAttendance/index.spec.tsx b/src/frontend/packages/lib_classroom/src/components/ClassroomAttendance/index.spec.tsx
@@ -180,6 +180,9 @@ describe('<ClassroomAttendance />', () => {
       {
         intlOptions: {
           locale: 'fr',
+          messages: {
+            'components.ClassroomAttendance.durationLabel': 'Durée',
+          },
         },
       },
     );
@@ -188,13 +191,13 @@ describe('<ClassroomAttendance />', () => {
       screen.getByRole('rowheader', {
         name: /1 janv. 2021, 00:00/,
       }).textContent,
-    ).toBe('1 janv. 2021, 00:00-Duration: 00:20');
+    ).toBe('1 janv. 2021, 00:00-Durée: 00:20');
 
     expect(
       screen.getByRole('rowheader', {
         name: /1 mars 2021, 00:00/,
       }).textContent,
-    ).toBe('1 mars 2021, 00:00-Duration: 00:19');
+    ).toBe('1 mars 2021, 00:00-Durée: 00:19');
   });
 
   it('checks render attendees with multiple sessions', async () => {

diff --git a/src/frontend/packages/lib_tests/src/intl.tsx b/src/frontend/packages/lib_tests/src/intl.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
+import { ComponentProps } from 'react';
 import { IntlProvider, ReactIntlErrorCode } from 'react-intl';
 
-export const wrapInIntlProvider = (Component: JSX.Element, locale = 'en') => (
+type IntlProviderProps = ComponentProps<typeof IntlProvider>;
+
+export const wrapInIntlProvider = (
+  Component: JSX.Element,
+  option?: IntlProviderProps,
+) => (
   <IntlProvider
-    locale={locale}
+    locale={option?.locale || 'en'}
     onError={(err) => {
       // https://github.com/formatjs/formatjs/issues/465
       if (
@@ -14,6 +19,7 @@ export const wrapInIntlProvider = (Component: JSX.Element, locale = 'en') => (
       }
       throw err;
     }}
+    {...option}
   >
     {Component}
   </IntlProvider>

diff --git a/src/frontend/packages/lib_tests/src/render.tsx b/src/frontend/packages/lib_tests/src/render.tsx
@@ -10,17 +10,15 @@ import {
 import { Grommet, ResponsiveContext, ThemeType } from 'grommet';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { BreadCrumbsProvider, GlobalStyles, Nullable, theme } from 'lib-common';
-import React, { CSSProperties, ReactElement } from 'react';
+import React, { CSSProperties, ComponentProps, ReactElement } from 'react';
 import toast, { Toast, Toaster, useToaster } from 'react-hot-toast';
+import { IntlProvider } from 'react-intl';
 import { RouteProps } from 'react-router-dom';
 
 import { wrapInIntlProvider } from './intl';
 import { wrapInRouter } from './router';
 
 //  ------- interfaces -------
-interface IntlOptions {
-  locale?: string;
-}
 interface RouterOptions {
   routes?: RouteProps[];
   componentPath?: string;
@@ -48,7 +46,7 @@ interface GrommetOptions {
  */
 export interface RenderOptions {
   grommetOptions: GrommetOptions;
-  intlOptions: IntlOptions;
+  intlOptions?: ComponentProps<typeof IntlProvider>;
   queryOptions: QueryOptions;
   routerOptions: RouterOptions;
   testingLibraryOptions: TestingLibraryRenderOptions;
@@ -123,7 +121,7 @@ export const appendUtilsElement = (
         </ResponsiveContext.Provider>
       </Grommet>
     </CunninghamProvider>,
-    options?.intlOptions?.locale || 'en',
+    options?.intlOptions,
   );
 };