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