|
1 | 1 | import { render, screen, fireEvent } from '@testing-library/react'; |
2 | 2 | import '@testing-library/jest-dom/vitest'; |
3 | | -import { describe, expect, it, vi } from 'vitest'; |
| 3 | +import { describe, expect, it, vi, beforeEach } from 'vitest'; |
| 4 | +import gsap from 'gsap'; |
4 | 5 | import { DiscordButton } from './DiscordButton'; |
5 | 6 | // Mock framer-motion |
6 | 7 | vi.mock('framer-motion', () => ({ |
@@ -58,3 +59,53 @@ describe('DiscordButton', () => { |
58 | 59 | expect(link).toHaveAttribute('target', '_blank'); |
59 | 60 | }); |
60 | 61 | }); |
| 62 | + |
| 63 | +describe('DiscordButton mouse interactivity', () => { |
| 64 | + beforeEach(() => { |
| 65 | + vi.clearAllMocks(); |
| 66 | + }); |
| 67 | + |
| 68 | + it('sets hover state on mouse enter', () => { |
| 69 | + render(<DiscordButton />); |
| 70 | + |
| 71 | + const link = screen.getByRole('link'); |
| 72 | + |
| 73 | + fireEvent.mouseEnter(link); |
| 74 | + |
| 75 | + expect(link).toBeInTheDocument(); |
| 76 | + }); |
| 77 | + |
| 78 | + it('triggers gsap animation on mouse move while hovered', () => { |
| 79 | + render(<DiscordButton />); |
| 80 | + |
| 81 | + const link = screen.getByRole('link'); |
| 82 | + |
| 83 | + fireEvent.mouseEnter(link); |
| 84 | + |
| 85 | + fireEvent.mouseMove(link, { |
| 86 | + clientX: 100, |
| 87 | + clientY: 50, |
| 88 | + }); |
| 89 | + |
| 90 | + expect(gsap.to).toHaveBeenCalled(); |
| 91 | + }); |
| 92 | + |
| 93 | + it('resets gsap transforms on mouse leave', () => { |
| 94 | + render(<DiscordButton />); |
| 95 | + |
| 96 | + const link = screen.getByRole('link'); |
| 97 | + |
| 98 | + fireEvent.mouseEnter(link); |
| 99 | + fireEvent.mouseLeave(link); |
| 100 | + |
| 101 | + expect(gsap.to).toHaveBeenCalledWith( |
| 102 | + expect.anything(), |
| 103 | + expect.objectContaining({ |
| 104 | + x: 0, |
| 105 | + y: 0, |
| 106 | + rotationX: 0, |
| 107 | + rotationY: 0, |
| 108 | + }) |
| 109 | + ); |
| 110 | + }); |
| 111 | +}); |
0 commit comments