richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -15,29 +15,33 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 import fetchMock from 'fetch-mock';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
-import { DATETIME_FORMAT, DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { userEvent } from '@storybook/testing-library';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import {
+  CourseStateFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
 import {
   CertificateFactory,
   CourseLightFactory,
   CourseRunFactory,
   EnrollmentFactory,
-  OrderFactory,
+  CredentialOrderFactory,
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
-import { Certificate, CourseLight, CourseRun, Order, OrderState } from 'types/Joanie';
+import { Certificate, CourseLight, CourseRun, CredentialOrder, OrderState } from 'types/Joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { SessionProvider } from 'contexts/SessionContext';
 import { resolveAll } from 'utils/resolveAll';
 import { confirm } from 'utils/indirection/window';
 import { Priority } from 'types';
 import { sleep } from 'utils/sleep';
-import { noop } from 'utils';
 import { expectBannerError } from 'utils/test/expectBanner';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { Deferred } from 'utils/test/deferred';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
-import { mockProductWithOrder } from 'utils/test/mockProductWithOrder';
+import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { LearnerDashboardPaths } from '../../../utils/learnerRouteMessages';
 import { DashboardTest } from '../../DashboardTest';
 import { DashboardItemOrder } from './DashboardItemOrder';
@@ -96,19 +100,10 @@ describe('<DashboardItemOrder/>', () => {
    * Global
    */
 
-  it('crashes if no course is provided', async () => {
-    const order: Order = { ...OrderFactory().one(), course: undefined };
-    // Hide console.error ( https://stackoverflow.com/questions/66328549/testing-an-error-thrown-by-a-react-component-using-testing-library-and-jest )
-    jest.spyOn(console, 'error').mockImplementation(noop);
-    expect(() => render(<DashboardItemOrder order={order} />)).toThrow(
-      'Order must provide course object attribute',
-    );
-  });
-
   it('renders a pending order', async () => {
-    const order: Order = OrderFactory({ state: OrderState.PENDING }).one();
+    const order: CredentialOrder = CredentialOrderFactory({ state: OrderState.PENDING }).one();
     order.target_courses = [];
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} />, { wrapper });
 
@@ -119,20 +114,22 @@ describe('<DashboardItemOrder/>', () => {
   });
 
   it('renders an order with certificate', async () => {
-    const order: Order = OrderFactory({ certificate: faker.string.uuid() }).one();
+    const order: CredentialOrder = CredentialOrderFactory({
+      certificate_id: faker.string.uuid(),
+    }).one();
     order.target_courses = [];
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     const certificate: Certificate = {
       ...CertificateFactory({
-        id: order.certificate,
+        id: order.certificate_id,
         order: { ...order, course: CourseLightFactory().one() },
       }).one(),
     };
 
     const deferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/certificates/${order.certificate}/`,
+      `https://joanie.endpoint/api/v1.0/certificates/${order.certificate_id}/`,
       deferred.promise,
     );
 
@@ -149,9 +146,11 @@ describe('<DashboardItemOrder/>', () => {
   });
 
   it('does not render an order with certificate', async () => {
-    const order: Order = OrderFactory({ certificate: faker.string.uuid() }).one();
+    const order: CredentialOrder = CredentialOrderFactory({
+      certificate_id: faker.string.uuid(),
+    }).one();
     order.target_courses = [];
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} />, { wrapper });
 
@@ -162,14 +161,33 @@ describe('<DashboardItemOrder/>', () => {
     await expectNoSpinner('Loading certificate ...');
   });
 
+  it('renders an order with a valid "Go to syllabus" link', async () => {
+    const order: CredentialOrder = CredentialOrderFactory().one();
+    order.target_courses = [];
+    const { product } = mockCourseProductWithOrder(order);
+
+    render(<DashboardItemOrder order={order} />, { wrapper });
+
+    await screen.findByRole('heading', { level: 5, name: product.title });
+    const moreButton = screen.getByRole('combobox', {
+      name: 'See additional options',
+    });
+
+    const user = userEvent.setup();
+    await user.click(moreButton);
+
+    const link = screen.getByRole('link', { name: 'Go to syllabus' });
+    expect(link.getAttribute('href')).toBe('/redirects/courses/' + order.course.code);
+  });
+
   /**
    * Non-Writable.
    */
 
   it('renders a non-writable order without target courses without certificate', async () => {
-    const order: Order = OrderFactory().one();
+    const order: CredentialOrder = CredentialOrderFactory().one();
     order.target_courses = [];
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} />, { wrapper });
 
@@ -180,8 +198,8 @@ describe('<DashboardItemOrder/>', () => {
   });
 
   it('renders a non-writable order with target courses', async () => {
-    const order: Order = OrderFactory().one();
-    const product = mockProductWithOrder(order);
+    const order: CredentialOrder = CredentialOrderFactory().one();
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} />, { wrapper });
 
@@ -194,54 +212,55 @@ describe('<DashboardItemOrder/>', () => {
   });
 
   it('renders a non-writable order with enrolled target course ', async () => {
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(1),
     }).one();
 
     // Make target course enrolled.
-    order.enrollments = EnrollmentFactory({
+    order.target_enrollments = EnrollmentFactory({
       course_run: order.target_courses[0].course_runs[0],
     }).many(1);
 
-    order.enrollments[0].course_run.state.priority = Priority.ONGOING_OPEN;
+    order.target_enrollments[0].course_run.state.priority = Priority.ONGOING_OPEN;
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
     await screen.findByText('On going');
+    const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(order.target_enrollments[0].course_run.start),
+    );
+    const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(order.target_enrollments[0].course_run.end),
+    );
     await resolveAll(order.target_courses, async (course) => {
       await screen.findByRole('heading', { level: 6, name: course.title });
-      screen.getByText(
-        'You are enrolled for the session from ' +
-          new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(
-            new Date(order.enrollments[0].course_run.start),
-          ) +
-          ' to ' +
-          new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(
-            new Date(order.enrollments[0].course_run.end),
-          ),
-      );
-      screen.getByRole('link', { name: 'Access course' });
+      expect(
+        screen.getByText(
+          `You are enrolled for this session. It's open from ${fromDate} to ${toDate}`,
+        ),
+      ).toBeInTheDocument();
+      screen.getByRole('link', { name: 'Access to course' });
     });
   });
   it('renders a non-writable order with not enrolled target course', async () => {
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(1),
-      enrollments: [],
+      target_enrollments: [],
     }).one();
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
-    await screen.findByText('Ref. ' + (order.course as CourseLight).code);
-    await screen.findByText('On going');
-    await resolveAll(order.target_courses, async (course) => {
-      await screen.findByRole('heading', { level: 6, name: course.title });
+    screen.getByText('Ref. ' + (order.course as CourseLight).code);
+    screen.getByText('On going');
+    order.target_courses.forEach((course) => {
+      screen.getByRole('heading', { level: 6, name: course.title });
       screen.getByText('You are not enrolled in this course');
       screen.getByRole('link', { name: 'Enroll' });
     });
@@ -252,9 +271,9 @@ describe('<DashboardItemOrder/>', () => {
    */
 
   it('renders a writable order with no target courses', async () => {
-    const order: Order = OrderFactory().one();
+    const order: CredentialOrder = CredentialOrderFactory().one();
     order.target_courses = [];
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
@@ -267,16 +286,23 @@ describe('<DashboardItemOrder/>', () => {
   });
 
   it('renders a writable order with enrolled target course', async () => {
-    const order: Order = OrderFactory({ target_courses: TargetCourseFactory().many(1) }).one();
+    const order: CredentialOrder = CredentialOrderFactory({
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+          ],
+        }).one(),
+      ],
+    }).one();
     // Make target course enrolled.
-    order.enrollments = [
-      {
-        ...EnrollmentFactory().one(),
-        course_run: order.target_courses[0].course_runs[0],
-      },
+    order.target_enrollments = [
+      EnrollmentFactory({ course_run: order.target_courses[0].course_runs[0] }).one(),
     ];
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
@@ -293,19 +319,31 @@ describe('<DashboardItemOrder/>', () => {
           container,
           'dashboard-item__course-enrolling__run__' + courseRun.id,
         );
-        getByText(
-          runElement,
-          'From ' +
-            new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(new Date(courseRun.start)) +
-            ' to ' +
-            new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(new Date(courseRun.end)),
-        );
+        getByText(runElement, courseRun.title);
         // Expect the first courseRun to be enrolled but not the others.
         if (i === 0) {
-          getByText(runElement, 'Enrolled');
           expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
+          const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(courseRun.start),
+          );
+          const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(courseRun.end),
+          );
+          expect(
+            screen.getByText(
+              `You are enrolled for this session. It's open from ${fromDate} to ${toDate}`,
+            ),
+          ).toBeInTheDocument();
+          const button = getByRole(runElement, 'link', { name: 'Access to course' });
+          expect(button).toHaveAttribute('href', courseRun.resource_link);
         } else {
-          expect(queryByText(runElement, 'Enrolled')).toBeNull();
+          getByText(
+            runElement,
+            'From ' +
+              new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(courseRun.start)) +
+              ' to ' +
+              new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(courseRun.end)),
+          );
           getByRole(runElement, 'button', { name: 'Enroll' });
         }
       });
@@ -314,11 +352,19 @@ describe('<DashboardItemOrder/>', () => {
 
   it('renders a writable order with not enrolled target course and enrolls it', async () => {
     // Initial order without enrollment.
-    const order: Order = OrderFactory({
-      target_courses: TargetCourseFactory().many(1),
-      enrollments: [],
+    const order: CredentialOrder = CredentialOrderFactory({
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+          ],
+        }).one(),
+      ],
+      target_enrollments: [],
     }).one();
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', []);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/',
@@ -330,9 +376,9 @@ describe('<DashboardItemOrder/>', () => {
     // invalided after the click on the Enroll button.
     const orderWithEnrollment = {
       ...order,
-      enrollments: EnrollmentFactory({ course_run: order.target_courses[0].course_runs[0] }).many(
-        1,
-      ),
+      target_enrollments: EnrollmentFactory({
+        course_run: order.target_courses[0].course_runs[0],
+      }).many(1),
     };
 
     render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
@@ -384,7 +430,7 @@ describe('<DashboardItemOrder/>', () => {
       runElement = await screen.findByTestId(
         'dashboard-item__course-enrolling__run__' + courseRun.id,
       );
-      getByText(runElement, 'Enrolled');
+      getByRole(runElement, 'link', { name: 'Access to course' });
     });
 
     expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
@@ -392,12 +438,12 @@ describe('<DashboardItemOrder/>', () => {
 
   it('renders a writable order with not enrolled target course and try to enroll it, but the API returns an error and it is shown', async () => {
     // Initial order without enrollment.
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(1),
-      enrollments: [],
+      target_enrollments: [],
     }).one();
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/',
       { results: [order], next: null, previous: null, count: null },
@@ -405,15 +451,15 @@ describe('<DashboardItemOrder/>', () => {
     );
 
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', {
-      status: 500,
-      body: 'Bad request',
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
     });
 
     render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
     // Wait for the order to be rendered.
     await screen.findByRole('heading', { level: 5, name: product.title });
 
-    await expectBreadcrumbsToEqualParts(['Back', 'My courses', product.title]);
+    await expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My courses', product.title]);
 
     const courseRun = order.target_courses[0].course_runs[0];
     const runElement = await screen.findByTestId(
@@ -442,17 +488,28 @@ describe('<DashboardItemOrder/>', () => {
 
   it('renders a writable order with enrolled target course and changes the enrollment', async () => {
     // Initial order with first course run enrolled.
-    const order: Order = OrderFactory({ target_courses: TargetCourseFactory().many(1) }).one();
+    const order: CredentialOrder = CredentialOrderFactory({
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory().one(),
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+          ],
+        }).one(),
+      ],
+    }).one();
     const initialEnrolledCourseRun = order.target_courses[0].course_runs[0];
-    order.enrollments = EnrollmentFactory({ course_run: initialEnrolledCourseRun }).many(1);
+    order.target_enrollments = EnrollmentFactory({ course_run: initialEnrolledCourseRun }).many(1);
 
     // When the existing enrollment will be set as is_active: false.
     fetchMock.put(
-      'https://joanie.endpoint/api/v1.0/enrollments/' + order.enrollments[0].id + '/',
+      'https://joanie.endpoint/api/v1.0/enrollments/' + order.target_enrollments[0].id + '/',
       [],
     );
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', []);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/',
@@ -465,7 +522,7 @@ describe('<DashboardItemOrder/>', () => {
     const newEnrolledCourseRun = order.target_courses[0].course_runs[1];
     const orderWithNewEnrollment = {
       ...order,
-      enrollments: EnrollmentFactory({ course_run: newEnrolledCourseRun }).many(1),
+      target_enrollments: EnrollmentFactory({ course_run: newEnrolledCourseRun }).many(1),
     };
 
     render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
@@ -513,7 +570,7 @@ describe('<DashboardItemOrder/>', () => {
 
     // Expect the existing enrollment to be set as is_active: false.
     const calls = fetchMock.calls(
-      'https://joanie.endpoint/api/v1.0/enrollments/' + order.enrollments[0].id + '/',
+      'https://joanie.endpoint/api/v1.0/enrollments/' + order.target_enrollments[0].id + '/',
       { method: 'put' },
     );
     expect(calls.length).toBe(1);
@@ -521,7 +578,7 @@ describe('<DashboardItemOrder/>', () => {
 
     expect(
       fetchMock.called(
-        'https://joanie.endpoint/api/v1.0/enrollments/' + order.enrollments[0].id + '/',
+        'https://joanie.endpoint/api/v1.0/enrollments/' + order.target_enrollments[0].id + '/',
         { method: 'put' },
       ),
     ).toBe(true);
@@ -531,7 +588,7 @@ describe('<DashboardItemOrder/>', () => {
       runElement = await screen.findByTestId(
         'dashboard-item__course-enrolling__run__' + newEnrolledCourseRun.id,
       );
-      getByText(runElement, 'Enrolled');
+      getByRole(runElement, 'link', { name: 'Access to course' });
     });
 
     expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
@@ -539,17 +596,23 @@ describe('<DashboardItemOrder/>', () => {
 
   it('renders a writable order with enrolled target course and refuse the confirm message when enrolling', async () => {
     // Initial order without enrollment.
-    const order: Order = OrderFactory({ target_courses: TargetCourseFactory().many(1) }).one();
+    const order: CredentialOrder = CredentialOrderFactory({
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+            CourseRunFactory().one(),
+          ],
+        }).one(),
+      ],
+    }).one();
 
     const initialEnrolledCourseRun = order.target_courses[0].course_runs[0];
-    order.enrollments = [
-      {
-        ...EnrollmentFactory().one(),
-        course_run: initialEnrolledCourseRun,
-      },
-    ];
+    order.target_enrollments = [EnrollmentFactory({ course_run: initialEnrolledCourseRun }).one()];
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', []);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/',
@@ -569,14 +632,14 @@ describe('<DashboardItemOrder/>', () => {
     let runElement = await screen.findByTestId(
       'dashboard-item__course-enrolling__run__' + courseRun.id,
     );
-    getByText(runElement, 'Enrolled');
+    getByRole(runElement, 'link', { name: 'Access to course' });
 
     // Make sure the new courseRun is not enrolled.
     const newRunElement = await screen.findByTestId(
       'dashboard-item__course-enrolling__run__' + newEnrolledCourseRun.id,
     );
     const enrollButton = getByRole(newRunElement, 'button', { name: 'Enroll' });
-    expect(queryByText(newRunElement, 'Enrolled')).toBeNull();
+    expect(queryByRole(runElement, 'button', { name: 'Access to course' })).toBeNull();
 
     expect(
       fetchMock.called('https://joanie.endpoint/api/v1.0/enrollments/', { method: 'post' }),
@@ -601,7 +664,7 @@ describe('<DashboardItemOrder/>', () => {
     runElement = await screen.findByTestId(
       'dashboard-item__course-enrolling__run__' + courseRun.id,
     );
-    getByText(runElement, 'Enrolled');
+    getByRole(runElement, 'link', { name: 'Access to course' });
 
     // Expect the enrollment to not be created and orders not invalided.
     expect(
@@ -612,20 +675,27 @@ describe('<DashboardItemOrder/>', () => {
 
   it('renders a writable order with non-enrolled (is_active=false) target course and changes the enrollment', async () => {
     // Initial order with first course run enrolled.
-    const order: Order = OrderFactory({ target_courses: TargetCourseFactory().many(1) }).one();
+    const order: CredentialOrder = CredentialOrderFactory({
+      target_courses: TargetCourseFactory({
+        course_runs: [
+          CourseRunFactory({
+            state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+          }).one(),
+        ],
+      }).many(1),
+    }).one();
 
     const courseRun = order.target_courses[0].course_runs[0];
-    const enrollment = {
-      ...EnrollmentFactory().one(),
+    const enrollment = EnrollmentFactory({
       course_run: courseRun,
       is_active: false,
-    };
-    order.enrollments = [enrollment];
+    }).one();
+    order.target_enrollments = [enrollment];
 
     // When the existing enrollment will be set as is_active: true.
     fetchMock.put('https://joanie.endpoint/api/v1.0/enrollments/' + enrollment.id + '/', []);
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/',
       { results: [order], next: null, previous: null, count: null },
@@ -636,7 +706,7 @@ describe('<DashboardItemOrder/>', () => {
     // invalided after the click on the Enroll button.
     const orderWithActiveEnrollment = {
       ...order,
-      enrollments: [
+      target_enrollments: [
         {
           ...enrollment,
           is_active: true,
@@ -689,13 +759,13 @@ describe('<DashboardItemOrder/>', () => {
       runElement = await screen.findByTestId(
         'dashboard-item__course-enrolling__run__' + courseRun.id,
       );
-      getByText(runElement, 'Enrolled');
+      getByRole(runElement, 'link', { name: 'Access to course' });
     });
 
     expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
   });
   it('renders a writable order with not yet-opened course runs', async () => {
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory({
         course_runs: CourseRunFactory({
           enrollment_start: faker.date.past({ years: 0.5 }).toISOString(),
@@ -706,7 +776,7 @@ describe('<DashboardItemOrder/>', () => {
         }).many(1),
       }).many(1),
     }).one();
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
@@ -720,6 +790,7 @@ describe('<DashboardItemOrder/>', () => {
         new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
           new Date(order.target_courses[0].course_runs[0].enrollment_start),
         ),
+      { exact: false },
     );
 
     // Enroll button should be disabled.
@@ -735,14 +806,14 @@ describe('<DashboardItemOrder/>', () => {
         priority: Priority.FUTURE_CLOSED,
       },
     }).one();
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory({ course_runs: [courseRun] }).many(1),
     }).one();
 
     // Make target course enrolled.
-    order.enrollments = EnrollmentFactory({ course_run: courseRun }).many(1);
+    order.target_enrollments = EnrollmentFactory({ course_run: courseRun }).many(1);
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
@@ -754,7 +825,7 @@ describe('<DashboardItemOrder/>', () => {
 
     // The course run should be shown as enrolled even if is it past.
     const runElement = screen.getByTestId('dashboard-item__course-enrolling__run__' + courseRun.id);
-    getByText(runElement, 'Enrolled');
+    expect(screen.queryByRole('link', { name: 'Access to course' })).not.toBeInTheDocument();
     expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
   });
 
@@ -767,12 +838,12 @@ describe('<DashboardItemOrder/>', () => {
       },
     }).one();
 
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory({ course_runs: [courseRun] }).many(1),
-      enrollments: [],
+      target_enrollments: [],
     }).one();
 
-    const product = mockProductWithOrder(order);
+    const { product } = mockCourseProductWithOrder(order);
 
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
       wrapper,