Add mouse interactivity and touch event tests for ProfileOptimizerModal

[atul-upadhyay-7]

Description

The ProfileOptimizerModal component in components/dashboard/ProfileOptimizerModal.tsx had no mouse-interactivity or touch-event test coverage. Interactive elements like the close button, copy/download actions, and modal backdrop lacked validation for hover states, click propagation, touch gestures, and cursor styling, creating risk of regressions in UX behavior.

No test file existed at components/dashboard/ProfileOptimizerModal.mouse-interactivity.test.tsx. The component uses framer-motion animations, hover-based styling (e.g., hover:bg-gray-100, group-hover), and handles click/touch events — none of which had automated coverage.

Fixes #2687

Pillar

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

Visual Preview

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

What changed

• Created components/dashboard/ProfileOptimizerModal.mouse-interactivity.test.tsx with 5 test cases:
  • mouseenter/hover: Simulated mouse enter on the close button and verified interactive node remains in the DOM
  • Tooltip coordinates: Verified the close buttons accessible text serves as a tooltip-equivalent label
  • Click/touch propagation: Fired click and touchStart events on the close button and confirmed the onClose callback fires and the element persists
  • Cursor style classes: Asserted the close button renders as a <button> with the expected hover style classes
  • Mouseleave overlay: Simulated mouseEnter then mouseLeave on the close button and confirmed the element stays in the document

How to verify

git fetch origin
git checkout test/profile-optimizer-modal-mouse-interactivity
npm run test -- components/dashboard/ProfileOptimizerModal.mouse-interactivity.test.tsx

All 5 tests should pass.

[github-actions]

👋 Hey @atul-upadhyay-7, it looks like you didn't use our PR template!

The section ## Description is missing from your PR description.

Please update your PR description to include all required sections so we can review this properly:

• ## Description — What does this PR do? Which issue does it fix?
• ## Pillar — Which contribution pillar does this fall under?
• ## Checklist — Have you ticked off the quality checklist?

You can find the full template in CONTRIBUTING.md. Just edit your PR description and the needs-details label will be removed automatically. 🙌

[atul-upadhyay-7]

@Aamod007 could you review this

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a new test suite intended to exercise mouse/hover/touch interactions for ProfileOptimizerModal, including mocks for framer-motion and lucide-react to simplify rendering in tests.

Changes:

• Added ProfileOptimizerModal.mouse-interactivity.test.tsx with several interaction-focused test cases.
• Introduced framer-motion and lucide-react mocks to avoid animation/SVG complexity during tests.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Aamod007]

LGTM! Interactive tests are well covered.