Тестирование уведомлений

Для корректного тестирования уведомлений необходимо сначала подключить библиотеку. В HTML-документе это делается с помощью <link> для стилей и <script> для скрипта:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После подключения iziToast готов к использованию. Для тестирования можно создать базовую функцию отображения уведомления:

function testNotification() {
    iziToast.show({
        title: 'Тест',
        message: 'Это тестовое уведомление',
        position: 'topRight'
    });
}

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

Настройка параметров уведомлений для тестирования

iziToast предоставляет множество параметров, влияющих на отображение и поведение уведомлений. Основные для тестирования:

  • title — заголовок уведомления.
  • message — основное сообщение.
  • timeout — время отображения в миллисекундах. Для тестирования удобно использовать короткое время (например, 2000 мс).
  • position — положение на экране: topRight, topLeft, bottomRight, bottomLeft, center.
  • color — цветовая схема уведомления.
  • icon — иконка уведомления.
  • pauseOnHover — при true уведомление приостанавливается при наведении мыши.

Пример теста с разными параметрами:

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно сохранены',
    timeout: 3000,
    position: 'topRight',
    pauseOnHover: true
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка при сохранении',
    timeout: 5000,
    position: 'topLeft',
    color: 'red'
});

Автоматическое тестирование уведомлений

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

function automatedTest() {
    const types = ['success', 'info', 'warning', 'error'];
    types.forEach((type, index) => {
        setTimeout(() => {
            iziToast[type]({
                title: type.charAt(0).toUpperCase() + type.slice(1),
                message: 'Автоматическое тестовое уведомление',
                position: 'topRight'
            });
        }, index * 1000);
    });
}

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

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

iziToast поддерживает события: onOpening, onOpened, onClosing, onClosed. Проверка этих событий критична для сложных сценариев, когда уведомления влияют на логику интерфейса.

iziToast.info({
    title: 'События',
    message: 'Проверка колбеков',
    onOpening: function() { console.log('Уведомление открывается'); },
    onOpened: function() { console.log('Уведомление открыто'); },
    onClosing: function() { console.log('Уведомление закрывается'); },
    onClosed: function() { console.log('Уведомление закрыто'); }
});

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

Тестирование адаптивности и разных устройств

Для полноценного тестирования необходимо проверить:

  • Отображение уведомлений на мобильных и десктопных разрешениях.
  • Правильность позиционирования при изменении размеров окна.
  • Корректность работы при использовании touch-событий вместо мыши.

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

iziToast.show({
    title: 'Мобильный тест',
    message: 'Проверка адаптивного поведения',
    position: window.innerWidth < 768 ? 'bottomCenter' : 'topRight'
});

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

Проверка стилей и кастомизации

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

iziToast.show({
    title: 'Кастомный стиль',
    message: 'Проверка пользовательского CSS',
    class: 'custom-toast',
    position: 'topRight'
});

В CSS можно определить:

.custom-toast {
    background-color: #333;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
}

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

Симуляция ошибок и нагрузочного тестирования

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

for (let i = 0; i < 50; i++) {
    setTimeout(() => {
        iziToast.show({
            title: 'Нагрузка',
            message: `Уведомление #${i + 1}`,
            position: 'topRight',
            timeout: 2000
        });
    }, i * 100);
}

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

Оглавление