Тестовое задание: React Toast Notification System (ООО ПЭСК)
Тестовое задание: React Toast Notification System
Цель:
Оживить систему уведомлений в предоставленном шаблоне (test-toast.zip). У вас есть готовая верстка и структура файлов, но отсутствует логика.
Задача:
Реализовать функционал Toast, чтобы можно было вызывать уведомления из любой части приложения. (см. закомментированный код в App.tsx) Реализовать жизненный цикл уведомления в src/components/ToastItem.tsx (таймеры, удаление)
Ограничения:
- Нельзя использовать сторонние библиотеки для уведомлений.
- Стили в
App.cssуже написаны, нужно корректно встроить компоненты в существующую верстку.
Требования к бизнес-логике:
1) Умный таймер (Smart Timer).
Уведомление должно исчезать через заданное время (duration). При наведении курсора мыши на уведомление таймер должен вставать на паузу. Когда курсор уходит, таймер должен продолжить отсчет с того момента, где остановился. Таймер НЕ должен сбрасываться в начало (если прошло 2 сек из 3-х, после паузы должна остаться 1 сек).
2) Анти-спам и дедупликация.
Если вызывается тост с таким же текстом и типом, который уже есть на экране — новый тост создавать НЕ нужно. Вместо этого нужно обновить таймер существующего тоста (сбросить его в начало, чтобы он провисел дольше)
3) Тестирование.
Написать минимум 1 тест (Vitest или Jest + React Testing Library). Тест должен проверять бизнес-логику, а не просто верстку.
Пример сценария для теста: проверить, что при наведении курсора (mouseEnter) таймер действительно останавливается, и тост не исчезает спустя положенное время.
Будет плюсом:
- Если вы реализуете анимацию появления/исчезновения (
mount/unmount). - Если вы напишете более 1 теста для бизнес-логики.
Сдача:
Ссылка на GitHub репозиторий или архив.