Тестирование анимаций

Для работы с Tippy.js необходимо подключить саму библиотеку и стили. Обычно подключение происходит через npm или CDN:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

Базовая инициализация тултипа выглядит так:

tippy('#button', {
  content: 'Пример подсказки',
});

На этом этапе подсказка появляется при наведении на элемент с идентификатором button. Для тестирования анимаций важен параметр animation, который управляет эффектом появления и скрытия.

Встроенные анимации

Tippy.js предоставляет несколько стандартных анимаций:

fade – плавное появление и исчезновение с изменением прозрачности.
scale – масштабирование от центра.
shift-away – смещение подсказки от точки привязки при появлении.
shift-toward – смещение подсказки к точке привязки при появлении.

Пример использования встроенной анимации:

tippy('#button', {
  content: 'Анимация fade',
  animation: 'fade',
});

Ключевой момент: анимация управляется CSS-классами, которые автоматически применяются к тултипу.

Настройка длительности анимации

Свойство duration определяет время выполнения анимации в миллисекундах. Оно может быть задано как одно число или массив [show, hide] для отдельного управления появлением и скрытием:

tippy('#button', {
  content: 'Длительная анимация',
  animation: 'scale',
  duration: [500, 200], // show 500ms, hide 200ms
});

Такой подход позволяет детально тестировать различные сценарии появления и исчезновения.

Кастомные анимации с CSS

Tippy.js поддерживает кастомные анимации через подключение CSS и указание класса в параметре animation:

tippy('#button', {
  content: 'Кастомная анимация',
  animation: 'my-custom',
});

.tippy-box[data-animation='my-custom'][data-state='hidden'] {
  opacity: 0;
  transform: translateY(-20px);
}

.tippy-box[data-animation='my-custom'][data-state='visible'] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease, transform 300ms ease;
}

Использование кастомных анимаций позволяет создавать уникальные эффекты, отличающиеся от стандартных.

Тестирование последовательностей анимаций

Для проверки плавности и корректности анимаций важно тестировать последовательное открытие и закрытие подсказок. Tippy.js предоставляет события:

onShow – перед отображением тултипа.
onShown – после завершения появления.
onHide – перед скрытием.
onHidden – после скрытия.

Пример логирования для отладки:

tippy('#button', {
  content: 'Логирование анимаций',
  animation: 'shift-away',
  onShow(instance) {
    console.log('Начало появления', instance);
  },
  onShown(instance) {
    console.log('Появление завершено', instance);
  },
  onHide(instance) {
    console.log('Начало скрытия', instance);
  },
  onHidden(instance) {
    console.log('Скрытие завершено', instance);
  },
});

Это позволяет фиксировать задержки и проверять синхронизацию анимаций.

Тестирование динамических изменений контента

Анимация может выглядеть иначе в зависимости от длины и размера контента. Для динамического контента:

const instance = tippy('#button', {
  content: 'Изначальный текст',
  animation: 'scale',
});

setTimeout(() => {
  instance.setContent('Обновлённый контент с большим количеством текста для тестирования анимации');
  instance.show();
}, 2000);

Важно наблюдать, как тултип реагирует на изменение размера, чтобы убедиться в корректной анимации.

Автоматизация тестирования анимаций

Для комплексного тестирования используют:

Скрипты с Selenium или Puppeteer – имитируют наведение и клики, проверяя последовательность анимаций.
Визуальные тесты с Percy или Storybook – фиксируют визуальные состояния тултипов для сравнения изменений.
Временные задержки и логи – отслеживают, что анимация полностью завершается до выполнения следующих действий.

Пример автоматизации с Puppeteer:

await page.hover('#button');
await page.waitForTimeout(500); // ожидаем завершения анимации
const screenshot = await page.screenshot();