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

package/js/pages/TeacherDashboardCoursesLoader/index.tsx

@@ -42,8 +42,10 @@ export const TeacherDashboardCoursesLoader = () => {
           </h1>
         </div>
 
-        <SearchBar onSubmit={submitSearch} />
-        <SearchResultsCount nbResults={count} />
+        <SearchBar.Container>
+          <SearchBar onSubmit={submitSearch} />
+          <SearchResultsCount nbResults={count} />
+        </SearchBar.Container>
       </div>
       <div className="teacher-courses-page">
         <TeacherDashboardCourseList

package/js/types/Joanie.ts

@@ -460,6 +460,7 @@ export interface PaginatedResourceQuery extends ResourcesQuery {
 export interface EnrollmentsQuery extends PaginatedResourceQuery {
   course_run_id?: CourseRun['id'];
   was_created_by_order?: boolean;
+  query?: string;
 }
 
 interface EnrollmentCreationPayload {

package/js/utils/test/render.tsx

@@ -65,7 +65,11 @@ export const render: RenderFunction = (
       rerenderOptions?: Partial<Omit<AppWrapperProps, 'testingLibraryOptions'>>,
     ) => {
       return renderResult.rerender(
-        Wrapper === null ? element : <Wrapper {...rerenderOptions}>{rerenderElement}</Wrapper>,
+        Wrapper === null ? (
+          rerenderElement
+        ) : (
+          <Wrapper {...rerenderOptions}>{rerenderElement}</Wrapper>
+        ),
       );
     },
   };

package/js/utils/test/wrappers/BaseAppWrapper.tsx

@@ -1,8 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { SessionProvider } from 'contexts/SessionContext';
-import { IntlWrapper } from './IntlWrapper';
-import { ReactQueryWrapper } from './ReactQueryWrapper';
+import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { AppWrapperProps } from './types';
+import { ReactQueryAppWrapper } from './ReactQueryAppWrapper';
 
 export const BaseAppWrapper = ({
   children,
@@ -10,10 +9,8 @@ export const BaseAppWrapper = ({
   queryOptions,
 }: PropsWithChildren<AppWrapperProps>) => {
   return (
-    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
-      <ReactQueryWrapper {...(queryOptions || {})}>
-        <SessionProvider>{children}</SessionProvider>
-      </ReactQueryWrapper>
-    </IntlWrapper>
+    <ReactQueryAppWrapper queryOptions={queryOptions} intlOptions={intlOptions}>
+      <BaseSessionProvider>{children}</BaseSessionProvider>
+    </ReactQueryAppWrapper>
   );
 };

package/js/utils/test/wrappers/BaseJoanieAppWrapper.tsx

@@ -1,9 +1,8 @@
 import { PropsWithChildren } from 'react';
 
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { IntlWrapper } from './IntlWrapper';
-import { ReactQueryWrapper } from './ReactQueryWrapper';
 import { AppWrapperProps } from './types';
+import { ReactQueryAppWrapper } from './ReactQueryAppWrapper';
 
 export const BaseJoanieAppWrapper = ({
   children,
@@ -11,10 +10,8 @@ export const BaseJoanieAppWrapper = ({
   queryOptions,
 }: PropsWithChildren<AppWrapperProps>) => {
   return (
-    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
-      <ReactQueryWrapper {...(queryOptions || {})}>
-        <JoanieSessionProvider>{children}</JoanieSessionProvider>
-      </ReactQueryWrapper>
-    </IntlWrapper>
+    <ReactQueryAppWrapper queryOptions={queryOptions} intlOptions={intlOptions}>
+      <JoanieSessionProvider>{children}</JoanieSessionProvider>
+    </ReactQueryAppWrapper>
   );
 };

package/js/utils/test/wrappers/IntlWrapper.tsx

@@ -1,7 +1,9 @@
-import { ComponentProps, PropsWithChildren } from 'react';
+import { ComponentProps } from 'react';
 import { IntlProvider, ReactIntlErrorCode } from 'react-intl';
 
-export interface IntlWrapperProps extends PropsWithChildren, ComponentProps<typeof IntlProvider> {}
+export interface IntlWrapperProps extends Omit<ComponentProps<typeof IntlProvider>, 'locale'> {
+  locale?: string;
+}
 
 export const IntlWrapper = ({ children, ...options }: IntlWrapperProps) => (
   <IntlProvider

package/js/utils/test/wrappers/PresentationalAppWrapper.tsx

@@ -9,7 +9,7 @@ export const PresentationalAppWrapper = ({
   routerOptions,
 }: PropsWithChildren<{ intlOptions?: IntlWrapperProps; routerOptions?: RouterWrapperProps }>) => {
   return (
-    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+    <IntlWrapper {...intlOptions}>
       <CunninghamProvider>
         <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
       </CunninghamProvider>

package/js/utils/test/wrappers/ReactQueryAppWrapper.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { AppWrapperProps } from './types';
+
+export const ReactQueryAppWrapper = ({
+  children,
+  intlOptions,
+  queryOptions,
+}: PropsWithChildren<AppWrapperProps>) => {
+  return (
+    <IntlWrapper {...intlOptions}>
+      <ReactQueryWrapper {...queryOptions}>{children}</ReactQueryWrapper>
+    </IntlWrapper>
+  );
+};

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

@@ -1,15 +1,16 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { JoanieFileFactory } from 'utils/test/factories/joanie';
+import { render } from 'utils/test/render';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '.';
 
 describe('<DashboardAvatar/>', () => {
   it('should work with empty title', () => {
-    render(<DashboardAvatar title="" />);
+    render(<DashboardAvatar title="" />, { wrapper: null });
     expect(screen.getByTestId('dashboard-avatar')).toHaveTextContent('');
   });
 
   it('should display the first letter of the title', () => {
-    render(<DashboardAvatar title="Bob" />);
+    render(<DashboardAvatar title="Bob" />, { wrapper: null });
     expect(screen.getByTestId('dashboard-avatar')).toHaveTextContent('B');
   });
 
@@ -18,14 +19,16 @@ describe('<DashboardAvatar/>', () => {
       src: 'http://my.awesome.image',
       srcset: '200w http://my.awesome.image/200',
     }).one();
-    render(<DashboardAvatar title="Bob" image={image} />);
+    render(<DashboardAvatar title="Bob" image={image} />, { wrapper: null });
     const img = screen.getByAltText('Bob');
     expect(img).toHaveAttribute('src', 'http://my.awesome.image');
     expect(img).toHaveAttribute('srcset', '200w http://my.awesome.image/200');
   });
 
   it('should contain the variant class for SQUARE', () => {
-    render(<DashboardAvatar title="Bob" variant={DashboardAvatarVariantEnum.SQUARE} />);
+    render(<DashboardAvatar title="Bob" variant={DashboardAvatarVariantEnum.SQUARE} />, {
+      wrapper: null,
+    });
     expect(screen.getByTestId('dashboard-avatar')).toHaveClass('dashboard__avatar--square');
   });
 });

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

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test/render';
 import { DashboardBox } from '.';
 
 describe('<DashboardBox/>', () => {
@@ -7,6 +8,7 @@ describe('<DashboardBox/>', () => {
       <DashboardBox header="Header" footer="Footer">
         Content
       </DashboardBox>,
+      { wrapper: null },
     );
     screen.getByText('Header');
     screen.getByText('Content');

package/js/widgets/Dashboard/components/DashboardItem/Certificate/index.spec.tsx

@@ -1,13 +1,8 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import { PropsWithChildren } from 'react';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { Certificate, ProductType } from 'types/Joanie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardItemCertificate } from 'widgets/Dashboard/components/DashboardItem/Certificate/index';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import {
@@ -17,12 +12,15 @@ import {
   NestedCredentialOrderFactory,
 } from 'utils/test/factories/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';
 
 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(),
 }));
 
@@ -49,15 +47,7 @@ describe.each([
     }),
   },
 ])('<DashboardCertificate/> $label', ({ overrideFactory }) => {
-  const Wrapper = ({ children }: PropsWithChildren) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>{children}</SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
+  setupJoanieSession();
 
   beforeAll(() => {
     // eslint-disable-next-line compat/compat
@@ -67,23 +57,11 @@ describe.each([
     HTMLAnchorElement.prototype.click = jest.fn();
   });
 
-  beforeEach(() => {
-    // SessionProvider queries
-    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   it('displays a certificate', async () => {
     const certificate: Certificate = CertificateFactory(overrideFactory()).one();
     render(
       <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,
-      { wrapper: Wrapper },
+      { wrapper: BaseJoanieAppWrapper },
     );
 
     await waitFor(() => screen.getByText(certificate.certificate_definition.title));
@@ -107,18 +85,20 @@ describe.each([
   it('downloads the certificate', async () => {
     const certificate: Certificate = CertificateFactory(overrideFactory()).one();
 
-    fetchMock.get(`https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`, () => ({
-      status: HttpStatusCode.OK,
-      body: new Blob(['test']),
-      headers: {
-        'Content-Disposition': 'attachment; filename="test.pdf";',
-        'Content-Type': 'application/pdf',
-      },
-    }));
-
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/certificates/${certificate.id}/download/`,
+      () => ({
+        status: HttpStatusCode.OK,
+        body: new Blob(['test']),
+        headers: {
+          'Content-Disposition': 'attachment; filename="test.pdf";',
+          'Content-Type': 'application/pdf',
+        },
+      }),
+    );
     render(
       <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,
-      { wrapper: Wrapper },
+      { wrapper: BaseJoanieAppWrapper },
     );
 
     await waitFor(() => screen.getByText(certificate.certificate_definition.title));

package/js/widgets/Dashboard/components/DashboardItem/CertificateStatus/index.spec.tsx

@@ -1,21 +1,19 @@
-import { IntlProvider } from 'react-intl';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
 import { ProductType } from 'types/Joanie';
 import { CertificateFactory } from 'utils/test/factories/joanie';
-import CertificateStatus, { CertificateStatusProps } from '.';
+import { render } from 'utils/test/render';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
+import CertificateStatus from '.';
 
 describe('<CertificateStatus/>', () => {
-  const Wrapper = ({ certificate, productType }: CertificateStatusProps) => (
-    <IntlProvider locale="en">
-      <CertificateStatus certificate={certificate} productType={productType} />
-    </IntlProvider>
-  );
-
   it('should display message for issued certificate.', () => {
     const certificate = CertificateFactory({
       issued_on: new Date('01/01/2021').toISOString(),
     }).one();
-    render(<Wrapper certificate={certificate} productType={ProductType.CERTIFICATE} />);
+    render(<CertificateStatus certificate={certificate} productType={ProductType.CERTIFICATE} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(screen.getByText('Issued on Jan 01, 2021')).toBeInTheDocument();
 
     expect(
@@ -31,7 +29,9 @@ describe('<CertificateStatus/>', () => {
   });
 
   it('should display message for no certificate of product type certificate.', () => {
-    render(<Wrapper productType={ProductType.CERTIFICATE} />);
+    render(<CertificateStatus productType={ProductType.CERTIFICATE} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
 
     expect(
       screen.getByText(
@@ -48,7 +48,9 @@ describe('<CertificateStatus/>', () => {
   });
 
   it('should display message for no certificate of product type credential.', () => {
-    render(<Wrapper productType={ProductType.CREDENTIAL} />);
+    render(<CertificateStatus productType={ProductType.CREDENTIAL} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(
       screen.getByText(
         'When all your courses have been passed, you will be able to download your certificate here.',

package/js/widgets/Dashboard/components/DashboardItem/Contract/index.spec.tsx

@@ -1,14 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import { PropsWithChildren } from 'react';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
-import fetchMock from 'fetch-mock';
+import { screen } from '@testing-library/react';
 import { faker } from '@faker-js/faker';
-import { MemoryRouter } from 'react-router-dom';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { Contract, NestedCredentialOrder } from 'types/Joanie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract/index';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import {
@@ -16,12 +9,14 @@ import {
   CredentialOrderFactory,
   NestedCredentialOrderFactory,
 } from 'utils/test/factories/joanie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 
 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(),
 }));
 
@@ -35,34 +30,13 @@ describe.each([
     OrderSerializer: CredentialOrderFactory,
   },
 ])('<DashboardContract/> $label', ({ OrderSerializer }) => {
-  const Wrapper = ({ children }: PropsWithChildren) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <MemoryRouter>{children}</MemoryRouter>
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
+  setupJoanieSession();
 
   beforeAll(() => {
     // eslint-disable-next-line compat/compat
     URL.createObjectURL = jest.fn();
   });
 
-  beforeEach(() => {
-    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   it.each([
     { label: 'writable', writable: true },
     { label: 'none-writable', writable: false },
@@ -81,9 +55,6 @@ describe.each([
         contract={contract}
         writable={writable}
       />,
-      {
-        wrapper: Wrapper,
-      },
     );
 
     expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
@@ -118,9 +89,6 @@ describe.each([
         contract={contract}
         writable={writable}
       />,
-      {
-        wrapper: Wrapper,
-      },
     );
 
     expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
@@ -149,9 +117,6 @@ describe.each([
         contract={contract}
         writable={true}
       />,
-      {
-        wrapper: Wrapper,
-      },
     );
 
     expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
@@ -179,9 +144,6 @@ describe.each([
         contract={contract}
         writable={false}
       />,
-      {
-        wrapper: Wrapper,
-      },
     );
 
     expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.spec.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider, createIntl } from 'react-intl';
+import { screen } from '@testing-library/react';
+import { createIntl } from 'react-intl';
 import { PropsWithChildren } from 'react';
 import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
 import { Priority } from 'types';
@@ -9,6 +9,8 @@ import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
 import { noop } from 'utils';
 import { computeState } from 'utils/CourseRuns';
 import { formatRelativeDate } from 'utils/relativeDate';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
+import { render } from 'utils/test/render';
 import { DashboardItemCourseEnrollingRun, Enrolled } from '.';
 
 /**
@@ -16,10 +18,6 @@ import { DashboardItemCourseEnrollingRun, Enrolled } from '.';
  * DashboardItemOrder.spec.tsx. But here are some tests that are more straightforward.
  */
 describe('<Enrolled/>', () => {
-  const wrapper = ({ children }: PropsWithChildren) => {
-    return <IntlProvider locale="en">{children}</IntlProvider>;
-  };
-
   it.each([
     {
       buttonTestLabel: 'and access course button',
@@ -87,7 +85,9 @@ describe('<Enrolled/>', () => {
     async ({ priority, expectButton, expectLabelTemplate }) => {
       const enrollment: Enrollment = EnrollmentFactory().one();
       enrollment.course_run.state.priority = priority;
-      render(<Enrolled enrollment={enrollment} />, { wrapper });
+      render(<Enrolled enrollment={enrollment} />, {
+        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+      });
       const intl = createIntl({ locale: 'en' });
 
       const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
@@ -138,14 +138,15 @@ describe('<DashboardItemCourseEnrollingRun/>', () => {
       joanieCourseRun.course = order.course;
 
       render(
-        <IntlProvider locale="en">
-          <DashboardItemCourseEnrollingRun
-            order={order}
-            courseRun={joanieCourseRun}
-            selected={false}
-            enroll={noop}
-          />
-        </IntlProvider>,
+        <DashboardItemCourseEnrollingRun
+          order={order}
+          courseRun={joanieCourseRun}
+          selected={false}
+          enroll={noop}
+        />,
+        {
+          wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+        },
       );
 
       if (expectEnrollmentNotYetOpened) {

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.spec.tsx

@@ -1,7 +1,5 @@
-import { IntlProvider } from 'react-intl';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { faker } from '@faker-js/faker';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { Enrollment } from 'types/Joanie';
 import {
   CourseStateFactory,
@@ -10,28 +8,20 @@ import {
 import { CourseRunWithCourseFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { Priority } from 'types';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import { DashboardItemEnrollment } from './DashboardItemEnrollment';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
-    joanie_backend: { endpoint: 'https://joanie.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 
 describe('<DashboardItemEnrollment/>', () => {
-  const Wrapper = ({ enrollment }: { enrollment: Enrollment }) => (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient()}>
-        <JoanieSessionProvider>
-          <DashboardItemEnrollment enrollment={enrollment} />
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
+  setupJoanieSession();
 
   it('renders a opened enrollment', () => {
     const enrollment: Enrollment = EnrollmentFactory({
@@ -44,7 +34,7 @@ describe('<DashboardItemEnrollment/>', () => {
     }).one();
     enrollment.course_run.state.priority = Priority.ONGOING_OPEN;
 
-    render(<Wrapper enrollment={enrollment} />);
+    render(<DashboardItemEnrollment enrollment={enrollment} />);
     screen.getByText(enrollment.course_run.course!.title);
     screen.getByText('Ref. ' + enrollment.course_run.course!.code);
     const link = screen.getByRole('link', { name: 'Access to course' });
@@ -71,7 +61,7 @@ describe('<DashboardItemEnrollment/>', () => {
       }).one(),
     }).one();
 
-    render(<Wrapper enrollment={enrollment} />);
+    render(<DashboardItemEnrollment enrollment={enrollment} />);
     screen.getByText(enrollment.course_run.course!.title);
     screen.getByText('Ref. ' + enrollment.course_run.course!.code);
     const link = screen.getByRole('link', { name: 'Access to course' });
@@ -86,7 +76,7 @@ describe('<DashboardItemEnrollment/>', () => {
       course_run: CourseRunWithCourseFactory().one(),
     }).one();
 
-    render(<Wrapper enrollment={enrollment} />);
+    render(<DashboardItemEnrollment enrollment={enrollment} />);
     screen.getByText(enrollment.course_run.course!.title);
     screen.getByText('Ref. ' + enrollment.course_run.course!.code);
     screen.getByText('Not enrolled');