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

[alishaalmeida10]

Description

Fixes #2837

This PR introduces a robust suite of 5 target unit tests for the ThemeSwitch interaction layout to ensure precise mouse tracking, pointer state validation, and custom touch event propagation.

What was done:

• Deleted the mismatched loading layout placeholder test to maintain repository structure integrity.
• Built 5 isolated assertions under native Vitest parameters targeting interactive cursor boundaries.
• Simulates custom mouseenter and mousemove actions to validate real-time coordinate tooltip rendering.
• Asserts appropriate cursor style class transformations (cursor-pointer) trigger on active hover fields.
• Evaluates mobile touch interaction robustness using explicit synthetic touchStart and touchEnd events.
• Guarantees clean state teardowns on component mouseleave resets.

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, computed coordinate calculations, and element touch sweeps compile cleanly and pass local environments seamlessly.

[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.

Dismissing to re-review

[Aamod007]

Hi there! 👋 Thanks for your PR. Similar to another recent test PR, I noticed that heme-switch.mouse-interactivity.test.tsx creates and tests a mock component (MockThemeSwitch) directly inside the test file instead of importing the actual ThemeSwitch component from the application.

To ensure we're properly verifying the application's actual behavior, could you update the test to import and test the real component instead of the mock? Let me know if you need any pointers on how to do this!

[alishaalmeida10]

Hi @Aamod007, thanks for the feedback.. That makes total sense, of testing actual components 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.