Чат с отправкой
Условие
Лента сообщений и поле ввода. Требования: · сообщения - <div class="msg" data-status>, статус «sending», затем «sent» или «failed»; · отправка через send(text), возвращающую промис; · сообщение появляется сразу со статусом sending (оптимистично); · при ошибке статус failed и появляется <button class="retry"> у этого сообщения; · повтор снова пробует отправить; · пустое сообщение не отправляется, после отправки поле очищается; · Enter в поле отправляет.
Что проверяют тесты
отправляет оптимистично
успех переводит в sent
ошибка даёт кнопку повтора
повтор срабатывает
очищает поле и не шлёт пустое
Enter отправляет
несколько сообщений в порядке отправки
Как подойти
Оптимистичная отправка с состоянием у каждого сообщения. Три детали, за которые снимают баллы: повтор переиспользует существующий идентификатор, отправка функции выделена отдельно (иначе логика повтора дублирует логику отправки), порядок сообщений задаётся порядком отправки, а не порядком ответов сервера. Что назвать вслух: автопрокрутка вниз с сохранением позиции при чтении истории, группировка по отправителю, виртуализация длинной ленты, дедупликация при переподключении.
Подсказки: 3
- Каждое сообщение - объект со своим статусом, а не отдельные состояния.
- Повтор должен менять статус существующего сообщения, а не добавлять новое.
- Идентификатор берётся из счётчика в ref, а не из Date.now().
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.