fix CTA text logic (#2675)

* fix CTA text logic

* add a test that checks for view course cta text when end date is in the past and course is not completed

Author: gumaerc

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx

@@ -176,17 +176,23 @@ describe.each([
 
   test.each([
     {
-      course: pastDashboardCourse(),
+      course: pastDashboardCourse({
+        enrollment: { status: EnrollmentStatus.Enrolled },
+      }),
       expected: { labelPrefix: "View" },
       case: "past",
     },
     {
-      course: currentDashboardCourse(),
+      course: currentDashboardCourse({
+        enrollment: { status: EnrollmentStatus.Enrolled },
+      }),
       expected: { labelPrefix: "Continue" },
       case: "current",
     },
     {
-      course: futureDashboardCourse(),
+      course: futureDashboardCourse({
+        enrollment: { status: EnrollmentStatus.Enrolled },
+      }),
       expected: { labelPrefix: "Continue" },
       label: "future",
     },
@@ -515,12 +521,12 @@ describe.each([
   )
 
   test.each([
-    { status: EnrollmentStatus.Completed },
-    { status: EnrollmentStatus.Enrolled },
-    { status: EnrollmentStatus.NotEnrolled },
+    { status: EnrollmentStatus.Completed, expectedText: "View Course" },
+    { status: EnrollmentStatus.Enrolled, expectedText: "Continue Course" },
+    { status: EnrollmentStatus.NotEnrolled, expectedText: "Start Course" },
   ])(
-    "CoursewareButton switches to Enroll functionality when enrollment status is not enrolled or undefined",
-    ({ status }) => {
+    "CoursewareButton shows correct text based on enrollment status ($status)",
+    ({ status, expectedText }) => {
       setupUserApis()
       const course = dashboardCourse()
       course.enrollment = {
@@ -534,18 +540,31 @@ describe.each([
       const card = getCard()
       const coursewareButton = within(card).getByTestId("courseware-button")
 
-      if (
-        status === EnrollmentStatus.NotEnrolled ||
-        status === undefined ||
-        !course.enrollment
-      ) {
-        expect(coursewareButton).toHaveTextContent("Start Course")
-      } else {
-        expect(coursewareButton).toHaveTextContent("Continue Course")
-      }
+      expect(coursewareButton).toHaveTextContent(expectedText)
     },
   )
 
+  test("CoursewareButton shows 'View Course' when course has ended even if not completed", () => {
+    setupUserApis()
+    const course = dashboardCourse({
+      run: {
+        startDate: faker.date.past().toISOString(),
+        endDate: faker.date.past().toISOString(), // Course has ended
+      },
+      enrollment: {
+        status: EnrollmentStatus.Enrolled, // User is enrolled but not completed
+        mode: EnrollmentMode.Audit,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="marketing" dashboardResource={course} />,
+    )
+    const card = getCard()
+    const coursewareButton = within(card).getByTestId("courseware-button")
+
+    expect(coursewareButton).toHaveTextContent("View Course")
+  })
+
   const setupEnrollmentApis = (opts: {
     user: ReturnType<typeof mitxUser>
     course: ReturnType<typeof dashboardCourse>

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx

@@ -170,8 +170,10 @@ const getCoursewareText = ({
   if (!enrollmentStatus || enrollmentStatus === EnrollmentStatus.NotEnrolled) {
     return `Start ${courseNoun}`
   }
-  if (!endDate) return `Continue ${courseNoun}`
-  if (isInPast(endDate)) {
+  if (
+    (endDate && isInPast(endDate)) ||
+    enrollmentStatus === EnrollmentStatus.Completed
+  ) {
     return `View ${courseNoun}`
   }
   return `Continue ${courseNoun}`