Skip to content

test(grid): optimize scrolling method in full-data-loading and virtual-rolling specs#4162

Open
gimmyhehe wants to merge 1 commit intodevfrom
cgm/optimize-grid-e2e
Open

test(grid): optimize scrolling method in full-data-loading and virtual-rolling specs#4162
gimmyhehe wants to merge 1 commit intodevfrom
cgm/optimize-grid-e2e

Conversation

@gimmyhehe
Copy link
Copy Markdown
Member

@gimmyhehe gimmyhehe commented Apr 1, 2026

PR

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • Tests
    • Improved test reliability for grid component scrolling functionality by refactoring scroll behavior verification.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 1, 2026

Walkthrough

Two Playwright test files were updated to replace mouse wheel-based scrolling with direct programmatic scrolling. The changes introduce a scrollContainer locator and use evaluate to set scrollTop values directly, removing wheel interaction logic and associated hover/click operations.

Changes

Cohort / File(s) Summary
Grid Large-Data Test Updates
examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js, examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js
Replaced mouse wheel scrolling with direct scrollTop manipulation via evaluate. Removed hover/click interactions and wheel delta values, now setting explicit scroll positions (1000 and 6000). Assertions remain unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A scroll-y tale, now clean and bright,
No more wheel-spinning left and right!
Direct paths set the container's way,
Tests run swifter every day! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: optimizing scrolling methods in two grid test files by replacing mouse-wheel scrolling with direct programmatic scrolling.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch cgm/optimize-grid-e2e

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 and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (2)
examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js (2)

13-14: Remove now-redundant hover/click steps around programmatic scroll.

Since scrolling is done via scrollTop, the extra focus interactions are unnecessary and can introduce avoidable flakiness.

♻️ Proposed cleanup
-  await page.locator('.tiny-grid__body-wrapper').hover()
-  await page.locator('.tiny-grid__body-wrapper').click()
   const scrollContainer = page.locator('.tiny-grid__body-wrapper')
   await scrollContainer.evaluate((el) => (el.scrollTop = 1000))
   await expect(page.getByRole('cell', { name: '24' })).toBeVisible()
   await page.waitForTimeout(500)
-  await page.locator('.tiny-grid__body-wrapper').hover()
-  await page.locator('.tiny-grid__body-wrapper').click()

   await scrollContainer.evaluate((el) => (el.scrollTop = 6000))

Also applies to: 20-20

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js` around
lines 13 - 14, The test currently performs unnecessary hover/click/focus
interactions before or after programmatic scrolling using scrollContainer
(page.locator('.tiny-grid__body-wrapper')) and its evaluate((el) =>
(el.scrollTop = 1000)) call; remove those redundant focus/hover/click steps so
the test only performs the programmatic scroll via scrollContainer.evaluate and
then asserts expected state, reducing flakiness (search for any adjacent
.hover(), .click(), or .focus() calls around the scrollContainer.evaluate
invocation and delete them).

13-14: Please verify this spec behavior in both Vue 2 and Vue 3 runs.

This is a view-interaction change in E2E behavior, so it should be confirmed in both runtime variants before merge. Based on learnings: Verify view changes work correctly in both Vue 2 and Vue 3 environments before submitting PR.

Also applies to: 20-20

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js` around
lines 13 - 14, This change alters view scrolling in virtual-rolling.spec.js (the
scrollContainer locator and the await scrollContainer.evaluate((el) =>
(el.scrollTop = 1000)) line) and needs verification in both Vue 2 and Vue 3; run
the E2E spec in both runtime variants (Vue 2 and Vue 3) against the
grid/large-data/virtual-rolling.spec.js scenario, confirm the scroll results and
subsequent assertions behave identically, and if any differences appear either
adjust the interaction (e.g., use page.mouse/wheel or await
scrollContainer.evaluateHandle + ensure layout flush) or add runtime-specific
guards to the spec so it passes reliably in both Vue 2 and Vue 3 environments.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js`:
- Around line 13-14: The test currently performs unnecessary hover/click/focus
interactions before or after programmatic scrolling using scrollContainer
(page.locator('.tiny-grid__body-wrapper')) and its evaluate((el) =>
(el.scrollTop = 1000)) call; remove those redundant focus/hover/click steps so
the test only performs the programmatic scroll via scrollContainer.evaluate and
then asserts expected state, reducing flakiness (search for any adjacent
.hover(), .click(), or .focus() calls around the scrollContainer.evaluate
invocation and delete them).
- Around line 13-14: This change alters view scrolling in
virtual-rolling.spec.js (the scrollContainer locator and the await
scrollContainer.evaluate((el) => (el.scrollTop = 1000)) line) and needs
verification in both Vue 2 and Vue 3; run the E2E spec in both runtime variants
(Vue 2 and Vue 3) against the grid/large-data/virtual-rolling.spec.js scenario,
confirm the scroll results and subsequent assertions behave identically, and if
any differences appear either adjust the interaction (e.g., use page.mouse/wheel
or await scrollContainer.evaluateHandle + ensure layout flush) or add
runtime-specific guards to the spec so it passes reliably in both Vue 2 and Vue
3 environments.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9cdeca23-0e29-4090-95bf-882daa483701

📥 Commits

Reviewing files that changed from the base of the PR and between 6ebac03 and 75e88ea.

📒 Files selected for processing (2)
  • examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
  • examples/sites/demos/pc/app/grid/large-data/virtual-rolling.spec.js

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.

1 participant