Unit-тестирование компонентов с AOS

Библиотека AOS (Animate on Scroll) позволяет добавлять анимацию элементов при прокрутке страницы. Для полноценного unit-тестирования компонентов с AOS необходимо понимать, что библиотека взаимодействует с DOM напрямую, добавляя атрибуты data-aos и классы анимации, а также отслеживает события прокрутки для запуска анимации.

Ключевые моменты при тестировании:

  • Инициализация: AOS.init() запускает отслеживание DOM и регистрирует обработчики событий scroll и resize.
  • Атрибуты элементов: элементы с анимацией содержат data-aos="animation-name" и опциональные data-aos-delay, data-aos-duration.
  • Классы состояния: AOS добавляет классы .aos-animate после срабатывания анимации, что важно для проверки корректности поведения компонента.

Подготовка компонентов к тестированию

Для unit-тестирования компонентов, использующих AOS, рекомендуется:

  1. Изоляция DOM Каждый тест должен иметь собственный контейнер DOM, чтобы избежать влияния глобального состояния AOS:

    beforeEach(() => {
    document.body.innerHTML = `<div id="test-container"></div>`;
});

  2. Создание тестового элемента с AOS

    const element = document.createElement('div');
element.setAttribute('data-aos', 'fade-up');
document.getElementById('test-container').appendChild(element);

  3. Инициализация AOS в тестах При каждом тесте важно вызывать AOS.init() после добавления элементов в DOM:

    AOS.init({
    disable: true // отключение реальной анимации для ускорения тестов
});

Тестирование и проверки

Проверка наличия атрибутов

Первый уровень тестирования — убедиться, что элемент имеет правильные атрибуты:

expect(element.getAttribute('data-aos')).toBe('fade-up');
expect(element.getAttribute('data-aos-delay')).toBeNull();

Проверка добавления классов анимации

AOS добавляет классы .aos-animate после выполнения анимации. Для unit-тестов можно вызвать вручную метод AOS.refresh() или имитировать событие scroll:

AOS.refresh(); // пересчитывает позиции элементов

// имитация появления элемента в зоне видимости
element.classList.add('aos-init'); 
element.classList.add('aos-animate');

expect(element.classList.contains('aos-animate')).toBe(true);

Тестирование с разными опциями AOS

  • duration — длительность анимации, проверяется через атрибут:

    element.setAttribute('data-aos-duration', '1200');
AOS.init();
expect(element.getAttribute('data-aos-duration')).toBe('1200');

  • delay — задержка перед запуском:

    element.setAttribute('data-aos-delay', '500');
expect(element.getAttribute('data-aos-delay')).toBe('500');

  • offset — смещение для запуска анимации: проверяется через конфигурацию и пересчёт позиций в AOS.refresh().

Мокирование событий и времени

Для unit-тестирования полезно использовать мокирование событий scroll и таймеров, чтобы не ждать реальной анимации:

jest.useFakeTimers();

// имитация прокрутки
window.dispatchEvent(new Event('scroll'));

// продвигаем таймеры вперед
jest.advanceTimersByTime(1000);

expect(element.classList.contains('aos-animate')).toBe(true);

Такой подход позволяет проверять поведение компонентов с анимацией без реального визуального отображения.

Интеграция с тестовыми библиотеками

При использовании Jest, Vitest или Testing Library стоит учитывать:

  • Инициализация AOS должна происходить после рендера компонента.
  • Для React-компонентов полезно использовать useEffect с вызовом AOS.init() внутри, а в тестах можно замокать AOS:
jest.mock('aos', () => ({
    init: jest.fn(),
    refresh: jest.fn()
}));
  • Проверка добавления классов через селекторы:
const animatedElement = screen.getByTestId('animated');
expect(animatedElement).toHaveClass('aos-animate');

Отдельные сценарии тестирования

  1. Компоненты с динамическим контентом Элементы, которые появляются после рендера, требуют повторного вызова AOS.refresh().

  2. Компоненты с разными эффектами анимации Для каждого data-aos нужно убедиться, что атрибут корректно применяется и класс aos-animate добавляется.

  3. Тестирование с отключенной анимацией AOS.init({ disable: true }) полезно для ускорения тестов без визуальной анимации.

Практические рекомендации

  • Использовать отдельный контейнер DOM для каждого теста.
  • Вызывать AOS.init() и AOS.refresh() после изменения DOM.
  • Мокировать таймеры и события прокрутки для ускорения тестирования.
  • Проверять как атрибуты data-aos, так и классы .aos-animate.
  • Для динамического контента использовать AOS.refresh() после добавления элементов.

Эти подходы обеспечивают надёжное unit-тестирование компонентов с анимациями на основе AOS, позволяя проверять корректность работы анимаций и интеграцию с DOM без визуального рендеринга.

Оглавление