d5b079d452
- Moves expensive DOM checks (`closest`) and class toggling from `mousemove` loop to `mouseover` handler. - Removes `document.elementFromPoint` fallback to eliminate layout thrashing. - Updates tests to verify performance improvements. - Fixes `Hero.test.tsx` missing jsdom environment.
108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
// @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('does not call elementFromPoint on mousemove', () => {
|
|
// Reset elementFromPoint mock
|
|
const mockElementFromPoint = vi.fn();
|
|
// @ts-ignore
|
|
document.elementFromPoint = mockElementFromPoint;
|
|
|
|
render(<FancyCursor />);
|
|
|
|
// Trigger mousemove
|
|
fireEvent.mouseMove(window, { clientX: 10, clientY: 10 });
|
|
|
|
act(() => {
|
|
vi.runAllTimers();
|
|
});
|
|
|
|
// Should NOT be called in the optimized version
|
|
expect(mockElementFromPoint).not.toHaveBeenCalled();
|
|
});
|
|
});
|