test: verify Interactive Tooltips, Cursor Hovers & Touch Event Propagation (Variation 5) #7086#7406
Conversation
|
@BikramMondal5 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
Adds a dedicated Vitest + Testing Library suite to validate hover-driven visual states and basic pointer/touch event bubbling for the TopMetricsRow dashboard component, aligning with the goal of increasing isolated UI interactivity coverage.
Changes:
- Introduces
TopMetricsRow.mouse-interactivity.test.tsxwith 5 interaction-focused test cases. - Mocks
framer-motionto map hover callbacks onto standard DOM mouse events and to surfacewhileHoverconfiguration for assertions. - Verifies hover class transitions, hover-only glow overlays, mouseleave cleanup, and click/touch propagation.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Get the first card (Total PRs) | ||
| const card = screen.getByText('Total PRs').closest('div')?.parentElement; | ||
| expect(card).toBeInTheDocument(); |
| // Find the card container | ||
| const card = screen.getByText('Total PRs').closest('div')?.parentElement; | ||
| expect(card).toBeInTheDocument(); |
|
|
||
| const card = screen.getByText('Total PRs').closest('div')?.parentElement; | ||
| expect(card).toBeInTheDocument(); | ||
|
|
|
|
||
| const card = screen.getByText('Total PRs').closest('div')?.parentElement; | ||
| expect(card).toBeInTheDocument(); | ||
|
|
| const { container } = render( | ||
| <div onClick={clickSpy} onTouchStart={clickSpy}> | ||
| <TopMetricsRow data={mockData} /> | ||
| </div> | ||
| ); | ||
|
|
||
| const firstCardTitle = screen.getByText('Total PRs'); | ||
| const firstCardValue = screen.getByText('120'); | ||
|
|
||
| // Simulate click on title element and check propagation | ||
| fireEvent.click(firstCardTitle); | ||
| expect(clickSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| // Simulate touchStart on value element and check propagation | ||
| fireEvent.touchStart(firstCardValue); | ||
| expect(clickSpy).toHaveBeenCalledTimes(2); | ||
|
|
||
| // Click SVG icon inside metric card to check propagation | ||
| const icon = container.querySelector('svg'); | ||
| expect(icon).toBeInTheDocument(); | ||
| fireEvent.click(icon!); | ||
| expect(clickSpy).toHaveBeenCalledTimes(3); |
| it('triggers hover state (mouseenter) on a metric card and updates transition classes', () => { | ||
| render(<TopMetricsRow data={mockData} />); | ||
|
|
📦 Next.js Bundle Size Report (Gzipped Sizes)✨ No significant bundle size changes detected. 📊 Summary of Totals
|
Aamod007
added
mentor:Aamod007
level:beginner
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
Hey! Thanks for adding these interactive tooltip and hover tests. Ensuring that mouse and touch events propagate properly via Vitest is a great way to guarantee our UI behaves perfectly on all devices.
I'm assigning level:beginner, type:testing, and quality:clean.
Looks good to me, so I'm approving!
JhaSourav07
added
the
gssoc:approved
|
🎉 Congratulations @BikramMondal5! Your PR has been successfully merged. 🚀 Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.
Keep building! 💻✨ |
|
Thanks for the approval and merged! Happy to contribute. |
Description
Fixes #7086
Pillar
Visual Preview
NA (this PR adds unit and integration test coverage for
TopMetricsRow).Checklist before requesting a review:
CONTRIBUTING.mdfile.npx vitest run components/dashboard/PRInsights/TopMetricsRow.mouse-interactivity.test.tsx).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).test(PRInsights): add mouse interactivity tests for TopMetricsRow).README.mdif I added a new theme or URL parameter. (Not applicable)