Юнит-тесты для уведомлений

Для тестирования уведомлений на базе Noty важно корректно подключить библиотеку в тестовую среду. В проектах на Node.js обычно используется инструмент jsdom для имитации DOM в среде без браузера. Подключение Noty выглядит следующим образом:

const Noty = require('noty');
const { JSDOM } = require('jsdom');

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;

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

Основные подходы к юнит-тестированию уведомлений

1. Проверка создания уведомления

Самый базовый тест — удостовериться, что уведомление создается корректно и содержит ожидаемый текст:

test('создание уведомления с текстом', () => {
    const notification = new Noty({
        text: 'Тестовое уведомление',
        type: 'success',
        timeout: false
    }).show();

    const element = document.querySelector('.noty_bar');
    expect(element).not.toBeNull();
    expect(element.textContent).toBe('Тестовое уведомление');
});

Ключевой момент — использование селектора .noty_bar для доступа к реальному DOM-элементу уведомления.

2. Проверка типов уведомлений

Noty поддерживает несколько типов уведомлений: alert, success, warning, error, information. Тестирование типа уведомления важно для проверки визуального и логического поведения:

['alert', 'success', 'warning', 'error', 'information'].forEach(type => {
    test(`уведомление типа ${type} создается корректно`, () => {
        new Noty({ text: `Тип ${type}`, type, timeout: false }).show();
        const element = document.querySelector('.noty_bar');
        expect(element.classList.contains(`noty_type_${type}`)).toBe(true);
    });
});

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

3. Тестирование времени жизни уведомления

Noty позволяет задавать timeout — время, через которое уведомление автоматически исчезает. Для тестов с таймерами применяется мок таймеров jest.useFakeTimers():

jest.useFakeTimers();

test('уведомление исчезает после timeout', () => {
    new Noty({ text: 'Временное уведомление', timeout: 3000 }).show();
    expect(document.querySelector('.noty_bar')).not.toBeNull();

    jest.advanceTimersByTime(3000);
    expect(document.querySelector('.noty_bar')).toBeNull();
});

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

4. Проверка callback-функций

Noty поддерживает callbacks: onShow, onClose, onClick. Их тестирование позволяет убедиться в корректном срабатывании логики приложения:

test('callback onShow вызывается при показе уведомления', () => {
    const onShowM ock = jest.fn();
    new Noty({ text: 'Тест', onShow: onShowMock, timeout: false }).show();
    expect(onShowMock).toHaveBeenCalled();
});

test('callback onClose вызывается при закрытии уведомления', () => {
    const onCloseM ock = jest.fn();
    const n = new Noty({ text: 'Тест', onClose: onCloseMock, timeout: false }).show();
    n.close();
    expect(onCloseMock).toHaveBeenCalled();
});

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

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

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

test('уведомление реагирует на клик', () => {
    const onClickM ock = jest.fn();
    const n = new Noty({ text: 'Кликни меня', callbacks: { onClick: onClickMock }, timeout: false }).show();

    const element = document.querySelector('.noty_bar');
    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));

    expect(onClickMock).toHaveBeenCalled();
});

Это позволяет убедиться, что события DOM корректно пробрасываются в callbacks Noty.

6. Очистка уведомлений между тестами

Для предотвращения накопления уведомлений между тестами важно удалять их после каждого кейса:

afterEach(() => {
    document.querySelectorAll('.noty_bar').forEach(el => el.remove());
});

Это обеспечивает изоляцию тестов и предотвращает ложноположительные результаты.

7. Тестирование кастомных настроек

Noty позволяет настраивать анимации, положение и тему. Пример проверки кастомной позиции и темы:

test('уведомление создается с кастомной позицией и темой', () => {
    const n = new Noty({
        text: 'Кастомное уведомление',
        layout: 'topRight',
        theme: 'mint',
        timeout: false
    }).show();

    const element = document.querySelector('.noty_bar');
    expect(element.classList.contains('topRight')).toBe(true);
    expect(element.classList.contains('noty_theme_mint')).toBe(true);
});

8. Интеграция с Jest и тестами на React/Angular/Vue

В SPA-фреймворках уведомления часто создаются динамически через компоненты. Для их тестирования используется комбинация jsdom, jest и рендеринга компонента:

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('уведомление появляется при действии', () => {
    render(<MyComponent />);
    document.querySelector('#triggerButton').click();
    expect(document.querySelector('.noty_bar')).not.toBeNull();
});

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

Юнит-тесты для уведомлений Noty включают проверку создания, типов, времени жизни, callbacks, пользовательских взаимодействий и кастомных настроек. Правильная организация тестов с использованием jsdom и моков таймеров обеспечивает надёжную проверку поведения уведомлений без запуска браузера.

Оглавление