richie 2.26.0__py2.py3-none-any.whl → 2.27.0__py2.py3-none-any.whl

frontend/js/hooks/useDateFormat/index.spec.tsx

@@ -0,0 +1,37 @@
+import { renderHook } from '@testing-library/react';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
+import useDateFormat from '.';
+
+describe('useDateFormat', () => {
+  it('should format date with default options', () => {
+    const date = new Date('2022-03-28T00:00:00.000Z');
+    const { result: dateFormatter } = renderHook(useDateFormat, { wrapper: IntlWrapper });
+
+    expect(dateFormatter.current(date)).toBe('Mar 28, 2022');
+  });
+
+  it('should format date with custom options', () => {
+    const date = new Date('2022-03-28T00:00:00.000Z');
+    const { result: dateFormatter } = renderHook(
+      () =>
+        useDateFormat({
+          month: 'long',
+        }),
+      { wrapper: IntlWrapper },
+    );
+
+    expect(dateFormatter.current(date)).toBe('March 28, 2022');
+  });
+
+  it('date is undefined it should return undefined', () => {
+    const { result: dateFormatter } = renderHook(
+      () =>
+        useDateFormat({
+          month: 'long',
+        }),
+      { wrapper: IntlWrapper },
+    );
+
+    expect(dateFormatter.current(undefined)).toBe(undefined);
+  });
+});

frontend/js/hooks/useDateFormat/index.tsx

@@ -0,0 +1,48 @@
+import { type FormatDateOptions, useIntl } from 'react-intl';
+import { Maybe } from 'types/utils';
+
+export const DEFAULT_DATE_FORMAT: FormatDateOptions = {
+  day: '2-digit',
+  month: 'short',
+  year: 'numeric',
+};
+export const DATETIME_FORMAT: FormatDateOptions = {
+  ...DEFAULT_DATE_FORMAT,
+  hour: '2-digit',
+  minute: '2-digit',
+};
+
+/**
+ * This hook must be used within <IntlProvider />.
+ * It returns a method to format dates.
+ *
+ * By default, format options are:
+ * - day: '2-digit'
+ * - month: 'short'
+ * - year: 'numeric'
+ *
+ * In english, output looks like "Mar 28, 2022".
+ *
+ * If you need to customize output, you are able to do that globally on hook instanciation
+ * or for a specific date in formatDate call.
+ *
+ */
+const useDateFormat = (formatOptions: FormatDateOptions = {}) => {
+  const intl = useIntl();
+
+  function formatDate(date: Maybe<string | Date | number>, options: FormatDateOptions = {}) {
+    if (date === undefined) {
+      return undefined;
+    }
+
+    return intl.formatDate(date, {
+      ...DEFAULT_DATE_FORMAT,
+      ...formatOptions,
+      ...options,
+    });
+  }
+
+  return formatDate;
+};
+
+export default useDateFormat;

frontend/js/hooks/useUnionResource/index.spec.tsx

@@ -7,7 +7,7 @@ import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
-import { ReactQueryAppWrapper } from 'utils/test/wrappers/ReactQueryAppWrapper';
+import AppWrapper from 'utils/test/wrappers/AppWrapper';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
@@ -98,7 +98,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -122,7 +122,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -141,7 +141,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -160,7 +160,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -203,7 +203,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -266,7 +266,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -301,7 +301,7 @@ describe('useUnionResource', () => {
           queryAConfig: queries?.queryA || queryAConfig,
           queryBConfig: queries?.queryB || queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -370,9 +370,7 @@ describe('useUnionResource', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <ReactQueryAppWrapper queryOptions={{ client: queryClient }}>
-            {children}
-          </ReactQueryAppWrapper>
+          <AppWrapper queryOptions={{ client: queryClient }}>{children}</AppWrapper>
         ),
       },
     );
@@ -416,9 +414,7 @@ describe('useUnionResource', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <ReactQueryAppWrapper queryOptions={{ client: queryClient }}>
-            {children}
-          </ReactQueryAppWrapper>
+          <AppWrapper queryOptions={{ client: queryClient }}>{children}</AppWrapper>
         ),
       },
     );

frontend/js/pages/DashboardAddressesManagement/DashboardCreateAddress.spec.tsx

@@ -1,8 +1,6 @@
-import { QueryClientProvider } from '@tanstack/react-query';
 import countries from 'i18n-iso-countries';
 import fetchMock from 'fetch-mock';
 import { getByText, render, screen, waitFor } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { PropsWithChildren } from 'react';
 import {
@@ -10,7 +8,6 @@ import {
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { Address } from 'types/Joanie';
 import { expectFetchCall } from 'utils/test/expectFetchCall';
@@ -22,6 +19,7 @@ import { HttpStatusCode } from 'utils/errors/HttpError';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
 import { User } from 'types/User';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -61,13 +59,10 @@ const fillForm = async (address: Address, user: UserEvent = userEvent.setup()) =
 
 describe('<DashboardCreateAddress/>', () => {
   let richieUser: User;
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-      <IntlProvider locale="en">
-        <SessionProvider>{children}</SessionProvider>
-      </IntlProvider>
-    </QueryClientProvider>
-  );
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    const client = createTestQueryClient({ user: richieUser });
+    return <BaseJoanieAppWrapper queryOptions={{ client }}>{children}</BaseJoanieAppWrapper>;
+  };
   let user: UserEvent;
 
   beforeEach(() => {

frontend/js/pages/DashboardAddressesManagement/DashboardEditAddress.spec.tsx

@@ -1,4 +1,3 @@
-import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import {
   act,
@@ -9,22 +8,20 @@ import {
   waitFor,
   within,
 } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 import {
   UserFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { expectFetchCall } from 'utils/test/expectFetchCall';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -59,19 +56,16 @@ describe('<DashboardEditAddress/>', () => {
     fetchMock.get(`https://demo.endpoint/api/user/v1/accounts/${richieUser.username}`, {});
     fetchMock.get(`https://demo.endpoint/api/user/v1/preferences/${richieUser.username}`, {});
 
+    const client = createTestQueryClient({ user: richieUser });
     render(
-      <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <DashboardTest
-              initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
-                ':addressId',
-                address.id,
-              )}
-            />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>,
+      <BaseJoanieAppWrapper queryOptions={{ client }}>
+        <DashboardTest
+          initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
+            ':addressId',
+            address.id,
+          )}
+        />
+      </BaseJoanieAppWrapper>,
     );
     await waitFor(() => {
       expectBreadcrumbsToEqualParts([
@@ -142,20 +136,16 @@ describe('<DashboardEditAddress/>', () => {
     // Mock the edit API route to return a 500 status.
     const updateUrl = 'https://joanie.endpoint/api/v1.0/addresses/' + address.id + '/';
     fetchMock.put(updateUrl, { status: HttpStatusCode.INTERNAL_SERVER_ERROR, body: 'Bad request' });
-
+    const client = createTestQueryClient({ user: true });
     const { container } = render(
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <JoanieSessionProvider>
-            <DashboardTest
-              initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
-                ':addressId',
-                address.id,
-              )}
-            />
-          </JoanieSessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>,
+      <BaseJoanieAppWrapper queryOptions={{ client }}>
+        <DashboardTest
+          initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
+            ':addressId',
+            address.id,
+          )}
+        />
+      </BaseJoanieAppWrapper>,
     );
     await waitFor(() => {
       expectBreadcrumbsToEqualParts([

frontend/js/pages/DashboardAddressesManagement/index.spec.tsx

@@ -8,15 +8,13 @@ import {
   render,
   screen,
 } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import {
   UserFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { AddressFactory } from 'utils/test/factories/joanie';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import * as Joanie from 'types/Joanie';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
@@ -41,7 +39,7 @@ jest.mock('utils/indirection/window', () => ({
   confirm: jest.fn(() => true),
 }));
 
-describe('<DashAddressesManagement/>', () => {
+describe('<DashboardAddressesManagement/>', () => {
   let richieUser: User;
   beforeEach(() => {
     richieUser = UserFactory().one();
@@ -72,15 +70,12 @@ describe('<DashAddressesManagement/>', () => {
 
   it('renders an empty list with placeholder', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 
@@ -94,15 +89,12 @@ describe('<DashAddressesManagement/>', () => {
   it('renders a list with addresses', async () => {
     const addresses = AddressFactory().many(5);
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 
@@ -117,15 +109,12 @@ describe('<DashAddressesManagement/>', () => {
   it('deletes an address', async () => {
     const addresses = AddressFactory().many(5);
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
     // No error is shown.
@@ -163,15 +152,12 @@ describe('<DashAddressesManagement/>', () => {
   it('promotes an address', async () => {
     const addresses = AddressFactory().many(5);
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
     // No error is shown.
@@ -215,15 +201,12 @@ describe('<DashAddressesManagement/>', () => {
     const addresses = AddressFactory().many(5);
     addresses[0].is_main = true;
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 
@@ -239,15 +222,12 @@ describe('<DashAddressesManagement/>', () => {
     const addresses = AddressFactory().many(5);
     addresses[0].is_main = true;
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 
@@ -266,15 +246,12 @@ describe('<DashAddressesManagement/>', () => {
     const addresses = AddressFactory().many(5);
     addresses[0].is_main = true;
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 
@@ -291,15 +268,12 @@ describe('<DashAddressesManagement/>', () => {
 
   it('redirects to the create address route', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
     // Clicking on the create button redirects to the create route.
@@ -314,15 +288,12 @@ describe('<DashAddressesManagement/>', () => {
   it('redirects to the edit address route', async () => {
     const address = AddressFactory().one();
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [address]);
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 
@@ -343,16 +314,12 @@ describe('<DashAddressesManagement/>', () => {
       status: HttpStatusCode.INTERNAL_SERVER_ERROR,
       body: 'Internal Server Error',
     });
-
+    const client = createTestQueryClient({ user: richieUser });
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
       );
     });
 

frontend/js/pages/DashboardCertificates/index.spec.tsx

@@ -7,17 +7,16 @@ import { resolveAll } from 'utils/resolveAll';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError, expectBannerInfo } from 'utils/test/expectBanner';
 import { Deferred } from 'utils/test/deferred';
-import * as mockUseHistory from 'hooks/useHistory';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { CertificateFactory } from 'utils/test/factories/joanie';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
-import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('hooks/useHistory', () => ({
   __esModule: true,
-  ...mockUseHistory,
+  ...jest.requireActual('hooks/useHistory'),
   useHistory: () => [jest.fn(), jest.fn(), jest.fn()],
 }));
 

frontend/js/pages/DashboardContracts/index.spec.tsx

@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
@@ -10,12 +8,11 @@ import { resolveAll } from 'utils/resolveAll';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError, expectBannerInfo } from 'utils/test/expectBanner';
 import { Deferred } from 'utils/test/deferred';
-import { History, HistoryContext } from 'hooks/useHistory';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { ContractFactory } from 'utils/test/factories/joanie';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -31,27 +28,10 @@ jest.mock('utils/indirection/window', () => ({
 }));
 
 describe('<DashboardContract/>', () => {
-  const historyPushState = jest.fn();
-  const historyReplaceState = jest.fn();
-  const makeHistoryOf: (params: any) => History = () => [
-    {
-      state: { name: '', data: {} },
-      title: '',
-      url: `/`,
-    },
-    historyPushState,
-    historyReplaceState,
-  ];
   const Wrapper = () => (
-    <QueryClientProvider client={createTestQueryClient({ user: true })}>
-      <IntlProvider locale="en">
-        <HistoryContext.Provider value={makeHistoryOf({})}>
-          <SessionProvider>
-            <DashboardTest initialRoute={LearnerDashboardPaths.CONTRACTS} />
-          </SessionProvider>
-        </HistoryContext.Provider>
-      </IntlProvider>
-    </QueryClientProvider>
+    <BaseJoanieAppWrapper queryOptions={{ client: createTestQueryClient({ user: true }) }}>
+      <DashboardTest initialRoute={LearnerDashboardPaths.CONTRACTS} />
+    </BaseJoanieAppWrapper>
   );
 
   beforeEach(() => {

frontend/js/pages/DashboardCreditCardsManagement/CreditCardBrandLogo.spec.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { CreditCardFactory } from 'utils/test/factories/joanie';
+import { CreditCardBrand } from 'types/Joanie';
+import { CreditCardBrandLogo } from './CreditCardBrandLogo';
+
+describe('CreditCardBrandLogo', () => {
+  it.each(Object.values(CreditCardBrand))('should display the %s brand logo', (brand) => {
+    const creditCard = CreditCardFactory({ brand }).one();
+
+    render(<CreditCardBrandLogo creditCard={creditCard} />);
+
+    expect(screen.getByRole('presentation')).toHaveAttribute(
+      'src',
+      `/static/richie/images/components/DashboardCreditCardsManagement/logo_${brand}.svg`,
+    );
+  });
+
+  it('should fallback to CB brand if the credit card brand is unknown', () => {
+    const creditCard = CreditCardFactory({
+      brand: 'unknown',
+    }).one();
+
+    render(<CreditCardBrandLogo creditCard={creditCard} />);
+    expect(screen.getByRole('presentation')).toHaveAttribute(
+      'src',
+      '/static/richie/images/components/DashboardCreditCardsManagement/logo_CB.svg',
+    );
+  });
+});

frontend/js/pages/DashboardCreditCardsManagement/CreditCardBrandLogo.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { CreditCard } from 'types/Joanie';
+import { CreditCard, CreditCardBrand } from 'types/Joanie';
 
 export const CreditCardBrandLogo = ({
   creditCard,
@@ -8,13 +8,17 @@ export const CreditCardBrandLogo = ({
   creditCard: CreditCard;
   variant?: 'default' | 'inline';
 }) => {
+  const creditCardBrand = Object.values<string>(CreditCardBrand).includes(creditCard.brand)
+    ? creditCard.brand
+    : CreditCardBrand.CB;
+
   return (
     <div className={classNames('credit-card-brand-logo', 'credit-card-brand-logo--' + variant)}>
       <img
         alt=""
         src={
           '/static/richie/images/components/DashboardCreditCardsManagement/logo_' +
-          creditCard.brand +
+          creditCardBrand +
           '.svg'
         }
       />