Skip to content

Conversation

@ChristopherChudzicki
Copy link
Contributor

@ChristopherChudzicki ChristopherChudzicki commented Dec 10, 2025

What are the relevant tickets?

Description (What does it do?)

Adds enrollment dialog

Screenshots (if appropriate):

Note

No formal mobile designs yet

Screenshot 2025-12-09 at 7 46 55 PM Screenshot 2025-12-09 at 7 47 01 PM Screenshot 2025-12-09 at 7 47 11 PM Screenshot 2025-12-09 at 7 47 17 PM Screenshot 2025-12-10 at 7 46 54 AM Screenshot 2025-12-10 at 7 47 08 AM

How can this be tested?

Prerequisites: MIT Learn and MITxOnline integrated; for example, as described in the README. Additionally, set NEXT_PUBLIC_MITX_ONLINE_LEGACY_BASE_URL=http://mitxonline.odl.local:8065/ in your local frontend env file. When logged into Learn, you should be logged into MITxOnline frontend, too.

Data Setup: Set up data in MITxOnline:

  • a program containing multiple courses
  • at least one course with multiple course runs
    • one run with enrollment_end_date in the past
    • multiple runs with enrollment_end_date unset or in the future
    • at least one course with upgrade_deadline in the future
  • All courses should have associated course pages in wagtail and have include_in_learn_catalog set to true.
  • Run MIT Learn ./manage.py backpopulate_mitxonline_data against your local mitxonline instance.

Feature Flags:

  • enrollment-dashboard set to true in posthog
  • product-page-course set to true in posthog

Testing:

  • Visit course detail page at http://open.odl.local/course/READABLE_ID and program product page at http://open.odl.local/program/READABLE_ID; these pages have an "Enroll for Free" button that should now be functional.
  • Course Page:
    • anonymous user gets signup popover when trying to enroll
    • Even if you are enrolled in the course, the enroll button should open the enrollment dialog
    • you should see a list of available course runs; if no certificate is available, it should be noted
    • enrolling in a course should successfully enroll you ... It should appear on your MIT Learn dashboard if
    • if you click upgrade, it should be added to your cart in legacy MITxOnline site
  • Program Page:
    • anonymous user gets signup popover when trying to enroll
    • If you are already enrolled, the button should say "Enrolled ✔️ ". This is different from course pages
    • If not enrolled, the button should open program enrollment dialog Dialog should allow you to enroll (or upgrade) a particular course in the program. There is no run selection; it just chooses the next run.

@ChristopherChudzicki ChristopherChudzicki changed the title Cc/mitx enrollment WIP enrollment dialog Dec 10, 2025
courseRun(),
)
const nextRunId = overrides.next_run_id ?? faker.helpers.arrayElement(runs).id
const nextRunId = has(overrides, "next_run_id")
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the original version of this factory, it was impossible to specify null next_run_id, even thought that is possible via the api.

}

const enrollment = {
enrollmentsList: () => `${API_BASE_URL}/api/v1/enrollments/`,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We weren't using this; I removed the mock from some tests and they all still passed.

*/
if (isNetworkError || !NO_RETRY_CODES.includes(status)) {
return failureCount < MAX_RETRIES
return failureCount < maxRetries
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We recently switched to using makeBrowserQueryClient in our tests, too.

In tests, we don't want any retries.

@ChristopherChudzicki ChristopherChudzicki changed the title WIP enrollment dialog course/program enrollment dialog Dec 12, 2025
@gumaerc gumaerc self-assigned this Dec 12, 2025
// Check based on the actual enrollment status, not array position
if (course.enrollment?.status === EnrollmentStatus.Enrolled) {
expect(indicator).toHaveTextContent("Enrolled")
expect(indicator).toHaveTextContent(/^Enrolled$/)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As originally written, a bunch of tests in this file passed irrespective of whether the text was "Enrolled" or "Not Enrolled". toHaveTextContent is only an exact match if you use regex to specify start/stop. If you pass a string, it just checks for inclusion.

)?.id,
course: { id: courses[0].id, title: courses[0].title },
},
grades: [], // No grades = enrolled but not completed
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notes:

  • By default, enrollment factory creates a certificate. (We might want to revisit that choice.)
  • Subsequent to fix dashboard card enrollment association and display #2792, the comment grades: [], // No grades = enrolled but not completed is innacurate. The enrollment in this test SHOULD be "Completed" since it has a cert but no grades.

Comment on lines -774 to -775
// Override enrollments for this test
setMockResponse.get(urls.enrollment.enrollmentsList(), enrollments)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On main, this test was not behaving as intended.

  • if you remove all enrollments and unset this mock, it still passes
  • The enrollments were not being matched to the org because enrollment-level b2b props were missing
  • The assertions still passed for aforementioned reason, namely toHaveTextContent("Enrolled") was matching "Not Enrolled".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants