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

Toastify в JavaScript предоставляет легкий способ отображения уведомлений с гибкой системой анимаций. Для полноценного тестирования анимаций важно понимать, как именно библиотека управляет переходами и временем появления/исчезновения тостов. Каждое уведомление в Toastify имеет две основные фазы анимации: in (появление) и out (исчезновение). Контроль этих фаз осуществляется через CSS-свойства transition и встроенные методы библиотеки.

Toastify({
    text: "Успешная операция",
    duration: 3000,
    gravity: "top",
    position: "right",
    stopOnFocus: true,
    close: true,
    className: "custom-toast"
}).showToast();

В этом примере duration: 3000 указывает на время отображения тоста. Анимация появления начинается автоматически при вызове showToast(), а исчезновение запускается через указанное время.

Проверка фаз анимации

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

Логическая проверка:

  1. Создание тоста – проверяется через наличие элемента в DOM.
  2. Время жизни тоста – проверяется через задержку, соответствующую параметру duration.
  3. Удаление тоста – элемент должен исчезнуть после завершения времени отображения и анимации.
const toast = Toastify({ text: "Тест анимации", duration: 2000 }).showToast();

setTimeout(() => {
    console.assert(document.body.contains(toast.toastElement) === false, "Тост должен исчезнуть");
}, 2500);

Визуальная проверка анимаций

Для визуальной проверки используют CSS-переходы и классы анимации. Toastify автоматически добавляет классы toastify-in и toastify-out к элементу уведомления, что позволяет применять собственные стили и отслеживать анимацию.

.toastify-in {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s ease-in;
}
.toastify-in.toastify-show {
    opacity: 1;
    transform: translateY(0);
}
.toastify-out {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease-out;
}
.toastify-out.toastify-hide {
    opacity: 0;
    transform: translateY(-20px);
}

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

Инструменты для автоматизированного тестирования

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

  1. Jest с jsdom – проверка DOM-структуры и жизненного цикла элементов.
  2. Cypress или Playwright – интеграционное тестирование визуальной части.
  3. requestAnimationFrame и Performance API – измерение точного времени анимации и её синхронизации.

Пример использования Cypress для проверки появления и исчезновения тоста:

cy.visit("/page-with-toastify");
cy.get("#show-toast-button").click();
cy.get(".toastify").should("be.visible");
cy.wait(3000); // duration тоста
cy.get(".toastify").should("not.exist");

Управление остановкой и перезапуском анимации

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

const toast = Toastify({ text: "Hover test", duration: 3000, stopOnFocus: true }).showToast();
toast.toastElement.dispatchEvent(new Event("mouseover")); // таймер остановлен
toast.toastElement.dispatchEvent(new Event("mouseout"));  // таймер возобновлен

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

Для расширенной визуальной проверки возможно использование кастомных CSS-анимаций через опцию className. При этом важно:

  • Проверять наличие и применение пользовательских классов.
  • Проверять последовательность добавления классов toastify-in и toastify-out.
  • Измерять фактическую длительность анимации и соответствие ей параметра duration.
Toastify({
    text: "Кастомная анимация",
    duration: 2500,
    className: "fade-slide"
}).showToast();
.fade-slide.toastify-in {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.5s ease-in;
}
.fade-slide.toastify-in.toastify-show {
    opacity: 1;
    transform: translateX(0);
}
.fade-slide.toastify-out.toastify-hide {
    opacity: 0;
    transform: translateX(50px);
}

Эта схема позволяет точно тестировать визуальные эффекты, не нарушая внутреннюю логику библиотеки.

Оглавление