Skip to content

fix(test): replace raw DOM .click() with userEvent in ComponentMode tests - #3817

Merged
lhein merged 1 commit into
KaotoIO:mainfrom
lhein:fix/issue-3816-flaky-component-mode-tests
Aug 28, 2026
Merged

fix(test): replace raw DOM .click() with userEvent in ComponentMode tests#3817
lhein merged 1 commit into
KaotoIO:mainfrom
lhein:fix/issue-3816-flaky-component-mode-tests

Conversation

@lhein

@lhein lhein commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Summary

Replace all raw element.click() calls (wrapped in await act()) with @testing-library/user-event's await user.click() in ComponentMode.test.tsx.

Root Cause

PatternFly's ToggleGroupItem does not use a native onClick handler — it uses an onChange callback triggered through an internal event chain. When element.click() is used directly, JSDOM's event propagation is not deterministic enough; depending on Vitest worker timing, the internal PF event chain may not have completed by the time act() resolves. This causes the spy to record 0 calls intermittently.

Fix

userEvent.click() simulates the full browser event sequence (pointerdownmousedownpointerupmouseupclick) and internally awaits all pending React state updates, making the tests deterministic.

Additionally removed two unnecessary await act(async () => { await Promise.resolve(); }) flush workarounds that are no longer needed with userEvent.

Fixes #3816

Summary by CodeRabbit

  • Tests
    • Improved interaction test coverage and reliability for component mode controls.
    • Updated tests to use realistic user interactions while preserving existing expected behavior.

@coderabbitai

coderabbitai Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9ae380b0-16a5-4c36-a56b-cebf63074531

📥 Commits

Reviewing files that changed from the base of the PR and between d968f13 and 53f3b31.

📒 Files selected for processing (1)
  • packages/ui/src/components/ComponentMode/ComponentMode.test.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

The ComponentMode tests replace raw DOM .click() calls and explicit act wrappers with awaited userEvent clicks. Existing model-update and source-code assertions remain unchanged.

Changes

ComponentMode interaction test stabilization

Layer / File(s) Summary
Migrate ComponentMode clicks to userEvent
packages/ui/src/components/ComponentMode/ComponentMode.test.tsx
The tests import userEvent, create user instances, and await clicks for mode-change and source-update scenarios. Existing assertions remain in place.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 53f3b

This localized test-only change replaces raw clicks with awaited user interactions to reduce flaky ComponentMode tests; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: pvinaches

Poem

A rabbit clicks with careful paws,
Awaiting every state and cause.
No raw hops through JSDOM’s night,
Each model update lands just right.
The tests now thump with steady cheer.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the test fix: replacing raw DOM click calls with userEvent in ComponentMode tests.
Linked Issues check ✅ Passed The changes satisfy issue #3816 by replacing raw DOM clicks and act wrappers with userEvent interactions, removing unnecessary act workarounds, and preserving the existing assertions.
Out of Scope Changes check ✅ Passed The pull request changes only ComponentMode tests and keeps all modifications focused on deterministic userEvent-based click handling.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@lhein
lhein force-pushed the fix/issue-3816-flaky-component-mode-tests branch from 53f3b31 to 35420fb Compare August 28, 2026 16:15
@sonarqubecloud

Copy link
Copy Markdown

@PVinaches PVinaches left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM

@lhein
lhein merged commit 87be627 into KaotoIO:main Aug 28, 2026
21 of 22 checks passed
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.

fix(test): ComponentMode tests are flaky due to raw DOM .click() on PatternFly ToggleGroupItem

2 participants