richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import fetchMock from 'fetch-mock';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import {
+  CourseLightFactory,
+  CourseProductRelationFactory,
+  CredentialOrderFactory,
+  CredentialProductFactory,
+} from 'utils/test/factories/joanie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { UserFactory } from 'utils/test/factories/richie';
+import { CredentialOrder, OrderState } from 'types/Joanie';
+import { Maybe } from 'types/utils';
+import CourseProductItem, { CourseProductItemProps } from '.';
+
+const render = (args: CourseProductItemProps, options?: Maybe<{ order: CredentialOrder }>) => {
+  fetchMock.get(`http://localhost:8071/api/v1.0/credit-cards/`, [], { overwriteRoutes: true });
+  fetchMock.get(`http://localhost:8071/api/v1.0/orders/`, [], { overwriteRoutes: true });
+  fetchMock.get(`http://localhost:8071/api/v1.0/addresses/`, [], { overwriteRoutes: true });
+  fetchMock.get(
+    `http://localhost:8071/api/v1.0/courses/${args.course.code}/products/${args.productId}/`,
+    CourseProductRelationFactory({ product: CredentialProductFactory().one() }).one(),
+    { overwriteRoutes: true },
+  );
+  fetchMock.get(
+    `http://localhost:8071/api/v1.0/orders/?course_code=${args.course.code}&product_id=${args.productId}&state=pending&state=validated&state=submitted`,
+    options?.order ? [options?.order] : [],
+    { overwriteRoutes: true },
+  );
+  return StorybookHelper.wrapInApp(
+    <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
+      <CourseProductItem {...args} />
+    </QueryClientProvider>,
+  );
+};
+
+export default {
+  component: CourseProductItem,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  args: {
+    productId: 'AAA',
+    course: CourseLightFactory({ code: 'BBB' }).one(),
+  },
+  render: (args) => render(args),
+} as Meta<typeof CourseProductItem>;
+
+type Story = StoryObj<typeof CourseProductItem>;
+
+export const Default: Story = {};
+
+export const WithPendingOrder: Story = {
+  args: {
+    productId: 'AAA',
+    course: CourseLightFactory({ code: 'BBB' }).one(),
+  },
+  render: (args) =>
+    render(args, { order: CredentialOrderFactory({ state: OrderState.PENDING }).one() }),
+};
+
+export const WithValidatedOrder: Story = {
+  args: {
+    productId: 'AAA',
+    course: CourseLightFactory({ code: 'BBB' }).one(),
+  },
+  render: (args) =>
+    render(args, { order: CredentialOrderFactory({ state: OrderState.VALIDATED }).one() }),
+};
+
+export const WithSubmittedOrder: Story = {
+  args: {
+    productId: 'AAA',
+    course: CourseLightFactory({ code: 'BBB' }).one(),
+  },
+  render: (args) =>
+    render(args, { order: CredentialOrderFactory({ state: OrderState.SUBMITTED }).one() }),
+};

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

@@ -0,0 +1,253 @@
+import { Children, useEffect, useMemo } from 'react';
+import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
+import c from 'classnames';
+import {
+  ProductType,
+  OrderState,
+  CourseLight,
+  Product,
+  CredentialOrder,
+  CredentialProduct,
+} from 'types/Joanie';
+import { useCourseProduct } from 'hooks/useCourseProducts';
+import { Spinner } from 'components/Spinner';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { Maybe } from 'types/utils';
+import useDateFormat from 'hooks/useDateFormat';
+import { ProductHelper } from 'utils/ProductHelper';
+import useProductOrder from 'hooks/useProductOrder';
+import { OrderHelper } from 'utils/OrderHelper';
+import { handle } from 'utils/errors/handle';
+import { ProductSignatureHeader } from 'widgets/SyllabusCourseRunsList/components/CourseProductItem/components/ProductSignatureHeader';
+import CertificateItem from './components/CourseProductCertificateItem';
+import CourseRunItem from './components/CourseRunItem';
+import CourseProductItemFooter from './CourseProductItemFooter';
+
+const messages = defineMessages({
+  purchased: {
+    defaultMessage: 'Purchased',
+    description: 'Message displayed when authenticated user owned the product',
+    id: 'components.CourseProductItem.purchased',
+  },
+  pending: {
+    defaultMessage: 'Pending',
+    description:
+      'Message displayed when authenticated user has purchased the product but order is still pending',
+    id: 'components.CourseProductItem.pending',
+  },
+  loading: {
+    defaultMessage: 'Loading product information...',
+    description:
+      'Accessible text for the initial loading spinner displayed when product is fetching',
+    id: 'components.CourseProductItem.loadingInitial',
+  },
+  fromTo: {
+    defaultMessage: 'From {from} to {to}',
+    description: 'Course run date range',
+    id: 'components.CourseProductItem.fromTo',
+  },
+  availableIn: {
+    defaultMessage: 'Available in {languages}',
+    description: 'Course run languages',
+    id: 'components.CourseProductItem.availableIn',
+  },
+});
+
+export interface CourseProductItemProps {
+  compact?: boolean;
+  course: CourseLight;
+  productId: Product['id'];
+}
+
+type HeaderProps = {
+  compact: boolean;
+  hasPurchased: boolean;
+  canPurchase: boolean;
+  order: Maybe<CredentialOrder>;
+  product: Product;
+};
+const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderProps) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
+
+  // compact mode is available for product until they got a VALIDATED order.
+  const canShowMetadata = useMemo(() => {
+    return compact && (!order || [OrderState.SUBMITTED, OrderState.PENDING].includes(order!.state));
+  }, [compact, hasPurchased]);
+
+  const [minDate, maxDate] = useMemo(() => {
+    if (!canShowMetadata) return [undefined, undefined];
+    return ProductHelper.getDateRange(product);
+  }, [canShowMetadata, product]);
+
+  const languages = useMemo(() => {
+    if (!canShowMetadata) return '';
+    return ProductHelper.getLanguages(product, true, intl);
+  }, [canShowMetadata, product, intl]);
+
+  return (
+    <header className="product-widget__header">
+      <div className="product-widget__header-main">
+        <h3 className="product-widget__title">{product.title}</h3>
+        <strong className="product-widget__price h6">
+          {order?.state === OrderState.VALIDATED && <FormattedMessage {...messages.purchased} />}
+          {order?.state === OrderState.SUBMITTED && <FormattedMessage {...messages.pending} />}
+          {canPurchase && (
+            <FormattedNumber
+              currency={product.price_currency}
+              value={product.price}
+              style="currency"
+            />
+          )}
+        </strong>
+      </div>
+      {canShowMetadata && (
+        <>
+          <p
+            className="product-widget__header-metadata"
+            data-testid="product-widget__header-metadata-dates"
+          >
+            <Icon name={IconTypeEnum.CALENDAR} size="small" />
+            <FormattedMessage
+              {...messages.fromTo}
+              values={{
+                from: formatDate(minDate!),
+                to: formatDate(maxDate!),
+              }}
+            />
+          </p>
+          <p
+            className="product-widget__header-metadata"
+            data-testid="product-widget__header-metadata-languages"
+          >
+            <Icon name={IconTypeEnum.LANGUAGES} size="small" />
+            <FormattedMessage {...messages.availableIn} values={{ languages }} />
+          </p>
+        </>
+      )}
+    </header>
+  );
+};
+const Content = ({ product, order }: { product: Product; order?: CredentialOrder }) => {
+  const needsSignature = order
+    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
+    : false;
+  const targetCourses = useMemo(() => {
+    if (order) {
+      return order.target_courses;
+    }
+
+    if (product) {
+      return product.target_courses;
+    }
+
+    return [];
+  }, [product, order]);
+
+  return (
+    <ol className="product-widget__content">
+      {needsSignature && <ProductSignatureHeader order={order} />}
+      {Children.toArray(
+        targetCourses.map((target_course) => (
+          <CourseRunItem targetCourse={target_course} order={order} product={product} />
+        )),
+      )}
+      {product.certificate_definition && (
+        <CertificateItem certificateDefinition={product.certificate_definition} order={order} />
+      )}
+    </ol>
+  );
+};
+
+const CourseProductItem = ({ productId, course, compact = false }: CourseProductItemProps) => {
+  // FIXME(rlecellier): useCourseProduct need's a filter on product.type that only return
+  // CredentialOrder
+  const { item: courseProductRelation, states: productQueryStates } = useCourseProduct({
+    product_id: productId,
+    course_id: course.code,
+  });
+  const product = courseProductRelation?.product;
+  const { item: productOrder, states: orderQueryStates } = useProductOrder({
+    productId,
+    courseCode: course.code,
+  });
+
+  const order = productOrder as CredentialOrder;
+  const canPurchase = !order || order.state === OrderState.PENDING;
+  const hasPurchased = (order && order.state === OrderState.VALIDATED) ?? false;
+
+  const hasError = Boolean(productQueryStates.error);
+  const isFetching = productQueryStates.fetching || orderQueryStates.fetching;
+  const canShowContent = !compact || hasPurchased;
+
+  useEffect(() => {
+    if (product && product.type !== ProductType.CREDENTIAL) {
+      handle(
+        new Error(
+          `Cannot render product "${product.type}" (${product.id}) through CourseProductItem on course ${course.code}`,
+        ),
+      );
+    }
+  }, [product]);
+
+  if (product && product.type !== ProductType.CREDENTIAL) {
+    // CourseProductItem only handle CREDENTIAL products
+    return null;
+  }
+
+  const orderGroups = courseProductRelation
+    ? ProductHelper.getActiveOrderGroups(courseProductRelation)
+    : [];
+  const orderGroupsAvailable = orderGroups.filter(
+    (orderGroup) => orderGroup.nb_available_seats > 0,
+  );
+
+  return (
+    <section
+      className={c('product-widget', {
+        'product-widget--has-error': hasError,
+        'product-widget--compact': compact,
+        'product-widget--purchased': hasPurchased,
+      })}
+    >
+      {isFetching && (
+        <div className="product-widget__overlay">
+          <Spinner aria-labelledby="loading-course" theme="light" size="large">
+            <span id="loading-course">
+              <FormattedMessage {...messages.loading} />
+            </span>
+          </Spinner>
+        </div>
+      )}
+      {hasError && (
+        <p className="product-widget__content">
+          <Icon name={IconTypeEnum.WARNING} size="small" />
+          {productQueryStates.error}
+        </p>
+      )}
+      {!hasError && product && (
+        <>
+          <Header
+            product={product}
+            order={order}
+            canPurchase={canPurchase}
+            hasPurchased={hasPurchased}
+            compact={compact}
+          />
+          {canShowContent && <Content product={product} order={order} />}
+          <footer className="product-widget__footer">
+            <CourseProductItemFooter
+              course={course}
+              product={product as CredentialProduct}
+              orderGroups={orderGroups}
+              orderGroupsAvailable={orderGroupsAvailable}
+              canPurchase={canPurchase}
+            />
+          </footer>
+        </>
+      )}
+    </section>
+  );
+};
+
+export default CourseProductItem;

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/CourseRunUnenrollmentButton/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@openfun/cunningham-react';
 import * as React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
@@ -17,9 +18,9 @@ interface Props {
 export const CourseRunUnenrollButton = (props: Props) => {
   return (
     <div className="course-run-unenrollment">
-      <button className="button course-run-unenrollment__button" onClick={props.onUnenroll}>
+      <Button fullWidth onClick={props.onUnenroll}>
         <FormattedMessage {...messages.unenroll} />
-      </button>
+      </Button>
     </div>
   );
 };

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/_styles.scss

@@ -1,13 +1,5 @@
 .subheader__aside {
   .course-run-enrollment {
-    &__cta {
-      @include r-button-colors(
-        r-theme-val(course-detail, subheader-run-cta),
-        $apply-border: true,
-        $include-hover: true
-      );
-    }
-
     &__helptext,
     &__errortext {
       color: r-theme-val('course-detail', 'subheader-run-feedback-color');
@@ -18,23 +10,6 @@
 .course-run-unenrollment,
 .course-run-enrollment {
   &__cta {
-    width: 100%;
-    @include button-small($font-weight: bold);
-    @include r-button-colors(
-      r-theme-val(course-detail, run-cta),
-      $apply-border: true,
-      $include-hover: true
-    );
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1rem;
-
-    &.disabled {
-      opacity: 0.65;
-      cursor: not-allowed;
-    }
-
     &--loading {
       cursor: progress !important;
       opacity: 0.7;

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx

@@ -3,8 +3,9 @@ import fetchMock from 'fetch-mock';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
 
-import { CourseRun } from 'types';
+import { faker } from '@faker-js/faker';
 import { Deferred } from 'utils/test/deferred';
+import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -12,7 +13,8 @@ import {
 } from 'utils/test/factories/richie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { User } from 'types/User';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { Priority } from 'types';
 import CourseRunEnrollment from './index';
 
 jest.mock('utils/errors/handle');
@@ -27,7 +29,7 @@ jest.mock('utils/context', () => ({
     lms_backends: [
       {
         backend: 'joanie',
-        course_regexp: '(https://joanie.endpoint/)(?<course_id>.*)',
+        course_regexp: '^.*/api/v1.0((?:/(?:courses|course-runs|products)/[^/]+)+)/?$',
         endpoint: 'https://joanie.endpoint',
       },
     ],
@@ -53,14 +55,13 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     fetchMock.restore();
   });
   it('shows an "Enroll" button and allows the user to enroll', async () => {
-    const user: User = UserFactory().one();
-    const courseRun: CourseRun = CourseRunFactory().one();
-    courseRun.resource_link = 'https://joanie.endpoint/' + courseRun.id;
-    courseRun.state.priority = 0;
+    const user = UserFactory().one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
     const enrollmentDeferred = new Deferred();
     fetchMock.get(
-      `${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`,
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${courseRun.id}`,
       enrollmentDeferred.promise,
     );
 
@@ -96,12 +97,15 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
   });
 
   it('shows an error message when enrollment get request failed', async () => {
-    const user: User = UserFactory().one();
-    const courseRun: CourseRun = CourseRunFactory().one();
-    courseRun.resource_link = 'https://joanie.endpoint/' + courseRun.id;
-    courseRun.state.priority = 0;
+    const user = UserFactory().one();
+    const courseRun = CourseRunFactory().one();
+    const joanieEnrollmentId = faker.string.uuid();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollmentId}`;
 
-    fetchMock.get(`${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`, 500);
+    fetchMock.get(
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${joanieEnrollmentId}`,
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
 
     await act(async () => {
       render(
@@ -118,15 +122,53 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     await screen.findByText('Enrollment fetching failed');
   });
 
+  it('shows a link to the course if the user is already enrolled', async () => {
+    // Joanie session requests
+    let nbApiCalls = 3;
+    const user = UserFactory().one();
+    const joanieEnrollment = JoanieEnrollment({ is_active: true }).one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollment.course_run.id}/`;
+    courseRun.state.priority = Priority.ONGOING_OPEN;
+
+    fetchMock.get(
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${joanieEnrollment.course_run.id}`,
+      {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [joanieEnrollment],
+      },
+    );
+    nbApiCalls += 1;
+
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <CourseRunEnrollment courseRun={courseRun} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const $goToCourseButton = await screen.findByRole('link', { name: 'Go to course' });
+    expect($goToCourseButton).toBeInTheDocument();
+    expect($goToCourseButton).toHaveAttribute('href', joanieEnrollment.course_run.resource_link);
+    expect(screen.getByText('You are enrolled in this course run')).toBeInTheDocument();
+    expect(fetchMock.calls()).toHaveLength(nbApiCalls);
+  });
+
   it('shows an "Unenroll" text and allows the user to unenroll', async () => {
-    const user: User = UserFactory().one();
-    const courseRun: CourseRun = CourseRunFactory().one();
-    courseRun.resource_link = 'https://joanie.endpoint/' + courseRun.id;
-    courseRun.state.priority = 0;
+    const user = UserFactory().one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
     const enrollmentDeferred = new Deferred();
     fetchMock.get(
-      `${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`,
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${courseRun.id}`,
       enrollmentDeferred.promise,
     );
 
@@ -175,14 +217,13 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
   });
 
   it('shows an error message when the enrollment fails', async () => {
-    const user: User = UserFactory().one();
-    const courseRun: CourseRun = CourseRunFactory().one();
-    courseRun.resource_link = 'https://joanie.endpoint/' + courseRun.id;
-    courseRun.state.priority = 0;
+    const user = UserFactory().one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
     const enrollmentDeferred = new Deferred();
     fetchMock.get(
-      `${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`,
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${courseRun.id}`,
       enrollmentDeferred.promise,
     );
 
@@ -207,7 +248,7 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     });
 
     const button = await screen.findByRole('button', { name: 'Enroll now' });
-    fetchMock.post(`${endpoint}/api/v1.0/enrollments/`, 500);
+    fetchMock.post(`${endpoint}/api/v1.0/enrollments/`, HttpStatusCode.INTERNAL_SERVER_ERROR);
     await act(async () => {
       fireEvent.click(button);
     });
@@ -215,14 +256,13 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
   });
 
   it('shows an error message when the unenrollment fails', async () => {
-    const user: User = UserFactory().one();
-    const courseRun: CourseRun = CourseRunFactory().one();
-    courseRun.resource_link = 'https://joanie.endpoint/' + courseRun.id;
-    courseRun.state.priority = 0;
+    const user = UserFactory().one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
     const enrollmentDeferred = new Deferred();
     fetchMock.get(
-      `${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`,
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${courseRun.id}`,
       enrollmentDeferred.promise,
     );
 
@@ -255,7 +295,10 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       });
     });
 
-    fetchMock.put(`${endpoint}/api/v1.0/enrollments/57b35536-5c92-4606-bca3-13aa53d04d07/`, 500);
+    fetchMock.put(
+      `${endpoint}/api/v1.0/enrollments/57b35536-5c92-4606-bca3-13aa53d04d07/`,
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
 
     const unenroll = await screen.findByText('Unenroll from this course');
     await act(async () => {

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.openedx.spec.tsx

@@ -2,7 +2,6 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import fetchMock from 'fetch-mock';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
-
 import { CourseRun } from 'types';
 import { Deferred } from 'utils/test/deferred';
 import {
@@ -14,6 +13,7 @@ import { handle } from 'utils/errors/handle';
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import CourseRunEnrollment from './index';
 
 jest.mock('utils/errors/handle');
@@ -131,7 +131,10 @@ describe('<CourseRunEnrollment />', () => {
     const button = await screen.findByRole('button', { name: 'Enroll now' });
 
     // const enrollmentAction = new Deferred();
-    fetchMock.post(`${endpoint}/api/enrollment/v1/enrollment`, 500);
+    fetchMock.post(
+      `${endpoint}/api/enrollment/v1/enrollment`,
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
 
     await act(async () => {
       expect(() => fireEvent.click(button)).not.toThrow();
@@ -179,7 +182,7 @@ describe('<CourseRunEnrollment />', () => {
 
     // const enrollmentAction = new Deferred();
     fetchMock.post(`${endpoint}/api/enrollment/v1/enrollment`, {
-      status: 400,
+      status: HttpStatusCode.BAD_REQUEST,
       body: { localizedMessage: 'You are not authorized to enroll' },
     });
 
@@ -230,7 +233,9 @@ describe('<CourseRunEnrollment />', () => {
     const courseRun: CourseRun = CourseRunFactory().one();
     courseRun.state.priority = 0;
     courseRun.resource_link = 'https://openedx.endpoint' + courseRun.resource_link;
-    courseRun.starts_in_message = 'The course will start in 3 days';
+    const start = new Date();
+    start.setDate(new Date().getDate() + 3);
+    courseRun.start = start.toISOString();
     courseRun.dashboard_link = 'https://edx.local.dev:8073/dashboard';
 
     const enrollmentsDeferred = new Deferred();
@@ -264,7 +269,7 @@ describe('<CourseRunEnrollment />', () => {
         'https://edx.local.dev:8073/dashboard',
       ),
     );
-    screen.getByText('The course will start in 3 days');
+    screen.getByText('The course starts in 3 days');
   });
 
   it('shows a helpful message if the course run is closed', async () => {