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

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

@@ -1,5 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
 import { IntlProvider } from 'react-intl';
@@ -10,6 +10,7 @@ import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/fac
 import context from 'utils/context';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { render } from 'utils/test/render';
 import Search from '.';
 
 let mockMatches = false;
@@ -29,6 +30,10 @@ jest.mock('utils/context', () => ({
   default: mockRichieContextFactory().one(),
 }));
 
+jest.mock('utils/errors/handle', () => ({
+  handle: jest.fn(),
+}));
+
 describe('<Search />', () => {
   const historyPushState = jest.fn();
   const historyReplaceState = jest.fn();
@@ -42,11 +47,6 @@ describe('<Search />', () => {
     historyReplaceState,
   ];
 
-  afterEach(() => {
-    fetchMock.restore();
-    jest.resetAllMocks();
-  });
-
   it('shows a spinner while the results are loading', async () => {
     fetchMock.get('/api/v1.0/courses/?limit=20&offset=0', {
       meta: {
@@ -63,6 +63,7 @@ describe('<Search />', () => {
           </HistoryContext.Provider>
         </IntlProvider>
       </QueryClientProvider>,
+      { wrapper: null },
     );
 
     expect(screen.getByText('Loading search results...').parentElement).toHaveAttribute(
@@ -118,6 +119,7 @@ describe('<Search />', () => {
           </HistoryContext.Provider>
         </IntlProvider>
       </QueryClientProvider>,
+      { wrapper: null },
     );
 
     // Wait for search results to be loaded
@@ -142,6 +144,7 @@ describe('<Search />', () => {
           </HistoryContext.Provider>
         </IntlProvider>
       </QueryClientProvider>,
+      { wrapper: null },
     );
 
     expect(screen.getByText('Loading search results...').parentElement).toHaveAttribute(
@@ -172,6 +175,7 @@ describe('<Search />', () => {
           </HistoryContext.Provider>
         </IntlProvider>
       </QueryClientProvider>,
+      { wrapper: null },
     );
 
     await waitFor(() => {
@@ -198,6 +202,7 @@ describe('<Search />', () => {
           </HistoryContext.Provider>
         </IntlProvider>
       </QueryClientProvider>,
+      { wrapper: null },
     );
 
     // there is a button to toggle the filters pane, placed right before the filters pane in the DOM
@@ -265,6 +270,7 @@ describe('<Search />', () => {
           </HistoryContext.Provider>
         </IntlProvider>
       </QueryClientProvider>,
+      { wrapper: null },
     );
 
     // both filters and results zones are regions that are correctly labelled
@@ -301,6 +307,7 @@ describe('<Search />', () => {
             </HistoryContext.Provider>
           </IntlProvider>
         </QueryClientProvider>,
+        { wrapper: null },
       );
     });
 
@@ -333,6 +340,7 @@ describe('<Search />', () => {
             </HistoryContext.Provider>
           </IntlProvider>
         </QueryClientProvider>,
+        { wrapper: null },
       );
     });
 

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

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { act, fireEvent, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { CourseSearchParamsAction, useCourseSearchParams } from 'hooks/useCourseSearchParams';
@@ -7,6 +7,7 @@ import { history, location } from 'utils/indirection/window';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { FilterDefinition } from 'types/filters';
 import context from 'utils/context';
+import { render } from 'utils/test/render';
 import SearchSuggestField from '.';
 
 jest.mock('settings', () => ({
@@ -78,6 +79,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     // The placeholder text is shown in the input
@@ -94,6 +96,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     // The existing query is shown in the input
@@ -116,6 +119,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <OtherComponent />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     // The existing query is shown in the input
@@ -134,6 +138,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <OtherComponent />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     // The input does not show a value anymore
@@ -170,6 +175,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -212,6 +218,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -257,6 +264,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -349,6 +357,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -433,6 +442,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -477,6 +487,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -566,6 +577,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');
@@ -627,6 +639,7 @@ describe('widgets/Search/components/SearchSuggestField', () => {
           <SearchSuggestField context={context} />
         </HistoryProvider>
       </IntlProvider>,
+      { wrapper: null },
     );
 
     const field = getByPlaceholderText('Search for courses, organizations, categories');

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCertificateItem/index.spec.tsx

@@ -1,13 +1,13 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { faker } from '@faker-js/faker';
 import fetchMock from 'fetch-mock';
-import { PropsWithChildren } from 'react';
-import { IntlProvider } from 'react-intl';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { CertificationDefinitionFactory, OrderLiteFactory } from 'utils/test/factories/joanie';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { CertificateDefinition, OrderLite } from 'types/Joanie';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import CertificateItem from '.';
 
 jest.mock('utils/errors/handle');
@@ -15,16 +15,12 @@ jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 
 describe('CourseProductCertificateItem', () => {
-  const Wrapper = ({ children }: PropsWithChildren<{}>) => (
-    <IntlProvider locale="en">
-      <JoanieApiProvider>{children}</JoanieApiProvider>
-    </IntlProvider>
-  );
+  setupJoanieSession();
 
   beforeAll(() => {
     // eslint-disable-next-line compat/compat
@@ -34,19 +30,12 @@ describe('CourseProductCertificateItem', () => {
     HTMLAnchorElement.prototype.click = jest.fn();
   });
 
-  afterEach(() => {
-    fetchMock.restore();
-    jest.resetAllMocks();
-  });
-
   it('displays certificate information', () => {
     const certificateDefinition: CertificateDefinition = CertificationDefinitionFactory().one();
 
-    render(
-      <Wrapper>
-        <CertificateItem certificateDefinition={certificateDefinition} />
-      </Wrapper>,
-    );
+    render(<CertificateItem certificateDefinition={certificateDefinition} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     // the title is not a heading to prevent screen reader users "heading spam",
     // but we want it to visually look like a heading for sighted users
@@ -60,11 +49,9 @@ describe('CourseProductCertificateItem', () => {
       description: '',
     }).one();
 
-    render(
-      <Wrapper>
-        <CertificateItem certificateDefinition={certificateDefinition} />
-      </Wrapper>,
-    );
+    render(<CertificateItem certificateDefinition={certificateDefinition} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     screen.getByText(
       'You will be able to download your certificate once you will pass all course runs.',
@@ -75,11 +62,9 @@ describe('CourseProductCertificateItem', () => {
     const certificateDefinition: CertificateDefinition = CertificationDefinitionFactory().one();
     const order: OrderLite = OrderLiteFactory({ certificate_id: faker.string.uuid() }).one();
 
-    render(
-      <Wrapper>
-        <CertificateItem certificateDefinition={certificateDefinition} order={order} />
-      </Wrapper>,
-    );
+    render(<CertificateItem certificateDefinition={certificateDefinition} order={order} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     // - The certificate description should not be displayed ...
     expect(screen.queryByText(certificateDefinition.description)).toBeNull();
@@ -90,7 +75,7 @@ describe('CourseProductCertificateItem', () => {
 
     // When user clicks on "Download" button, the certificate should be downloaded
     fetchMock.get(
-      `https://joanie.test/api/v1.0/certificates/${order.certificate_id}/download/`,
+      `https://joanie.endpoint/api/v1.0/certificates/${order.certificate_id}/download/`,
       () => ({
         status: HttpStatusCode.OK,
         body: new Blob(['test']),

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/index.spec.tsx

@@ -1,9 +1,8 @@
 import { faker } from '@faker-js/faker';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import type { PropsWithChildren } from 'react';
 import { IntlProvider, createIntl } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import {
   CourseLightFactory,
@@ -12,20 +11,21 @@ import {
   CredentialOrderFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
 import type { CourseLight, CourseRun, Enrollment } from 'types/Joanie';
 import { Deferred } from 'utils/test/deferred';
 import { CourseStateTextEnum, Priority } from 'types';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { IntlHelper } from 'utils/IntlHelper';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { CourseRunList, EnrollableCourseRunList, EnrolledCourseRun } from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 
@@ -46,11 +46,7 @@ describe('CourseProductCourseRuns', () => {
     );
 
     it('renders a warning message when no course runs are provided', () => {
-      render(
-        <Wrapper>
-          <CourseRunList courseRuns={[]} />
-        </Wrapper>,
-      );
+      render(<CourseRunList courseRuns={[]} />, { wrapper: Wrapper });
 
       expect(screen.getByText('No session available for this course.'));
     });
@@ -58,11 +54,7 @@ describe('CourseProductCourseRuns', () => {
     it('renders a list of course runs', () => {
       const courseRuns: CourseRun[] = CourseRunFactory().many(2);
 
-      const { container } = render(
-        <Wrapper>
-          <CourseRunList courseRuns={courseRuns} />
-        </Wrapper>,
-      );
+      const { container } = render(<CourseRunList courseRuns={courseRuns} />, { wrapper: Wrapper });
 
       // It should render all course runs provided
       expect(screen.getAllByRole('listitem')).toHaveLength(2);
@@ -118,23 +110,16 @@ describe('CourseProductCourseRuns', () => {
   });
 
   describe('EnrollableCourseRunList', () => {
-    const Wrapper = ({ children }: PropsWithChildren) => (
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient()}>
-          <JoanieApiProvider>{children}</JoanieApiProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    );
+    setupJoanieSession();
 
     it('renders a warning message when no course runs are provided', () => {
       const order = CredentialOrderFactory().one();
       const product = ProductFactory().one();
 
-      render(
-        <Wrapper>
-          <EnrollableCourseRunList courseRuns={[]} order={order} product={product} />
-        </Wrapper>,
-      );
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+      render(<EnrollableCourseRunList courseRuns={[]} order={order} product={product} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       expect(screen.getByText('No session available for this course.'));
     });
@@ -146,11 +131,10 @@ describe('CourseProductCourseRuns', () => {
         contract_definition: undefined,
       }).one();
 
-      render(
-        <Wrapper>
-          <EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />
-        </Wrapper>,
-      );
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+      render(<EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       // the list should contain only the course run items, without the call to action button
       expect(screen.getAllByRole('listitem')).toHaveLength(2);
@@ -228,7 +212,7 @@ describe('CourseProductCourseRuns', () => {
       // - User clicks to enroll
       fetchMock.resetHistory();
       const enrollmentDeferred = new Deferred();
-      fetchMock.post('https://joanie.test/api/v1.0/enrollments/', enrollmentDeferred.promise);
+      fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', enrollmentDeferred.promise);
 
       await act(async () => {
         fireEvent.click($button);
@@ -241,10 +225,12 @@ describe('CourseProductCourseRuns', () => {
         enrollmentDeferred.resolve(HttpStatusCode.OK);
       });
 
-      const calls = fetchMock.calls();
-      expect(calls).toHaveLength(1);
+      const calledUrls = fetchMock.calls().map((call) => call[0]);
+      let nbApiCalls = 1; // post enrollments
+      nbApiCalls += 1; // refetch enrollments
+      expect(calledUrls).toHaveLength(nbApiCalls);
       // A request to create the enrollment should have been executed
-      expect(calls[0][0]).toBe('https://joanie.test/api/v1.0/enrollments/');
+      expect(calledUrls[0]).toBe('https://joanie.endpoint/api/v1.0/enrollments/');
       expect(JSON.parse(fetchMock.calls()[0][1]!.body as string)).toEqual({
         is_active: true,
         course_run_id: courseRuns[0].id,
@@ -258,13 +244,12 @@ describe('CourseProductCourseRuns', () => {
       const order = CredentialOrderFactory().one();
       const product = ProductFactory().one();
       product.contract_definition = undefined;
-      fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/`, HttpStatusCode.OK);
+      fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.code}/`, HttpStatusCode.OK);
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
 
-      render(
-        <Wrapper>
-          <EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />
-        </Wrapper>,
-      );
+      render(<EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       // the list should contain only the course run items, without the call to action button
       expect(screen.getAllByRole('listitem')).toHaveLength(2);
@@ -333,7 +318,7 @@ describe('CourseProductCourseRuns', () => {
       // - User clicks to enroll
       fetchMock.resetHistory();
       const enrollmentDeferred = new Deferred();
-      fetchMock.post('https://joanie.test/api/v1.0/enrollments/', enrollmentDeferred.promise);
+      fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', enrollmentDeferred.promise);
 
       await act(async () => {
         fireEvent.click($button);
@@ -374,11 +359,10 @@ describe('CourseProductCourseRuns', () => {
       product.contract_definition = undefined;
       const order = CredentialOrderFactory().one();
 
-      render(
-        <Wrapper>
-          <EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />
-        </Wrapper>,
-      );
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+      render(<EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       // the list should contain only the course run items, without the call to action button
       expect(screen.getAllByRole('listitem')).toHaveLength(1);
@@ -413,7 +397,7 @@ describe('CourseProductCourseRuns', () => {
       // it should be enabled already to allow early user feedback
       expect($button.disabled).toBe(false);
 
-      fetchMock.post('https://joanie.test/api/v1.0/enrollments/', []);
+      fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', []);
       await act(async () => {
         // - Select the first course run
         const $radio = screen.getByRole('radio', {
@@ -457,11 +441,10 @@ describe('CourseProductCourseRuns', () => {
       const product = ProductFactory().one();
       const order = CredentialOrderFactory().one();
 
-      render(
-        <Wrapper>
-          <EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />
-        </Wrapper>,
-      );
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+      render(<EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       // the list should contain only the course run items, without the call to action button
       expect(screen.getAllByRole('listitem')).toHaveLength(1);
@@ -502,22 +485,14 @@ describe('CourseProductCourseRuns', () => {
   });
 
   describe('EnrolledCourseRun', () => {
-    const Wrapper = ({ children }: PropsWithChildren<{}>) => (
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient()}>
-          <JoanieApiProvider>{children}</JoanieApiProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    );
-
+    setupJoanieSession();
     it('renders enrollment information', () => {
       const enrollment: Enrollment = EnrollmentFactory().one();
 
-      render(
-        <Wrapper>
-          <EnrolledCourseRun enrollment={enrollment} />
-        </Wrapper>,
-      );
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+      render(<EnrolledCourseRun enrollment={enrollment} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       // - It should render course dates,
       const $startDate = screen.getByTestId(`enrollment-${enrollment.id}-start-date`);
@@ -560,11 +535,10 @@ describe('CourseProductCourseRuns', () => {
         },
       };
 
-      render(
-        <Wrapper>
-          <EnrolledCourseRun enrollment={newEnrollment} />
-        </Wrapper>,
-      );
+      fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+      render(<EnrolledCourseRun enrollment={newEnrollment} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       await screen.getByText('You are enrolled');
       await screen.getByText('The course starts in 2 months');

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseRunItem/index.spec.tsx

@@ -1,8 +1,9 @@
 import { faker } from '@faker-js/faker';
-import { screen, getByText, render } from '@testing-library/react';
+import { screen, getByText } from '@testing-library/react';
 import { CredentialOrderFactory, ProductFactory } from 'utils/test/factories/joanie';
 import type { CourseRun, CredentialOrder } from 'types/Joanie';
 import { OrderState } from 'types/Joanie';
+import { render } from 'utils/test/render';
 import CourseRunItem from '.';
 
 jest.mock('../CourseProductCourseRuns', () => ({
@@ -21,7 +22,9 @@ describe('CourseRunItem', () => {
 
     const targetCourse = order.target_courses[0];
 
-    render(<CourseRunItem targetCourse={targetCourse} order={order} product={product} />);
+    render(<CourseRunItem targetCourse={targetCourse} order={order} product={product} />, {
+      wrapper: null,
+    });
 
     // - It should render CourseRunList component
     const $item = screen.getByTestId(`course-item-${targetCourse.code}`);