richie-education 2.25.0-b2.dev148 → 2.25.0-b2.dev152

package/js/widgets/Dashboard/components/RouterButton/index.spec.tsx

@@ -1,6 +1,8 @@
-import { createMemoryRouter, RouteObject, RouterProvider } from 'react-router-dom';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { RouteObject } from 'react-router-dom';
+import { act, fireEvent, screen } from '@testing-library/react';
 import { location } from 'utils/indirection/window';
+import { render } from 'utils/test/render';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import { RouterButton } from '.';
 
 jest.mock('utils/indirection/window', () => ({
@@ -27,7 +29,7 @@ describe('<RouterButton/>', () => {
       },
     ];
 
-    render(<RouterProvider router={createMemoryRouter(routes)} />);
+    render(<RouterWrapper routes={routes} />, { wrapper: null });
     screen.getByText('Root');
 
     const button = screen.getByRole('link', { name: 'Go to other' });
@@ -39,19 +41,15 @@ describe('<RouterButton/>', () => {
     screen.getByText('Other');
   });
   it('natively navigates', async () => {
-    const routes: RouteObject[] = [
+    render(
+      <div>
+        Root
+        <RouterButton href="https://fun-mooc.fr">Go to other</RouterButton>
+      </div>,
       {
-        path: '/',
-        element: (
-          <div>
-            Root
-            <RouterButton href="https://fun-mooc.fr">Go to other</RouterButton>
-          </div>
-        ),
+        wrapper: RouterWrapper,
       },
-    ];
-
-    render(<RouterProvider router={createMemoryRouter(routes)} />);
+    );
     screen.getByText('Root');
 
     const button = screen.getByRole('link', { name: 'Go to other' });

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.spec.tsx

@@ -1,20 +1,13 @@
 import { faker } from '@faker-js/faker';
-import { CunninghamProvider } from '@openfun/cunningham-react';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { StringHelper } from 'utils/StringHelper';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { PER_PAGE } from 'settings';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import { TeacherDashboardOrganizationSidebar } from '.';
 
 jest.mock('utils/context', () => ({
@@ -26,31 +19,7 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('<TeacherDashboardOrganizationSidebar />', () => {
-  beforeEach(() => {
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-  });
-
-  const Wrapper = ({ organizationId }: { organizationId: string }) => (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
-        <JoanieSessionProvider>
-          <CunninghamProvider>
-            <MemoryRouter initialEntries={['/' + organizationId]}>
-              <Routes>
-                <Route path="/:organizationId" element={<TeacherDashboardOrganizationSidebar />} />
-              </Routes>
-            </MemoryRouter>
-          </CunninghamProvider>
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
+  setupJoanieSession();
 
   it('should render', async () => {
     const organization = OrganizationFactory({ logo: null }).one();
@@ -66,7 +35,9 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
       { results: [], count: 0, previous: null, next: null },
     );
 
-    render(<Wrapper organizationId={organization.id} />);
+    render(<TeacherDashboardOrganizationSidebar />, {
+      routerOptions: { path: '/:organizationId', initialEntries: [`/${organization.id}`] },
+    });
 
     await expectNoSpinner('Loading organization...');
 
@@ -106,7 +77,9 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
       },
     );
 
-    render(<Wrapper organizationId={organization.id} />);
+    render(<TeacherDashboardOrganizationSidebar />, {
+      routerOptions: { path: '/:organizationId', initialEntries: [`/${organization.id}`] },
+    });
     await expectNoSpinner('Loading organization...');
 
     // It should display contract link with badge next to it displaying the number of contracts to sign
@@ -140,7 +113,9 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
       },
     );
 
-    render(<Wrapper organizationId={organization.id} />);
+    render(<TeacherDashboardOrganizationSidebar />, {
+      routerOptions: { path: '/:organizationId', initialEntries: [`/${organization.id}`] },
+    });
     await expectNoSpinner('Loading organization...');
 
     // It should display contract link with no badge next to it

package/js/widgets/Dashboard/hooks/useDashboardRouter/index.spec.tsx

@@ -1,12 +1,10 @@
 import { PropsWithChildren } from 'react';
-import { IntlProvider } from 'react-intl';
 import { renderHook } from '@testing-library/react';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
 import useDashboardRoutes from '.';
 
 describe('useDashboardRouter', () => {
-  const Wrapper = ({ children }: PropsWithChildren<{}>) => (
-    <IntlProvider locale="en">{children}</IntlProvider>
-  );
+  const Wrapper = ({ children }: PropsWithChildren<{}>) => <IntlWrapper>{children}</IntlWrapper>;
 
   it('should render path according to the active language', () => {
     const { result } = renderHook(useDashboardRoutes, { wrapper: Wrapper });

package/js/widgets/Dashboard/hooks/useEnroll/index.spec.tsx

@@ -1,13 +1,10 @@
-import { PropsWithChildren } from 'react';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { Priority } from 'types';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { CourseRunFactory } from 'utils/test/factories/joanie';
-import { SessionProvider } from 'contexts/SessionContext';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { useEnroll } from './index';
 
 jest.mock('utils/indirection/window', () => ({
@@ -27,32 +24,14 @@ jest.mock('utils/context', () => ({
  * conditions in DashboardItemOrder.spec.tsx.
  */
 describe('useEnroll ( edge case )', () => {
-  const wrapper = ({ children }: PropsWithChildren) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>{children}</SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
-
-  beforeEach(() => {
-    // SessionProvider inital requests
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
+  setupJoanieSession();
 
   it('should return early when a course run is not enrollable', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', {});
-    const { result } = renderHook(() => useEnroll([], undefined), { wrapper });
+    const { result } = renderHook(() => useEnroll([], undefined), {
+      wrapper: BaseJoanieAppWrapper,
+    });
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     const courseRun = CourseRunFactory().one();
@@ -68,7 +47,7 @@ describe('useEnroll ( edge case )', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', {});
     const { result } = renderHook(() => useEnroll([], undefined), {
-      wrapper,
+      wrapper: BaseJoanieAppWrapper,
     });
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 

package/js/widgets/Dashboard/hooks/useRouteInfo/index.spec.tsx

@@ -1,42 +1,35 @@
 import { PropsWithChildren, useMemo } from 'react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { renderHook, waitFor } from '@testing-library/react';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import useRouteInfo from '.';
 
 describe('useRouteInfo', () => {
-  let routerOptions = {
-    initialEntries: ['/posts'],
-  };
-  const Router = ({ children }: PropsWithChildren) => {
-    const router = useMemo(
-      () =>
-        createMemoryRouter(
-          [
-            {
-              path: '/posts',
-              element: <div data-testid="posts">{children}</div>,
-              loader: () => ({ posts: [] }),
-              children: [
-                {
-                  path: ':postId',
-                  element: <div data-testid="route-post">{children}</div>,
-                  handle: { title: 'A post' },
-                },
-              ],
-            },
-          ],
-          routerOptions,
-        ),
-      [children, routerOptions],
-    );
-
-    return <RouterProvider router={router} />;
-  };
-
   it('should return all information about the active route', async () => {
+    let currentUrl = '/posts';
     // First render to match the '/posts' route
     const { result, rerender } = renderHook(useRouteInfo, {
-      wrapper: Router,
+      wrapper: ({ children }: PropsWithChildren) => {
+        const initialEntries = useMemo(() => [currentUrl], [currentUrl]);
+        return (
+          <RouterWrapper
+            initialEntries={initialEntries}
+            routes={[
+              {
+                path: '/posts',
+                element: <div data-testid="posts">{children}</div>,
+                loader: () => ({ posts: [] }),
+                children: [
+                  {
+                    path: ':postId',
+                    element: <div data-testid="route-post">{children}</div>,
+                    handle: { title: 'A post' },
+                  },
+                ],
+              },
+            ]}
+          />
+        );
+      },
     });
 
     await waitFor(() =>
@@ -49,8 +42,7 @@ describe('useRouteInfo', () => {
       }),
     );
 
-    // Rerender to match the '/posts/:postId' route
-    routerOptions = { initialEntries: ['/posts/a-first-post'] };
+    currentUrl = '/posts/a-first-post';
     rerender();
 
     await waitFor(() =>

package/js/widgets/Dashboard/index.spec.tsx

@@ -1,6 +1,4 @@
-import { fireEvent, getByText, render, screen, act } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, getByText, screen, act } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -9,12 +7,14 @@ import {
 import { AddressFactory } from 'utils/test/factories/joanie';
 import { location } from 'utils/indirection/window';
 import { User } from 'types/User';
-import { Nullable } from 'types/utils';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import { Address } from 'types/Joanie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { expectUrlMatchLocationDisplayed } from 'utils/test/expectUrlMatchLocationDisplayed';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { LearnerDashboardPaths } from './utils/learnerRouteMessages';
 import { DashboardTest } from './components/DashboardTest';
 
@@ -40,29 +40,15 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('<Dashboard />', () => {
-  const DashboardWithUser = ({ user }: { user: Nullable<User> }) => {
-    return (
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <JoanieSessionProvider>
-            <DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    );
-  };
+  setupJoanieSession();
 
   beforeEach(() => {
-    jest.resetAllMocks();
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
     fetchMock.get(
-      'https://joanie.endpoint/api/v1.0/enrollments/?page=1&page_size=50&was_created_by_order=false',
+      'https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=1&page_size=50',
       { count: 0, results: [] },
     );
     fetchMock.get(
-      'https://joanie.endpoint/api/v1.0/orders/?page=1&page_size=50&product__type=credential',
+      'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
       {
         count: 0,
         results: [],
@@ -70,38 +56,42 @@ describe('<Dashboard />', () => {
     );
   });
 
-  afterEach(() => {
-    fetchMock.restore();
-  });
-
   it('should redirect to the site root if user is not authenticated', async () => {
-    await act(async () => {
-      render(<DashboardWithUser user={null} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+      queryOptions: {
+        client: createTestQueryClient({ user: null }),
+      },
     });
 
     expect(location.replace).toHaveBeenNthCalledWith(1, '/');
   });
 
-  it('should redirect from dashboard index route to courses route', () => {
-    const user = UserFactory().one();
+  it('should redirect from dashboard index route to courses route', async () => {
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
-    render(<DashboardWithUser user={user} />);
+    await expectNoSpinner('Loading orders and enrollments...');
 
     expect(location.replace).not.toBeCalled();
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.COURSES);
   });
 
-  it('should render breadcrumbs', () => {
-    const user = UserFactory().one();
-
-    render(<DashboardWithUser user={user} />);
+  it('should render breadcrumbs', async () => {
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
     expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My courses']);
   });
 
   it('changes route when using the sidebar', async () => {
-    const user = UserFactory().one();
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [], { overwriteRoutes: true });
-    render(<DashboardWithUser user={user} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.COURSES);
 
     // Go to "My Preferences" route.
@@ -113,12 +103,14 @@ describe('<Dashboard />', () => {
   });
 
   it('redirect when clicking on the breadcrumbs back button', async () => {
-    const user = UserFactory().one();
     const address: Address = AddressFactory().one();
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [address], {
       overwriteRoutes: true,
     });
-    render(<DashboardWithUser user={user} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.COURSES);
     expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My courses']);
 
@@ -160,16 +152,30 @@ describe('<Dashboard />', () => {
     expect(location.replace).toHaveBeenCalledWith('https://localhost');
   });
 
-  it('should render username in sidebar if full_name is not defined', () => {
+  it('should render username in sidebar if full_name is not defined', async () => {
     const user: User = UserFactory({ full_name: undefined }).one();
-    render(<DashboardWithUser user={user} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+      queryOptions: {
+        client: createTestQueryClient({ user }),
+      },
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
+
     const sidebar = screen.getByTestId('dashboard__sidebar');
     getByText(sidebar, user.username, { exact: false });
   });
 
-  it('should render full_name in sidebar', () => {
+  it('should render full_name in sidebar', async () => {
     const user: User = UserFactory().one();
-    render(<DashboardWithUser user={user} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+      queryOptions: {
+        client: createTestQueryClient({ user }),
+      },
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
+
     const sidebar = screen.getByTestId('dashboard__sidebar');
     getByText(sidebar, user.full_name!, { exact: false });
   });

package/js/widgets/LanguageSelector/index.spec.tsx

@@ -1,7 +1,8 @@
-import { act, render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import { HistoryProvider } from 'hooks/useHistory';
+import { render } from 'utils/test/render';
 import LanguageSelector from '.';
 
 jest.mock('utils/indirection/window', () => ({
@@ -31,15 +32,14 @@ describe('<LanguageSelector />', () => {
       <IntlProvider locale="en">
         <LanguageSelector currentLanguage="fr" languages={languages} />
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const button = screen.getByLabelText('Select a language:', {
       selector: 'button',
     });
 
-    await act(async () => {
-      await userEvent.click(button);
-    });
+    await userEvent.click(button);
 
     screen.getByRole('listbox', { name: 'Select a language:' });
     screen.getByRole('option', { name: 'Anglais' });
@@ -69,14 +69,14 @@ describe('<LanguageSelector />', () => {
           <LanguageSelector currentLanguage="fr" languages={languages} />
         </IntlProvider>
       </HistoryProvider>,
+      { wrapper: null },
     );
     const button = screen.getByLabelText('Select a language:', {
       selector: 'button',
     });
 
-    await act(async () => {
-      await userEvent.click(button);
-    });
+    await userEvent.click(button);
+
     const link = await screen.findByRole('link', { name: 'Anglais' });
     expect(link).toHaveAttribute('href', '/switch/to/en/?args=0');
     expect(link.title).toEqual('Switch to Anglais');