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

Библиотека Toastify предоставляет простой и гибкий способ создания всплывающих уведомлений на веб-страницах. Основной принцип работы основан на вызове функции Toastify() с конфигурационным объектом, который определяет поведение и внешний вид уведомления.

Пример базового уведомления:

Toastify({
  text: "Пример уведомления",
  duration: 3000
}).showToast();

Здесь ключевые параметры:

  • text – текст уведомления.
  • duration – время отображения в миллисекундах (0 означает, что уведомление будет висеть до закрытия вручную).
  • gravity – положение по вертикали: "top" или "bottom".
  • position – положение по горизонтали: "left", "center", "right".
  • style – объект CSS-стилей для кастомизации внешнего вида.
  • onClick – функция, которая выполняется при клике на уведомление.

Настройка и кастомизация

Позиция уведомлений

gravity и position позволяют точно управлять местоположением всплывающего окна:

Toastify({
  text: "Уведомление внизу справа",
  gravity: "bottom",
  position: "right",
  duration: 4000
}).showToast();

Кастомный стиль

CSS-стили задаются через объект style, что позволяет менять цвета, шрифты, тени и границы уведомления:

Toastify({
  text: "Стилизованное уведомление",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold",
    borderRadius: "8px"
  },
  duration: 5000
}).showToast();

Обработка событий

Для добавления интерактивности используется onClick:

Toastify({
  text: "Нажми на меня",
  onClick: () => {
    console.log("Уведомление кликнуто!");
  }
}).showToast();

Также можно использовать callback для выполнения кода по завершении отображения уведомления, что полезно при автоматическом закрытии.

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

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

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

Так как Toastify работает через динамическое создание DOM-элементов, важно использовать мокирование DOM при тестировании с Jest или другими фреймворками:

document.body.innerHTML = '';
Toastify({ text: "Тестовое уведомление", duration: 1000 }).showToast();
const toast = document.querySelector(".toastify");
expect(toast).not.toBeNull();
expect(toast.textContent).toBe("Тестовое уведомление");

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

Для тестов, где важна визуальная составляющая:

const toast = document.querySelector(".toastify");
expect(toast.style.background).toBe("linear-gradient(to right, #00b09b, #96c93d)");
expect(toast.style.borderRadius).toBe("8px");

Проверка колбэков

Можно проверять срабатывание обработчиков событий с помощью мок-функций:

const onClickM ock = jest.fn();
Toastify({ text: "Кликни меня", onClick: onClickMock }).showToast();
const toast = document.querySelector(".toastify");
toast.click();
expect(onClickMock).toHaveBeenCalled();

Тестирование автоматического закрытия

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

jest.useFakeTimers();
Toastify({ text: "Автозакрытие", duration: 2000 }).showToast();
jest.advanceTimersByTime(2000);
const toast = document.querySelector(".toastify");
expect(toast).toBeNull();

Модульность и изоляция

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

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

  • Создавать отдельный контейнер для Toastify, чтобы управлять его содержимым и очищать после каждого теста.
  • Проверять текст, стиль и события отдельно.
  • Использовать мокированные таймеры при тестировании duration.
  • Проверять edge-кейсы: пустой текст, нулевое время, кастомные позиции и стили.

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

Для React, Vue или Angular тестирование Toastify часто строится вокруг имитации рендеринга и событий DOM. В React используют @testing-library/react:

import { render } from "@testing-library/react";

render(<MyComponent />);
Toastify({ text: "React-тест", duration: 1000 }).showToast();
expect(document.querySelector(".toastify").textContent).toBe("React-тест");

В Vue тестирование осуществляется через vue-test-utils, аналогично проверяя DOM после вызова showToast().

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

Оглавление