richie 2.25.0b2.dev69__py2.py3-none-any.whl → 2.25.0b2.dev71__py2.py3-none-any.whl

frontend/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/hooks/useCourseRunPeriodMessage.ts

@@ -0,0 +1,76 @@
+import { defineMessages, useIntl } from 'react-intl';
+import useDateRelative from 'hooks/useDateRelative';
+import { Priority } from 'types';
+import { CourseRun } from 'types/Joanie';
+import useDateFormat, { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+
+const messages = defineMessages({
+  onGoingRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.onGoingRunPeriod',
+    description: 'Text to display when a course run is on going.',
+    defaultMessage: 'This session started on {startDate} and will end on {endDate}',
+  },
+  futureRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.futureRunPeriod',
+    description: 'Text to display the period of a future course run.',
+    defaultMessage: 'This session starts {relativeStartDate}, the {startDate}',
+  },
+  onGoingEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.onGoingEnrolledRunPeriod',
+    description: 'Text to display when a course run is ongoing and the user is enrolled to.',
+    defaultMessage: "You are enrolled for this session. It's open from {startDate} to {endDate}",
+  },
+  futureEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.futureEnrolledRunPeriod',
+    description: 'Text to display when a course run is not yet opened and the user is enrolled to.',
+    defaultMessage:
+      'You are enrolled for this session. It starts {relativeStartDate}, the {startDate}.',
+  },
+  archivedEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.archivedEnrolledRunPeriod',
+    description: 'Text to display when a course run is archived and the user is enrolled to.',
+    defaultMessage: 'You are enrolled for this session.',
+  },
+});
+
+const useCourseRunPeriodMessage = (courseRun: CourseRun, enrolled: boolean = false) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
+
+  const relativeStartDate = useDateRelative(new Date(courseRun.start));
+  const startDate = formatDate(courseRun.start, DEFAULT_DATE_FORMAT);
+  const endDate = formatDate(courseRun.end, DEFAULT_DATE_FORMAT);
+  const isArchived = [Priority.ARCHIVED_CLOSED, Priority.ARCHIVED_OPEN].includes(
+    courseRun.state.priority,
+  );
+  const isOnGoing = [Priority.ONGOING_OPEN, Priority.ONGOING_CLOSED].includes(
+    courseRun.state.priority,
+  );
+  if (enrolled) {
+    if (isArchived) {
+      return intl.formatMessage(messages.archivedEnrolledRunPeriod);
+    }
+    if (isOnGoing) {
+      return intl.formatMessage(messages.onGoingEnrolledRunPeriod, {
+        startDate,
+        endDate,
+      });
+    }
+    return intl.formatMessage(messages.futureEnrolledRunPeriod, {
+      relativeStartDate,
+      startDate,
+    });
+  }
+  if (isOnGoing) {
+    return intl.formatMessage(messages.onGoingRunPeriod, {
+      startDate,
+      endDate,
+    });
+  }
+  return intl.formatMessage(messages.futureRunPeriod, {
+    relativeStartDate,
+    startDate,
+  });
+};
+
+export default useCourseRunPeriodMessage;

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

@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, createIntl } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
+import { Priority } from 'types';
+import { CourseRun, Enrollment } from 'types/Joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
+import { noop } from 'utils';
+import { computeState } from 'utils/CourseRuns';
+import { formatRelativeDate } from 'utils/relativeDate';
+import { DashboardItemCourseEnrollingRun, Enrolled } from '.';
+
+/**
+ * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
+ * 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',
+      priority: Priority.ONGOING_OPEN,
+      priorityLabel: 'ONGOING_OPEN',
+      expectButton: true,
+      expectLabelTemplate:
+        "You are enrolled for this session. It's open from %fromDate% to %toDate%",
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_OPEN,
+      priorityLabel: 'FUTURE_OPEN',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_OPEN,
+      priorityLabel: 'ARCHIVED_OPEN',
+      expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session.`,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_NOT_YET_OPEN,
+      priorityLabel: 'FUTURE_NOT_YET_OPEN',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_CLOSED,
+      priorityLabel: 'FUTURE_CLOSED',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_CLOSED,
+      priorityLabel: 'ONGOING_CLOSED',
+      expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session. It's open from %fromDate% to %toDate%`,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_CLOSED,
+      priorityLabel: 'ARCHIVED_CLOSED',
+      expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session.`,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.TO_BE_SCHEDULED,
+      priorityLabel: 'TO_BE_SCHEDULED',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+  ])(
+    'handles enrollments with priority=$priorityLabel $buttonTestLabel',
+    async ({ priority, expectButton, expectLabelTemplate }) => {
+      const enrollment: Enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state.priority = priority;
+      render(<Enrolled enrollment={enrollment} />, { wrapper });
+      const intl = createIntl({ locale: 'en' });
+
+      const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+        new Date(enrollment.course_run.start),
+      );
+      const fromRelativeDate = formatRelativeDate(
+        new Date(enrollment.course_run.start),
+        new Date(),
+        intl.locale,
+      );
+      const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+        new Date(enrollment.course_run.end),
+      );
+
+      const expectLabel = expectLabelTemplate
+        .replace('%fromRelativeDate%', fromRelativeDate)
+        .replace('%fromDate%', fromDate)
+        .replace('%toDate%', toDate);
+      expect(await screen.findByText(expectLabel)).toBeInTheDocument();
+      if (expectButton) {
+        const link = screen.getByRole('link', { name: 'Access to course' });
+        expect(link).toBeEnabled();
+        expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
+      } else {
+        expect(screen.queryByRole('link', { name: 'Access to course' })).toBeNull();
+      }
+    },
+  );
+});
+
+describe('<DashboardItemCourseEnrollingRun/>', () => {
+  it.each([
+    [Priority.ONGOING_OPEN, false],
+    [Priority.FUTURE_OPEN, false],
+    [Priority.ARCHIVED_OPEN, false],
+    [Priority.FUTURE_NOT_YET_OPEN, true],
+    [Priority.FUTURE_CLOSED, false],
+    [Priority.ONGOING_CLOSED, false],
+    [Priority.ARCHIVED_CLOSED, false],
+    [Priority.TO_BE_SCHEDULED, false],
+  ])(
+    `handles correctly enrollment_start date displaying with priority=%s`,
+    async (priority, expectEnrollmentNotYetOpened) => {
+      const order = CredentialOrderFactory().one();
+      const courseRun = CourseRunFactoryFromPriority(priority)().one();
+      courseRun.state = computeState(courseRun);
+      const joanieCourseRun = courseRun as unknown as CourseRun;
+      joanieCourseRun.course = order.course;
+
+      render(
+        <IntlProvider locale="en">
+          <DashboardItemCourseEnrollingRun
+            order={order}
+            courseRun={joanieCourseRun}
+            selected={false}
+            enroll={noop}
+          />
+        </IntlProvider>,
+      );
+
+      if (expectEnrollmentNotYetOpened) {
+        screen.getByText(/Enrollment will open on/);
+      } else {
+        expect(screen.queryByText(/Enrollment will open on/)).not.toBeInTheDocument();
+      }
+    },
+  );
+});

frontend/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { faker } from '@faker-js/faker';
+import { TargetCourseFactory } from 'utils/test/factories/joanie';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { Priority } from 'types';
+import { enrollment } from '../stories.mock';
+import { DashboardItemCourseEnrolling } from '.';
+
+export default {
+  component: DashboardItemCourseEnrolling,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  render: (args) =>
+    StorybookHelper.wrapInApp(
+      <RouterProvider
+        router={createMemoryRouter([
+          {
+            index: true,
+            element: (
+              <div className="dashboard-item__block__footer">
+                <DashboardItemCourseEnrolling {...args} />
+              </div>
+            ),
+          },
+        ])}
+      />,
+    ),
+} as Meta<typeof DashboardItemCourseEnrolling>;
+
+type Story = StoryObj<typeof DashboardItemCourseEnrolling>;
+
+// Readonly
+
+export const ReadonlyEnrolledOpened: Story = {
+  args: {
+    course: TargetCourseFactory().one(),
+    activeEnrollment: {
+      ...enrollment,
+      course_run: {
+        ...enrollment.course_run,
+        end: faker.date.future({ years: 1 }).toISOString(),
+        state: { ...enrollment.course_run.state, priority: Priority.FUTURE_NOT_YET_OPEN },
+      },
+    },
+  },
+};
+
+export const ReadonlyEnrolledClosed: Story = {
+  args: {
+    course: TargetCourseFactory().one(),
+    activeEnrollment: {
+      ...enrollment,
+      course_run: {
+        ...enrollment.course_run,
+        end: faker.date.past({ years: 1 }).toISOString(),
+        state: { ...enrollment.course_run.state, priority: Priority.FUTURE_CLOSED },
+      },
+    },
+  },
+};
+
+export const ReadonlyNotEnrolled: Story = {
+  args: {
+    course: TargetCourseFactory().one(),
+  },
+};

frontend/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.tsx

@@ -0,0 +1,348 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useMemo } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { CoursesHelper } from 'utils/CoursesHelper';
+import { Priority } from 'types';
+import {
+  AbstractCourse,
+  CertificateOrder,
+  CourseRun,
+  CredentialOrder,
+  Enrollment,
+  Product,
+} from 'types/Joanie';
+import { Spinner } from 'components/Spinner';
+import Banner, { BannerType } from 'components/Banner';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import useDateFormat from 'hooks/useDateFormat';
+import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
+import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
+import { useEnroll } from 'widgets/Dashboard/hooks/useEnroll';
+import useCourseRunPeriodMessage from './hooks/useCourseRunPeriodMessage';
+
+const messages = defineMessages({
+  notEnrolled: {
+    id: 'components.DashboardItemEnrollment.notEnrolled',
+    description: 'Text shown on a read-only not-enrolled target course',
+    defaultMessage: 'You are not enrolled in this course',
+  },
+  enrollCourse: {
+    id: 'components.DashboardItemEnrollment.enrollCourse',
+    description:
+      'Button shown on a read-only not-enrolled target course that redirects to the details view',
+    defaultMessage: 'Enroll',
+  },
+  statusNotActive: {
+    id: 'components.DashboardItemEnrollment.statusNotActive',
+    description: 'Text shown when a course run is not active',
+    defaultMessage: 'Not enrolled',
+  },
+  accessCourse: {
+    id: 'components.DashboardItemEnrollment.gotoCourse',
+    description: 'Button to access course when the user is enrolled',
+    defaultMessage: 'Access to course',
+  },
+  enrolled: {
+    id: 'components.DashboardItemEnrollment.enrolled',
+    description: 'Text shown when user is enrolled in a course run',
+    defaultMessage: 'Enrolled',
+  },
+  enrollRun: {
+    id: 'components.DashboardItemEnrollment.enrollRun',
+    description: 'Button to enroll in a course run',
+    defaultMessage: 'Enroll',
+  },
+  enrollmentNotYetOpened: {
+    defaultMessage: 'Enrollment will open on {enrollment_start}',
+    description: 'Disclaimer that informs the user that enrollment is not yet opened',
+    id: 'components.DashboardItemCourseEnrollingRun.enrollmentNotYetOpened',
+  },
+  noCourseRunAvailable: {
+    defaultMessage: 'No session available for this course.',
+    description: 'Text displayed when no course runs are opened for the course',
+    id: 'components.DashboardItemCourseEnrollingRun.noCourseRunAvailable',
+  },
+  courseRunsLoading: {
+    defaultMessage: 'Loading course runs...',
+    description: 'Text displayed when course runs list is loading',
+    id: 'components.DashboardItemCourseEnrollingRun.courseRunsLoading',
+  },
+  contractUnsigned: {
+    id: 'components.DashboardItemCourseEnrollingRun.contractUnsigned',
+    description: 'Message displayed as disabled button title when a contract needs to be signed.',
+    defaultMessage: 'You have to sign the training contract before enrolling to your course.',
+  },
+});
+
+interface DashboardItemCourseEnrollingProps {
+  // how does it work ?!!
+  // course should be a code from api serializer
+  course: AbstractCourse;
+  activeEnrollment?: Enrollment;
+  order?: CredentialOrder;
+  product?: Product;
+  writable: boolean;
+  hideEnrollButtons?: boolean;
+  icon?: boolean;
+  notEnrolledUrl?: string;
+}
+
+export const DashboardItemCourseEnrolling = ({
+  course,
+  activeEnrollment,
+  writable,
+  order,
+  product,
+  icon = false,
+  notEnrolledUrl = '#',
+  hideEnrollButtons,
+}: DashboardItemCourseEnrollingProps) => {
+  if (writable && !order) {
+    throw new Error('Order is required when writable is true');
+  }
+  return (
+    <div data-testid={'dashboard-item__course-enrolling__' + course.code}>
+      {!writable && (
+        <div className="dashboard-item__course-enrolling__infos">
+          {activeEnrollment ? (
+            <Enrolled icon={icon} enrollment={activeEnrollment} />
+          ) : (
+            <NotEnrolled
+              icon={icon}
+              notEnrolledUrl={notEnrolledUrl}
+              hideEnrollButtons={hideEnrollButtons}
+            />
+          )}
+        </div>
+      )}
+      {writable && order && (
+        <DashboardItemCourseEnrollingRuns
+          course={course}
+          enrollments={CoursesHelper.findCourseEnrollmentsInOrder(course, order)}
+          order={order}
+          product={product}
+        />
+      )}
+    </div>
+  );
+};
+
+interface DashboardItemCourseEnrollingRunsProps {
+  course: AbstractCourse;
+  enrollments: Enrollment[];
+  order?: CredentialOrder;
+  product?: Product;
+}
+
+const DashboardItemCourseEnrollingRuns = ({
+  course,
+  enrollments,
+  order,
+  product,
+}: DashboardItemCourseEnrollingRunsProps) => {
+  const { enroll, isLoading, error } = useEnroll(enrollments, order);
+
+  // Hide runs with finished enrollment.
+  const courseRunOpenForEnrollmentList = useMemo(() => {
+    const activeEnrollment = CoursesHelper.findActiveEnrollment(course, enrollments);
+    return course.course_runs
+      .map((courseRun) => ({
+        courseRun,
+        selected: activeEnrollment?.course_run.id === courseRun.id,
+      }))
+      .filter(
+        // FIXME(rlecellier): question!
+        // does that mean the we hide the enrollment when user cannot enroll?
+        // even if he's already enrolled ?
+        (data) => data.selected || data.courseRun.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
+      );
+  }, [course, enrollments]);
+
+  // Filter by priority
+  return (
+    <div className="dashboard-item__course-enrolling__runs">
+      {error && <Banner message={error} type={BannerType.ERROR} />}
+      {courseRunOpenForEnrollmentList.length === 0 && (
+        <div className="dashboard-item__course-enrolling__no-runs">
+          <Icon name={IconTypeEnum.WARNING} size="small" />
+          <FormattedMessage {...messages.noCourseRunAvailable} />
+        </div>
+      )}
+      {courseRunOpenForEnrollmentList.map((data) => (
+        <DashboardItemCourseEnrollingRun
+          key={data.courseRun.id}
+          courseRun={data.courseRun}
+          selected={data.selected}
+          enroll={() => enroll(data.courseRun)}
+          order={order}
+          product={product}
+        />
+      ))}
+      {isLoading && (
+        <div
+          className="dashboard-item__course-enrolling__loading"
+          data-testid="dashboard-item__course-enrolling__loading"
+        >
+          <Spinner aria-labelledby="enrolling-loading" size="large">
+            <span id="enrolling-loading">
+              <FormattedMessage {...messages.courseRunsLoading} />
+            </span>
+          </Spinner>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface DashboardItemCourseEnrollingRunProps {
+  courseRun: CourseRun;
+  selected: boolean;
+  enroll: () => void;
+  order?: CredentialOrder | CertificateOrder;
+  product?: Product;
+}
+
+export const DashboardItemCourseEnrollingRun = ({
+  courseRun,
+  selected,
+  enroll,
+  order,
+  product,
+}: DashboardItemCourseEnrollingRunProps) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
+  const courseRunPeriodMessage = useCourseRunPeriodMessage(courseRun, selected);
+  const haveToSignContract = order ? orderNeedsSignature(order, product) : false;
+  const isOpenedForEnrollment = useMemo(
+    () => courseRun.state.priority < Priority.FUTURE_NOT_YET_OPEN,
+    [courseRun],
+  );
+
+  return (
+    <div
+      className="dashboard-item__course-enrolling__run"
+      data-testid={'dashboard-item__course-enrolling__run__' + courseRun.id}
+    >
+      <div>
+        <div>
+          <p className="dashboard-item__course-enrolling__run_title">
+            {selected && (
+              <Icon
+                className="dashboard-item__course-enrolling__run__icon-enrolled"
+                name={IconTypeEnum.CHECK}
+              />
+            )}
+            <strong>{courseRun.title}</strong>
+          </p>
+          {courseRunPeriodMessage}
+        </div>
+        {courseRun.state.priority === Priority.FUTURE_NOT_YET_OPEN && (
+          <div className="dashboard-item__course-enrolling__run__not-opened">
+            -{' '}
+            <FormattedMessage
+              {...messages.enrollmentNotYetOpened}
+              values={{ enrollment_start: formatDate(courseRun.enrollment_start) }}
+            />
+          </div>
+        )}
+      </div>
+      {selected ? (
+        SHOW_ACCESS_COURSE_PRIORITIES.includes(courseRun.state.priority) && (
+          <div>
+            <Button
+              color="secondary"
+              size="small"
+              href={courseRun.resource_link}
+              data-testid="dashboard-item-enrollment__button"
+              className="dashboard-item__button"
+            >
+              <FormattedMessage {...messages.accessCourse} />
+            </Button>
+          </div>
+        )
+      ) : (
+        <div>
+          <Button
+            disabled={!isOpenedForEnrollment || haveToSignContract}
+            color="tertiary"
+            size="small"
+            onClick={enroll}
+            title={haveToSignContract ? intl.formatMessage(messages.contractUnsigned) : ''}
+          >
+            <FormattedMessage {...messages.enrollRun} />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NotEnrolled = ({
+  icon,
+  notEnrolledUrl,
+  hideEnrollButtons,
+}: {
+  icon: boolean;
+  notEnrolledUrl: string;
+  hideEnrollButtons?: boolean;
+}) => {
+  return (
+    <>
+      <div className="dashboard-item__block__status">
+        {icon && <Icon name={IconTypeEnum.SCHOOL} />}
+        <FormattedMessage {...messages.notEnrolled} />
+      </div>
+      {!hideEnrollButtons && (
+        <RouterButton
+          color="secondary"
+          size="small"
+          href={notEnrolledUrl}
+          data-testid="dashboard-item-enrollment__button"
+          className="dashboard-item__button"
+        >
+          <FormattedMessage {...messages.enrollCourse} />
+        </RouterButton>
+      )}
+    </>
+  );
+};
+
+export const SHOW_ACCESS_COURSE_PRIORITIES = [
+  Priority.ONGOING_OPEN,
+  Priority.ARCHIVED_OPEN,
+  Priority.ONGOING_CLOSED,
+  Priority.ARCHIVED_CLOSED,
+];
+
+export const Enrolled = ({
+  icon = false,
+  enrollment,
+}: {
+  icon?: boolean;
+  enrollment: Enrollment;
+}) => {
+  const courseRunPeriodMessage = useCourseRunPeriodMessage(enrollment.course_run, true);
+  return (
+    <>
+      <div className="dashboard-item__block__status">
+        {icon && <Icon name={IconTypeEnum.SCHOOL} />}
+        {enrollment.is_active ? (
+          courseRunPeriodMessage
+        ) : (
+          <FormattedMessage {...messages.statusNotActive} />
+        )}
+      </div>
+      {SHOW_ACCESS_COURSE_PRIORITIES.includes(enrollment.course_run.state.priority) && (
+        <Button
+          color="secondary"
+          size="small"
+          href={enrollment.course_run.resource_link}
+          data-testid="dashboard-item-enrollment__button"
+          className="dashboard-item__button"
+        >
+          <FormattedMessage {...messages.accessCourse} />
+        </Button>
+      )}
+    </>
+  );
+};

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

@@ -51,16 +51,13 @@ describe('<DashboardItemEnrollment/>', () => {
     expect(link).toBeEnabled();
     expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
 
-    screen.getByText(
-      'You are enrolled for the session from ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.start),
-        ) +
-        ' to ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.end),
-        ),
+    const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(enrollment.course_run.start),
     );
+    const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(enrollment.course_run.end),
+    );
+    screen.getByText(`You are enrolled for this session. It's open from ${fromDate} to ${toDate}`);
   });
 
   it('renders a closed enrollment', () => {
@@ -80,16 +77,7 @@ describe('<DashboardItemEnrollment/>', () => {
     const link = screen.getByRole('link', { name: 'Access to course' });
     expect(link).toBeEnabled();
     expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
-    screen.getByText(
-      'You are enrolled for the session from ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.start),
-        ) +
-        ' to ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.end),
-        ),
-    );
+    expect(screen.getByText(/You are enrolled for this session./)).toBeInTheDocument();
   });
 
   it('renders an inactive enrollment', () => {