♻️(frontend) Joanie api client load in test

Joanie's api client shouldn't be loaded on test that don't use it.

Author: rlecellier

src/frontend/js/components/TeacherDashboardCourseList/index.spec.tsx

@@ -67,7 +67,7 @@ describe('components/TeacherDashboardCourseList', () => {
 
     await expectNoSpinner('Loading courses...');
     expect(
-      screen.getByRole('heading', { name: /TeacherDashboardCourseList test title/ }),
+      await screen.findByRole('heading', { name: /TeacherDashboardCourseList test title/ }),
     ).toBeInTheDocument();
 
     const calledUrls = fetchMock.calls().map((call) => call[0]);

src/frontend/js/hooks/useDefaultOrganizationId/index.spec.tsx

@@ -3,7 +3,7 @@ import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { OrganizationFactory } from 'utils/test/factories/joanieLegacy';
 import { Organization } from 'types/Joanie';
-import { JoanieAppWrapper, setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import JoanieAppWrapper, { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import useDefaultOrganizationId from '.';
 
 jest.mock('utils/context', () => ({

src/frontend/js/hooks/useResources/index.spec.tsx

@@ -106,7 +106,8 @@ describe('useResources (omniscient)', () => {
       wrapper: Wrapper,
     });
 
-    await waitFor(() => expect(result.current.states.isPending).toBe(true));
+    await waitFor(() => expect(screen.queryByText('loading...')).not.toBeInTheDocument());
+    expect(result.current.states.isPending).toBe(true);
     expect(result.current.states.fetching).toBe(true);
     expect(result.current.items).toEqual([]);
 
@@ -222,8 +223,9 @@ describe('useResources (omniscient)', () => {
         wrapper: Wrapper,
       },
     );
-
-    expect(result.current.states.isPending).toBe(true);
+    await waitFor(() => {
+      expect(result.current.states.isPending).toBe(true);
+    });
     expect(result.current.item).toBe(undefined);
     expect(fetchMock.called('https://example.com/api/todos')).toBe(false);
 

src/frontend/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnersFiltersBar/index.spec.tsx

@@ -36,7 +36,7 @@ describe('<CourseLearnersFiltersBar/>', () => {
     );
 
     // Two selects should have rendered
-    const organizationFilter: HTMLInputElement = screen.getByRole('combobox', {
+    const organizationFilter: HTMLInputElement = await screen.findByRole('combobox', {
       name: 'Organization',
     });
 

src/frontend/js/pages/TeacherDashboardCourseLearnersLayout/hooks/useCourseLearnersFilters/index.spec.tsx

@@ -6,7 +6,7 @@ import {
   CourseProductRelationFactory,
   OrganizationFactory,
 } from 'utils/test/factories/joanieLegacy';
-import { JoanieAppWrapper, setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import JoanieAppWrapper, { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import useCourseLearnersFilters from '.';
 
 jest.mock('utils/context', () => ({

src/frontend/js/utils/test/render.tsx

@@ -1,8 +1,9 @@
 import { RenderResult, screen, render as testingLibraryRender } from '@testing-library/react';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, lazy } from 'react';
 import { Nullable } from 'types/utils';
 import { AppWrapperProps } from './wrappers/types';
-import { JoanieAppWrapper } from './wrappers/JoanieAppWrapper';
+
+const JoanieAppWrapper = lazy(() => import('./wrappers/JoanieAppWrapper'));
 
 //  ------- setup -------
 

src/frontend/js/utils/test/wrappers/JoanieAppWrapper.tsx

@@ -19,7 +19,7 @@ export const setupJoanieSession = () => {
   };
 };
 
-export const JoanieAppWrapper = ({
+const JoanieAppWrapper = ({
   children,
   intlOptions,
   queryOptions,
@@ -35,3 +35,5 @@ export const JoanieAppWrapper = ({
     </BaseJoanieAppWrapper>
   );
 };
+
+export default JoanieAppWrapper;

src/frontend/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.spec.tsx

@@ -54,7 +54,7 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     });
 
     await expectNoSpinner('Loading course...');
-    const link = screen.getByRole('link', {
+    const link = await screen.findByRole('link', {
       name: intl.formatMessage(messages.syllabusLinkLabel),
     });
     expect(link).toHaveAttribute('href', `/redirects/courses/${course.code}`);