Мокирование Noty

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

new Noty({
    text: 'Это уведомление!',
    type: 'success',
    timeout: 3000,
    layout: 'topRight'
}).show();

Ключевые параметры:

  • text — содержимое уведомления.
  • type — тип уведомления: alert, success, error, warning, info.
  • timeout — время отображения в миллисекундах; false отключает автоматическое закрытие.
  • layout — расположение на странице: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center.
  • theme — визуальная тема уведомления.

Мокирование Noty

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

Подмена конструктора

Наиболее простой способ мокировать Noty — создать собственную реализацию конструктора.

class NotyMock {
    constructor(options) {
        this.options = options;
        this.shown = false;
    }

    show() {
        this.shown = true;
        return this;
    }

    close() {
        this.shown = false;
        return this;
    }
}

// Замена глобальной функции
window.Noty = NotyMock;

// Пример использования
const n = new Noty({ text: 'Тест', type: 'success' }).show();
console.log(n.shown); // true

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

Мокирование через библиотеки тестирования

Использование Jest или аналогичных инструментов позволяет создавать шпионы на методы библиотеки:

import Noty from 'noty';

jest.mock('noty');

test('должно создавать уведомление', () => {
    const instance = { show: jest.fn() };
    Noty.mockImplementation(() => instance);

    const n = new Noty({ text: 'Привет', type: 'info' });
    n.show();

    expect(Noty).toHaveBeenCalledWith({ text: 'Привет', type: 'info' });
    expect(instance.show).toHaveBeenCalled();
});

Такой подход удобен для unit-тестов компонентов, которые вызывают уведомления. Он не зависит от DOM и не требует реальной интеграции с браузером.

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

При мокировании важно проверять, что уведомления создаются с правильным типом. Можно расширить мок:

class NotyMock {
    constructor(options) {
        this.type = options.type;
        this.text = options.text;
        this.shown = false;
    }

    show() {
        this.shown = true;
        return this;
    }
}

// Тест
const n = new Noty({ text: 'Ошибка', type: 'error' }).show();
console.assert(n.type === 'error', 'Тип уведомления должен быть error');
console.assert(n.shown === true, 'Метод show должен изменить состояние');

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

Отслеживание последовательности вызовов

В сложных приложениях часто важно не только проверить создание уведомления, но и порядок их появления:

const calls = [];

class NotyMock {
    constructor(options) {
        calls.push({ action: 'create', options });
        this.options = options;
    }

    show() {
        calls.push({ action: 'show', options: this.options });
        return this;
    }
}

// Пример
new Noty({ text: '1', type: 'info' }).show();
new Noty({ text: '2', type: 'success' }).show();

console.log(calls);
/*
[
  { action: 'create', options: { text: '1', type: 'info' } },
  { action: 'show', options: { text: '1', type: 'info' } },
  { action: 'create', options: { text: '2', type: 'success' } },
  { action: 'show', options: { text: '2', type: 'success' } }
]
*/

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

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

Noty можно мокировать в любых тестовых фреймворках. Для Jest, Mocha или Jasmine достаточно заменить глобальный объект или использовать spy/моки:

  • Jest: jest.mock('noty') или jest.spyOn(window, 'Noty').
  • Mocha/Chai: через sinon можно создавать подмену методов show и close.

Пример с sinon:

import sinon from 'sinon';
import Noty from 'noty';

const showSpy = sinon.spy(Noty.prototype, 'show');

const n = new Noty({ text: 'Тест', type: 'info' }).show();
console.assert(showSpy.calledOnce, 'Метод show должен вызываться один раз');

Настройка моков для разных сценариев

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

class NotyMock {
    constructor(options) {
        this.options = options;
    }

    show() {
        if (this.options.type === 'error') {
            throw new Error('Ошибка уведомления');
        }
        return this;
    }
}

// Тест
try {
    new Noty({ text: 'Ошибка', type: 'error' }).show();
} catch (e) {
    console.assert(e.message === 'Ошибка уведомления');
}

Это помогает проверять обработку ошибок и поведение приложения при нестандартных ситуациях.

Вывод

Мокирование Noty позволяет контролировать поведение уведомлений без воздействия на DOM, проверять параметры, последовательность вызовов и реакции на разные типы сообщений. Такой подход необходим для юнит-тестирования и создания надёжных фронтенд-приложений с уведомлениями.

Оглавление