Всплывающие уведомления
Условие
Очередь уведомлений. Требования: · компонент App принимает пропс register(api) и один раз отдаёт наружу объект { show(text) }; · каждое уведомление - <div class="toast"> с текстом и <button class="dismiss">; · уведомление само исчезает через 100 мс; · закрытие по кнопке убирает только своё уведомление; · одновременно может висеть несколько, в порядке добавления; · таймеры снимаются при размонтировании.
Что проверяют тесты
показывает уведомление
несколько в порядке добавления
исчезает само
кнопка убирает только своё
таймеры снимаются при размонтировании
Как подойти
Три ловушки. Первая: удалять по id, а не по индексу - к моменту срабатывания таймера соседей может не быть. Вторая: id из Date.now() совпадёт у двух уведомлений, созданных в одном тике, - нужен счётчик. Третья: show обязана быть стабильной, иначе эффект регистрации перезапускается каждый рендер. Что назвать вслух: портал, ограничение длины очереди, пауза таймера при наведении, роль status и aria-live для доступности.
Подсказки: 3
- Идентификатор уведомления должен быть уникальным - счётчик в ref.
- Удаление по id, а не по индексу: за время ожидания список мог измениться.
- Функции наружу отдавай стабильными, иначе эффект регистрации будет срабатывать бесконечно.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.