Optimize FancyCursor by replacing elementFromPoint with event delegation

src/components/layout/FancyCursor.test.tsx

@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+import { render, fireEvent, act } from '@testing-library/react';
+import { FancyCursor } from './FancyCursor';
+import { describe, it, expect, vi, beforeAll, afterAll, beforeEach } from 'vitest';
+import React from 'react';
+
+describe('FancyCursor', () => {
+    beforeAll(() => {
+        // Mock elementFromPoint for JSDOM
+        // @ts-ignore
+        document.elementFromPoint = vi.fn((x, y) => null);
+
+        // Mock requestAnimationFrame
+        vi.useFakeTimers();
+    });
+
+    afterAll(() => {
+        vi.useRealTimers();
+        // @ts-ignore
+        delete document.elementFromPoint;
+    });
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+
+        // Ensure we are not seen as a touch device
+        Object.defineProperty(navigator, 'maxTouchPoints', { value: 0, writable: true });
+        // @ts-ignore
+        delete window.ontouchstart;
+        // console.log('Test Setup:', { ontouchstart: 'ontouchstart' in window, maxTouchPoints: navigator.maxTouchPoints });
+    });
+
+    it('renders and updates position on mousemove', () => {
+        const { container } = render(<FancyCursor />);
+        // Using firstElementChild because querySelector seems flaky in this test environment
+        const cursor = container.firstElementChild as HTMLElement;
+        expect(cursor).toBeTruthy();
+        expect(cursor.id).toBe('fancy-cursor');
+
+        fireEvent.mouseMove(window, { clientX: 100, clientY: 100 });
+
+        act(() => {
+            vi.runAllTimers();
+        });
+
+        // Check transform
+        expect(cursor.style.transform).toContain('translate3d(100px, 100px, 0)');
+    });
+
+    it('toggles link-hover class when hovering a link', () => {
+        // We need to attach the link to the document body because FancyCursor uses global event listeners
+        // and checks the document structure via events or elementFromPoint.
+        const link = document.createElement('a');
+        link.href = '#';
+        link.id = 'test-link';
+        link.textContent = 'Link';
+        document.body.appendChild(link);
+
+        const { container } = render(<FancyCursor />);
+        const cursor = container.firstElementChild as HTMLElement;
+        expect(cursor).toBeTruthy();
+
+        // Simulate mouse over the link.
+        // Important: in our optimized code, we rely on 'mouseover' event to set 'hoveredElement'.
+        fireEvent.mouseOver(link);
+
+        // Then mouseMove triggers the update loop
+        fireEvent.mouseMove(window, { clientX: 50, clientY: 50 });
+
+        act(() => {
+            vi.runAllTimers();
+        });
+
+        expect(cursor.classList.contains('link-hover')).toBe(true);
+
+        // Move away to body
+        fireEvent.mouseOver(document.body);
+        fireEvent.mouseMove(window, { clientX: 200, clientY: 200 });
+
+        act(() => {
+            vi.runAllTimers();
+        });
+
+        expect(cursor.classList.contains('link-hover')).toBe(false);
+
+        document.body.removeChild(link);
+    });
+
+    it('uses fallback elementFromPoint if hoveredElement is null', () => {
+        // Reset elementFromPoint mock
+        const mockElementFromPoint = vi.fn();
+        // @ts-ignore
+        document.elementFromPoint = mockElementFromPoint;
+
+        // We need to remount to reset internal state if any.
+        // However, 'hoveredElement' variable was defined INSIDE the component in my edit.
+        // Let's double check that.
+
+        render(<FancyCursor />);
+
+        // Trigger mousemove WITHOUT prior mouseover.
+        // This should trigger the fallback.
+        fireEvent.mouseMove(window, { clientX: 10, clientY: 10 });
+
+        act(() => {
+            vi.runAllTimers();
+        });
+
+        expect(mockElementFromPoint).toHaveBeenCalledWith(10, 10);
+    });
+});