← Назад к списку
Логотип Frontend Frontend
11.02.2026

Тестовое задание: React Toast Notification System (ООО ПЭСК)

Компания: ООО ПЭСК

Тестовое задание: React Toast Notification System

Цель:

Оживить систему уведомлений в предоставленном шаблоне (test-toast.zip). У вас есть готовая верстка и структура файлов, но отсутствует логика.

Задача:

Реализовать функционал Toast, чтобы можно было вызывать уведомления из любой части приложения. (см. закомментированный код в App.tsx) Реализовать жизненный цикл уведомления в src/components/ToastItem.tsx (таймеры, удаление)

Ограничения:

  1. Нельзя использовать сторонние библиотеки для уведомлений.
  2. Стили в App.css уже написаны, нужно корректно встроить компоненты в существующую верстку.

Требования к бизнес-логике:

1) Умный таймер (Smart Timer).

Уведомление должно исчезать через заданное время (duration). При наведении курсора мыши на уведомление таймер должен вставать на паузу. Когда курсор уходит, таймер должен продолжить отсчет с того момента, где остановился. Таймер НЕ должен сбрасываться в начало (если прошло 2 сек из 3-х, после паузы должна остаться 1 сек).

2) Анти-спам и дедупликация.

Если вызывается тост с таким же текстом и типом, который уже есть на экране — новый тост создавать НЕ нужно. Вместо этого нужно обновить таймер существующего тоста (сбросить его в начало, чтобы он провисел дольше)

3) Тестирование.

Написать минимум 1 тест (Vitest или Jest + React Testing Library). Тест должен проверять бизнес-логику, а не просто верстку.

Пример сценария для теста: проверить, что при наведении курсора (mouseEnter) таймер действительно останавливается, и тост не исчезает спустя положенное время.

Будет плюсом:

  • Если вы реализуете анимацию появления/исчезновения (mount/unmount).
  • Если вы напишете более 1 теста для бизнес-логики.

Сдача:

Ссылка на GitHub репозиторий или архив.