Тестирование колбэков

Noty — это легковесная библиотека для создания уведомлений в браузере с поддержкой множества настроек. Одной из ключевых особенностей является возможность задания колбэков — функций, выполняемых при определённых событиях уведомления.

Колбэки позволяют управлять жизненным циклом уведомления: от момента его создания до полного удаления с экрана. Основные события, для которых можно назначать функции:

  • onShow — вызывается в момент отображения уведомления.
  • onClose — вызывается в момент начала закрытия уведомления.
  • onClick — срабатывает при клике на уведомление.
  • afterShow — вызывается после завершения анимации появления.
  • afterClose — вызывается после полной анимации закрытия.

Создание уведомления с колбэками

Простейший пример использования колбэков:

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    timeout: 3000,
    callbacks: {
        onShow: function() {
            console.log('Уведомление показано');
        },
        onClose: function() {
            console.log('Уведомление закрывается');
        }
    }
}).show();

Здесь объект callbacks содержит функции, которые будут вызваны при соответствующих событиях. Обратите внимание, что функции могут быть анонимными или именованными, что полезно для повторного использования.

Последовательность срабатывания колбэков

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

  1. onShow — срабатывает сразу после добавления уведомления в DOM, до начала анимации.
  2. afterShow — срабатывает после окончания анимации появления.
  3. onClose — вызывается при вызове метода close() или автоматическом закрытии.
  4. afterClose — срабатывает после удаления уведомления из DOM.

Тестирование колбэков с использованием таймаутов

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

let logs = [];

new Noty({
    text: 'Тест колбэков',
    type: 'info',
    timeout: 2000,
    callbacks: {
        onShow: function() { logs.push('onShow'); },
        afterShow: function() { logs.push('afterShow'); },
        onClose: function() { logs.push('onClose'); },
        afterClose: function() { logs.push('afterClose'); }
    }
}).show();

setTimeout(() => {
    console.log('События уведомления:', logs);
}, 2500);

В данном примере все события фиксируются в массив logs. Через 2.5 секунды можно проверить, что колбэки срабатывали в правильном порядке.

Использование колбэков для динамических действий

Колбэки позволяют выполнять различные операции, например:

  • Обновление состояния интерфейса при закрытии уведомления.
  • Автоматическое открытие следующего уведомления из очереди.
  • Отправка данных на сервер при клике на уведомление.
new Noty({
    text: 'Нажми на меня',
    type: 'warning',
    callbacks: {
        onClick: function() {
            fetch('/api/notify-click', { method: 'POST' })
                .then(response => console.log('Событие отправлено'))
                .catch(err => console.error(err));
        }
    }
}).show();

Тестирование колбэков с библиотеками для тестирования

При автоматическом тестировании с использованием Jest или Mocha можно проверять вызов функций с помощью шпионов (jest.fn()) или моков:

const onShowM ock = jest.fn();
const onCloseM ock = jest.fn();

const notification = new Noty({
    text: 'Тестирование с Jest',
    callbacks: { onShow: onShowMock, onClose: onCloseMock },
    timeout: 1000
}).show();

setTimeout(() => {
    expect(onShowMock).toHaveBeenCalled();
    expect(onCloseMock).toHaveBeenCalled();
}, 1500);

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

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

Noty поддерживает CSS-анимации для появления и исчезновения уведомлений. Важно учитывать, что:

  • onShow вызывается до начала анимации, а afterShow — после её завершения.
  • onClose срабатывает при старте анимации закрытия, а afterClose — после удаления элемента из DOM.

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

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

  • Для жизненного цикла уведомления лучше использовать afterShow и afterClose, чтобы действия выполнялись после визуального завершения анимации.
  • Для взаимодействия пользователя (например, клик) используйте onClick.
  • Для автоматического тестирования колбэков используйте моки и таймауты, фиксируя порядок вызова функций.
  • При динамическом создании уведомлений можно создавать массовые колбэки, чтобы отслеживать статистику уведомлений на странице.

Такой подход обеспечивает полное покрытие тестов и надёжную работу уведомлений в интерфейсе.

Оглавление