Skip to content

Leaderboard scroll when thumb on meida#2123

Merged
simo6529 merged 2 commits intomainfrom
leaderboard-scroll-when-thumb-on-meida
Mar 16, 2026
Merged

Leaderboard scroll when thumb on meida#2123
simo6529 merged 2 commits intomainfrom
leaderboard-scroll-when-thumb-on-meida

Conversation

@simo6529
Copy link
Copy Markdown
Collaborator

@simo6529 simo6529 commented Mar 16, 2026

Summary by CodeRabbit

Release Notes

  • Tests

    • Refactored and enhanced test suite for wave leaderboard gallery items with improved mock implementations and assertions.
  • Bug Fixes

    • Improved touch gesture handling on gallery items to support vertical panning on touch devices.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 16, 2026

📝 Walkthrough

Walkthrough

This PR refactors the test file for WaveLeaderboardGalleryItem with updated mock implementations and consistent string formatting, while modifying the touch interaction CSS class from tw-touch-none to tw-touch-pan-y on the media container in the component.

Changes

Cohort / File(s) Summary
Test Refactoring
__tests__/components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.test.tsx
Updated mock implementations for MediaDisplay, WaveLeaderboardGalleryItemVotes, WinnerDropBadge, VotingModal, and VotingModalButton; added centralized mocks for isMobileScreen and useDropInteractionRules; replaced single quotes with double quotes; updated test assertions to match new mock attributes and modal states.
Touch Interaction CSS
components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
Changed touch utility class from tw-touch-none to tw-touch-pan-y on the image container to enable vertical pan gestures.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

  • #2120: Directly addresses the touch/scroll behavior change when interacting with media in the gallery item component.

Possibly related PRs

  • #2065: Modifies touch interaction classNames in the same WaveLeaderboardGalleryItem component.
  • #1859: Adjusts touch-related CSS behavior and conditional logic in the same component file.

Suggested reviewers

  • prxt6529

Poem

🐰 A touch of grace upon the scroll,
Pan vertically, that is the goal,
No longer frozen, the thumb can glide,
Through gallery wonders, side by side!

🚥 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 refers to enabling scroll when thumb is on media, which directly relates to the main change: replacing tw-touch-none with tw-touch-pan-y to enable vertical pan gestures on the image container.
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 (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch leaderboard-scroll-when-thumb-on-meida
📝 Coding Plan
  • Generate coding plan for human review comments

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.

@sonarqubecloud
Copy link
Copy Markdown

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.

Actionable comments posted: 1

🧹 Nitpick comments (1)
__tests__/components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.test.tsx (1)

68-77: artFocused assertion currently has low signal.

This check can pass even if artFocused behavior regresses. Consider asserting a directly toggled output (e.g., container lacking tw-group, or votes variant becoming default).

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

In
`@__tests__/components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.test.tsx`
around lines 68 - 77, The test for WaveLeaderboardGalleryItem's artFocused prop
is weak; update the assertion to verify a directly toggled output instead of
just absence of "active:tw-bg-iron-900". Render WaveLeaderboardGalleryItem with
artFocused={false} and assert a concrete change such as the root element not
having the "tw-group" class (or that the child votes element reflects the
"default" variant) so the test fails if artFocused behavior regresses; locate
the component by its rendered container/firstChild and check the class or the
votes variant output from WaveLeaderboardGalleryItem.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@__tests__/components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.test.tsx`:
- Around line 47-58: The test uses fireEvent.keyDown which doesn't trigger
native button activation; update the "handles click and keyboard events" test
for WaveLeaderboardGalleryItem to focus the main button (mainButton) and replace
fireEvent.keyDown(mainButton, { key: "Enter" }) with a userEvent.keyboard call
(e.g., focus the element and call userEvent.keyboard("{Enter}")), then assert
onDropClick (the jest mock) was called again; remove the fireEvent.keyDown usage
and ensure you use userEvent to simulate the Enter key after focusing the
button.

---

Nitpick comments:
In
`@__tests__/components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.test.tsx`:
- Around line 68-77: The test for WaveLeaderboardGalleryItem's artFocused prop
is weak; update the assertion to verify a directly toggled output instead of
just absence of "active:tw-bg-iron-900". Render WaveLeaderboardGalleryItem with
artFocused={false} and assert a concrete change such as the root element not
having the "tw-group" class (or that the child votes element reflects the
"default" variant) so the test fails if artFocused behavior regresses; locate
the component by its rendered container/firstChild and check the class or the
votes variant output from WaveLeaderboardGalleryItem.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1d034920-a9a1-41f1-b489-0ebb65a4b845

📥 Commits

Reviewing files that changed from the base of the PR and between 155142a and e1515db.

📒 Files selected for processing (2)
  • __tests__/components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.test.tsx
  • components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx

@simo6529 simo6529 merged commit 076526d into main Mar 16, 2026
7 checks passed
@simo6529 simo6529 deleted the leaderboard-scroll-when-thumb-on-meida branch March 16, 2026 13:49
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.

2 participants