test(ContributorsLoading-mouse-interactivity): verify Interactive Tooltips, Cursor Hovers & Touch Event Propagation (Variation 5) #2847

[alishaalmeida10]

Description

Fixes #2847

This PR adds a dedicated interaction test suite containing 5 targeted cases for the ContributorsLoading layout module. It ensures seamless coordinate mapping, responsive tooltip rendering, and safe touch events.

What was done:

• Designed 5 isolated integration assertions inside app/contributors/loading.mouse-interactivity.test.tsx using Vitest.
• Simulates precise mouseenter operations to trigger local layout tooltip tracking arrays.
• Implements custom mousemove triggers to verify reactive cursor client state coordinate recalculations (clientX/clientY).
• Validates that pointer state visibility helper classes properly append during cursor intersections.
• Assesses touch mechanics safely across element containment boundaries via touchStart and touchEnd.
• Ensures overlay assets correctly tear down during active mouseleave events.

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕒 Pillar 3 — Timezone Logic Optimization
• 🚀 Other (Bug fix, refactoring, docs, testing)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings/linter errors
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Visual Preview

All 5 required interaction states, cursor alignments, and coordinate boundaries compile and pass effortlessly within local environments.

[vercel]

@alishaalmeida10 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Aamod007]

Hi there! 👋 Thanks for working on these interactivity tests! I noticed a small issue: the tests in ThemeSwitch.mouse-interactivity.test.tsx and loading.mouse-interactivity.test.tsx are currently rendering and testing mock components (MockThemeSwitch and MockContributorsLoading) defined right inside the test files, rather than the actual ThemeSwitch and ContributorsLoading components from the codebase.

To ensure the tests are verifying the real application behavior, could you update the test files to import and test the actual components instead of the mocks? Let me know if you need any help adjusting the tests for the real components!

[alishaalmeida10]

Hi @Aamod007, thanks for the feedback! That makes total sense, testing the actual components definitely makes more sense than using mocks. I'm swapping them out right now for both files and I'll update the PRs as soon as they're ready. Will let you know if I get stuck anywhere. Thanks!

[Aamod007]

LGTM on the code side! However, the CI checks are failing. Please fix the CI issues so this can be merged.

[alishaalmeida10]

Just updated this, used real component instead of a fake mock. Also the CI pipeline passed everything now.