Fixing date to display if you're logged in (#1979)

mitodl · Nov 3, 2023 · ff5f351 · ff5f351
1 parent 16c276e
commit ff5f351
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 26 deletions.
diff --git a/frontend/public/src/components/CourseInfoBox.js b/frontend/public/src/components/CourseInfoBox.js
@@ -30,12 +30,6 @@ const getStartDateText = (run: BaseCourseRun, isArchived: boolean = false) => {
     : "Start Anytime"
 }
 
-const getStartDateForRun = (run: BaseCourseRun) => {
-  return run && !emptyOrNil(run.start_date) && !run.is_self_paced
-    ? formatPrettyDate(moment(new Date(run.start_date)))
-    : "Start Anytime"
-}
-
 export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProps> {
   state = {
     showMoreEnrollDates: false
@@ -50,13 +44,6 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
     this.props.toggleUpgradeDialogVisibility()
   }
 
-  renderUnenrolledDateLink(run: EnrollmentFlaggedCourseRun) {
-    const { currentUser } = this.props
-
-    return !currentUser || !currentUser.id ? (
-      <>{getStartDateForRun(run)}</>
-    ) : null
-  }
   renderEnrolledDateLink(run: EnrollmentFlaggedCourseRun) {
     return (
       <button className="more-dates-link enrolled">
@@ -97,7 +84,7 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
                     enrollment.run.id === courseRun.id
                 ))
                 ? this.renderEnrolledDateLink(courseRun)
-                : this.renderUnenrolledDateLink(courseRun)}
+                : getStartDateText(courseRun)}
             </li>
           )
         }

diff --git a/frontend/public/src/components/CourseProductDetailEnroll_test.js b/frontend/public/src/components/CourseProductDetailEnroll_test.js
@@ -26,7 +26,7 @@ import {
 import * as courseApi from "../lib/courseApi"
 
 import sinon from "sinon"
-import { makeUser } from "../factories/user"
+import { makeUser, makeAnonymousUser } from "../factories/user"
 
 describe("CourseProductDetailEnroll", () => {
   let helper,
@@ -526,4 +526,98 @@ describe("CourseProductDetailEnroll", () => {
       }
     })
   })
+  ;[
+    [true, false],
+    [false, false],
+    [true, true],
+    [true, true]
+  ].forEach(([userExists, hasMoreDates]) => {
+    it(`renders the CourseInfoBox if the user ${
+      userExists ? "is logged in" : "is anonymous"
+    }`, async () => {
+      const entities = {
+        currentUser: userExists ? currentUser : makeAnonymousUser(),
+        enrollments: []
+      }
+
+      const { inner } = await renderPage({
+        entities: entities
+      })
+
+      assert.isTrue(inner.exists())
+      const infobox = inner.find("CourseInfoBox").dive()
+      assert.isTrue(infobox.exists())
+    })
+
+    it(`CourseInfoBox ${
+      hasMoreDates ? "renders" : "does not render"
+    } the date selector when the user ${
+      userExists ? "is logged in" : "is anonymous"
+    } and there is ${
+      hasMoreDates ? ">1 courserun" : "one courserun"
+    }`, async () => {
+      const courseRuns = [courseRun]
+
+      if (hasMoreDates) {
+        courseRuns.push(makeCourseRunDetail())
+      }
+
+      const entities = {
+        currentUser: userExists ? currentUser : makeAnonymousUser(),
+        enrollments: [],
+        courseRuns:  courseRuns
+      }
+
+      const { inner } = await renderPage({
+        entities: entities
+      })
+
+      assert.isTrue(inner.exists())
+      const infobox = inner.find("CourseInfoBox").dive()
+      assert.isTrue(infobox.exists())
+
+      const moreDatesLink = infobox.find("button.more-enrollment-info").first()
+
+      if (!hasMoreDates) {
+        assert.isFalse(moreDatesLink.exists())
+      } else {
+        assert.isTrue(moreDatesLink.exists())
+        await moreDatesLink.prop("onClick")()
+
+        const selectorBar = infobox.find(".more-dates-enrollment-list")
+        assert.isTrue(selectorBar.exists())
+      }
+    })
+  })
+
+  it("CourseInfoBox renders a date selector with Enrolled text if the user is enrolled in one", async () => {
+    const secondCourseRun = makeCourseRunDetail()
+    const enrollment = {
+      ...makeCourseRunEnrollment(),
+      run: secondCourseRun
+    }
+
+    const entities = {
+      currentUser: currentUser,
+      enrollments: [enrollment],
+      courseRuns:  [courseRun, secondCourseRun]
+    }
+
+    const { inner } = await renderPage({
+      entities: entities
+    })
+
+    assert.isTrue(inner.exists())
+    const infobox = inner.find("CourseInfoBox").dive()
+    assert.isTrue(infobox.exists())
+
+    const moreDatesLink = infobox.find("button.more-enrollment-info").first()
+    await moreDatesLink.prop("onClick")()
+
+    const selectorBar = infobox.find(".more-dates-enrollment-list")
+    assert.isTrue(selectorBar.exists())
+
+    const enrolledItem = infobox.find(".more-dates-link.enrolled")
+    assert.isTrue(enrolledItem.exists())
+  })
 })
diff --git a/frontend/public/src/factories/course.js b/frontend/public/src/factories/course.js
@@ -24,6 +24,7 @@ import type {
   LearnerRecordProgram,
   LearnerRecordShare
 } from "../flow/courseTypes"
+import { CoursePage } from "../flow/cmsTypes"
 
 const genCourseRunId = incrementer()
 const genEnrollmentId = incrementer()
@@ -34,6 +35,17 @@ const genProgramId = incrementer()
 const genPartnerSchoolId = incrementer()
 const genProgramRequirementId = incrementer()
 
+export const makeCoursePage = (): CoursePage => ({
+  financial_assistance_form_url: casual.url,
+  feature_image_src:             casual.url,
+  live:                          true,
+  description:                   casual.text,
+  current_price:                 casual.integer(),
+  instructors:                   [],
+  length:                        casual.text,
+  effort:                        casual.text
+})
+
 export const makeCourseRun = (): CourseRun => ({
   title:            casual.text,
   start_date:       casual.moment.add(2, "M").format(),
@@ -95,16 +107,7 @@ const makeCourseDetail = (): CourseDetail => ({
   feature_image_src: casual.url,
   departments:       [makeDepartment()],
   live:              true,
-  page:              {
-    financial_assistance_form_url: casual.url,
-    feature_image_src:             casual.url,
-    live:                          true,
-    description:                   casual.text,
-    current_price:                 casual.integer(),
-    instructors:                   [],
-    length:                        casual.text,
-    effort:                        casual.text
-  }
+  page:              makeCoursePage()
 })
 
 const makeRequirementRootNode = (
@@ -221,7 +224,7 @@ const makeDEDPSampleRequirementsTree = (
 
 export const makeCourseDetailWithRuns = (): CourseDetailWithRuns => {
   return {
-    ...makeCourseRun(),
+    ...makeCourseDetail(),
     courseruns: [makeCourseRun()]
   }
 }