Как тестировать GSAP: пошаговая инструкция с примерами кода

GreenSock Animation Platform (GSAP) — это мощная библиотека для создания высокопроизводительной анимации в JavaScript. Однако, сложные анимационные цепочки и интерактивы могут содержать трудноуловимые баги. Профессиональное тестирование анимаций GSAP необходимо для обеспечения стабильности, предсказуемости и качества пользовательского опыта. Этот гайд проведет вас через ключевые методы тестирования.

Первый и фундаментальный шаг — модульное тестирование (Unit Testing) логики анимации. Хотя GSAP управляет временем и DOM, вы можете тестировать функции, которые создают и конфигурируют твины и таймлайны. Используйте Jest или Vitest в связке с jsdom для симуляции браузерного окружения. Основная идея — изолировать вашу анимационную логику от рендеринга. Протестируйте, корректно ли создается объект твина с ожидаемыми параметрами: целевым свойством, продолжительностью, ease-функцией.

Пример: у вас есть функция, которая создает анимацию появления элемента.
```
import { gsap } from 'gsap';
export function fadeIn(element) {
 return gsap.from(element, {
 opacity: 0,
 duration: 1,
 ease: "power2.out"
 });
}
```
Тест с использованием Jest может выглядеть так:
```
import { fadeIn } from './animations';
import { gsap } from 'gsap';
jest.mock('gsap'); // Мокаем GSAP
test('fadeIn создает твин с правильными параметрами', () => {
 const mockElement = document.createElement('div');
 fadeIn(mockElement);
 expect(gsap.from).toHaveBeenCalledTimes(1);
 expect(gsap.from).toHaveBeenCalledWith(
 mockElement,
 {
 opacity: 0,
 duration: 1,
 ease: "power2.out"
 }
 );
});
```
Здесь мы мокаем (подменяем) библиотеку gsap, чтобы проверить, была ли она вызвана с ожидаемыми аргументами, не запуская реальную анимацию.

Второй критически важный аспект — тестирование на основе времени. Анимации по определению зависят от времени. GSAP предоставляет мощный инструмент для контроля времени в тестах — `gsap.ticker` или метод `.progress()` таймлайна. Вы можете использовать `jest.useFakeTimers()` (или аналоги в других фреймворках) для подмены глобальных таймеров. Однако, более идиоматичный способ — использовать встроенный механизм GSAP.

Протестируем, что после половины длительности анимации значение свойства изменилось соответственно. Для этого можно создать твин, установить его прогресс на 0.5 и проверить вычисленное значение.
```
import { gsap } from 'gsap';
test('tween updates opacity correctly at midpoint', () => {
 const obj = { opacity: 0 };
 const tween = gsap.to(obj, { opacity: 1, duration: 2 });
 tween.progress(0.5); // Устанавливаем прогресс на 50%
 expect(obj.opacity).toBeCloseTo(0.5); // Проверяем промежуточное значение
 tween.kill(); // Важно: убиваем твин после теста
});
```

Третий шаг — интеграционное и E2E-тестирование. Здесь проверяется, как анимация работает в реальном браузере в связке с DOM и пользовательскими событиями. Используйте Cypress, Playwright или Puppeteer. Вы можете делать скриншоты (snapshot testing) в ключевые моменты времени или проверять CSS-свойства элементов. Cypress, например, позволяет управлять временем с помощью `cy.clock()` и `cy.tick()`.

Пример теста на Cypress для проверки интерактивной анимации:
```
describe('GSAP Animation Interaction', () => {
 it('should start animation on button click', () => {
 cy.visit('/page-with-animation');
 cy.clock(); // Замораживаем время
 cy.get('.animated-element').should('have.css', 'opacity', '1'); // Начальное состояние
 cy.get('#start-btn').click();
 cy.tick(500); // Проходит 500мс
 cy.get('.animated-element').should('have.css', 'opacity', '0.5'); // Промежуточное состояние
 cy.tick(1000);
 cy.get('.animated-element').should('have.css', 'opacity', '0'); // Конечное состояние
 });
});
```

Четвертый аспект — тестирование производительности. Особенно важно для сложных анимаций. Используйте `performance.now()` или встроенные DevTools браузера (Performance tab) для замеров частоты кадров (FPS). Напишите тест, который запускает анимацию и проверяет, что FPS не падает ниже допустимого порога (например, 50fps). Это можно автоматизировать с помощью Puppeteer и его API для метрик.

Наконец, не забывайте про тестирование доступности (Accessibility). Убедитесь, что анимации не мешают работе скринридеров и могут быть отключены при предпочтениях пользователя (`prefers-reduced-motion`). Протестируйте, что при установленном медиа-запросе `prefers-reduced-motion: reduce` ваша анимация не запускается или заменяется на мгновенное изменение состояния.

Внедрение Continuous Integration (CI) для тестов анимации гарантирует, что каждое изменение кода будет проверено на корректность анимационной логики и не сломает существующие взаимодействия. Комбинируя модульные тесты для логики, интеграционные для взаимодействия и E2E для визуальной проверки, вы создаете надежный safety net для своих анимаций на GSAP.