fix: Flaky JS test: ProgramAsCoursePage 'Enroll CTA posts program enrollment' times out on Loading button - #3672
Conversation
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
There was a problem hiding this comment.
Pull request overview
This PR addresses a flaky frontend test in the Next.js main workspace where the “Start Learning” enroll CTA can remain in a transient “Loading” accessible state long enough to exceed Testing Library’s default async timeout under CI load.
Changes:
- Adds a dedicated
ENROLL_STATUS_TIMEOUTconstant to give enrollment-status-driven UI more time to settle in tests. - Updates three
screen.findAllByRole("button", { name: "Start Learning" })calls to use the extended timeout, reducing timing-related failures.
…ollment' times out on Loading button
gumaerc
left a comment
There was a problem hiding this comment.
👍 This looks good and solves the problem by adding extra timeout, which is fine. You may want to update the PR description before merging, it looks like there's some stale comments in there?
Also pinned show_stay_updated: true in the "Shows Stay Updated button" test —
the factory now emits a random value, making that assertion ~50% flaky (matches
the CoursePage/ProgramPage updates).
| }) | ||
| const makePage = factories.pages.programPageItem | ||
|
|
||
| // The enroll button renders with aria-label="Loading" (and no "Start Learning" |
There was a problem hiding this comment.
This comment could be made more concise, all that really needs to be said is that enrollment tests take more time and we need to wait for them.
efae35a to
c28f039
Compare
What are the relevant tickets?
https://github.com/mitodl/hq/issues/12456
Problem
Enroll CTA posts program enrollmentintermittently failed in CI withUnable to find role="button" and name "Start Learning"— the button was stillin its loading state (
aria-label="Loading"). Re-running passed: a timing flake.Root cause
The "Start Learning" button is gated by
isStatusLoading, which staystrueuntil the program-enrollment status query (
GET /api/v3/program_enrollments/)resolves — until then the button has no "Start Learning" name.
findAllByRoleonly retries for Testing Library's default ~1s, so under CI load the query
sometimes hadn't resolved in time.
Fix
Added a shared
ENROLL_STATUS_TIMEOUTconstant and passed it as thewaitFortimeout on the three
findAllByRole("Start Learning")call sites, so they retryuntil the button leaves its loading state. No overhead on the fast path.
Also pinned
show_stay_updated: truein the "Shows Stay Updated button" test —the factory now emits a random value, making that assertion ~50% flaky (matches
the
CoursePage/ProgramPageupdates).Testing
Reproduced the flake locally (delayed status query) and confirmed the fix;
all
ProgramAsCoursePage.test.tsxtests pass.