Автоматизация проверок

Библиотека Noty предназначена для отображения уведомлений на веб-странице с гибкой настройкой внешнего вида, поведения и управления временем отображения. Основной объект уведомления создается через конструктор new Noty(options), где options — это объект конфигурации.

Пример минимальной конфигурации:

new Noty({
    text: 'Успешная операция',
    type: 'success',
    timeout: 3000,
    layout: 'topRight'
}).show();
  • text — текст уведомления.
  • type — тип уведомления (alert, success, warning, error, info).
  • timeout — время жизни уведомления в миллисекундах.
  • layout — позиция на экране (top, topLeft, topRight, bottom, bottomLeft, bottomRight, center).

Типы уведомлений и их особенности

Noty поддерживает пять стандартных типов уведомлений:

  1. alert — нейтральное уведомление для информации.
  2. success — уведомление об успешном завершении операции.
  3. error — сообщение о критической ошибке.
  4. warning — предупреждение, требующее внимания.
  5. info — информативное сообщение без критичности.

Каждый тип можно стилизовать через CSS или использовать встроенные темы: mint, metroui, sunset, relax, nest.

Настройка внешнего вида и тем

Темы подключаются через CSS и задаются через параметр theme. Например:

new Noty({
    text: 'Событие успешно выполнено',
    type: 'success',
    theme: 'mint',
    layout: 'topRight',
    timeout: 2000
}).show();
  • theme — внешний стиль уведомления.
  • Возможность кастомизации включает изменение цвета, шрифтов, отступов и анимаций через CSS.

Расположение уведомлений

layout определяет позицию уведомления на экране. Доступные варианты:

  • top — верх центра.
  • topLeft / topRight — верхний левый / правый угол.
  • bottom — низ центра.
  • bottomLeft / bottomRight — нижний левый / правый угол.
  • center — центр экрана.

Можно комбинировать с CSS для точной настройки отступов и перекрытия элементов.

Автоматизация отображения уведомлений

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

function showNotification(message, type = 'info') {
    new Noty({
        text: message,
        type: type,
        layout: 'topRight',
        timeout: 3000,
        progressBar: true
    }).show();
}

// Пример автоматической проверки состояния
setInterval(() => {
    const serverStatus = checkServer();
    if (!serverStatus) {
        showNotification('Сервер недоступен', 'error');
    }
}, 5000);
  • progressBar — отображение полосы времени уведомления.
  • Автоматизация позволяет уведомлять пользователей о событиях без вмешательства.

Управление очередью уведомлений

Noty поддерживает несколько уведомлений одновременно. Для предотвращения наложений можно использовать очередь:

let queue = [];

function enqueueNotification(message, type) {
    queue.push({message, type});
    if (queue.length === 1) displayNext();
}

function displayNext() {
    if (queue.length === 0) return;
    const item = queue[0];
    const n = new Noty({
        text: item.message,
        type: item.type,
        timeout: 2000,
        callbacks: {
            onClose: () => {
                queue.shift();
                displayNext();
            }
        }
    }).show();
}
  • callbacks — объект с функциями обратного вызова (onShow, onClose, onClick, afterShow).
  • Очередь позволяет управлять последовательностью уведомлений, не перегружая интерфейс.

Встроенные кнопки и действия

Noty поддерживает добавление кнопок для взаимодействия:

new Noty({
    text: 'Удалить элемент?',
    type: 'warning',
    buttons: [
        Noty.button('Да', 'btn btn-success', () => {
            deleteItem();
        }),
        Noty.button('Нет', 'btn btn-error', n => n.close())
    ]
}).show();
  • buttons — массив кнопок с текстом, классом и функцией действия.
  • Полезно для подтверждений и интерактивных уведомлений в автоматизированных проверках.

События и управление жизненным циклом

Noty предоставляет следующие события:

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

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

new Noty({
    text: 'Задача завершена',
    type: 'success',
    timeout: 2500,
    callbacks: {
        onClose: () => {
            logCompletion();
        }
    }
}).show();

Интеграция с системой тестирования

Для автоматизации проверок можно комбинировать Noty с тестовыми скриптами:

function runTests() {
    const results = performTests();
    results.forEach(res => {
        new Noty({
            text: res.message,
            type: res.success ? 'success' : 'error',
            timeout: 4000
        }).show();
    });
}
  • Позволяет визуализировать результаты проверок в реальном времени.
  • Удобно для отображения ошибок, предупреждений и успешных шагов в процессе автоматизированного тестирования.

Настройка времени жизни и анимаций

  • timeout — задает продолжительность отображения уведомления.
  • animation — объект с параметрами анимации:
animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutRight'
}
  • Поддерживаются CSS-анимации с классами из библиотек вроде animate.css.

Использование Noty в модульных приложениях

  • В ES6+ модулях Noty подключается через import Noty from 'noty';.
  • Можно создавать фабрики уведомлений для повторного использования конфигураций:
const notifySuccess = message => new Noty({
    text: message,
    type: 'success',
    timeout: 2000
}).show();
  • Фабрики упрощают поддержку кода и внедрение автоматических уведомлений по всему приложению.
Оглавление