Перейти к содержанию

План небольшого изменения сайта

Небольшую задачу легко начать с правки первой найденной строки. Но если не определить желаемое поведение и границы, рядом могут появиться новые URL, другой источник данных и несвязанные изменения дизайна. Завершим курс планом, который превращает предложение улучшения в обозримое изменение.

Возьмём готовый локальный каталог из lesson-24 архива. Тема «Публикация» сейчас возвращает пустой список и сообщение «Загружено курсов: 0.». Хотим объяснить читателю, что в теме пока нет материалов. В этом уроке готовится план; исходники, программа, проверки и выпуск не изменяются и не выполняются.

Исходное и желаемое поведение

Начальный HTML содержит два курса. После выбора publishing и успешной загрузки сервер возвращает 200 с courses: [], клиент очищает карточки и показывает количество ноль. Ошибки запроса нет. Но сообщение не объясняет, почему список пустой и что делать дальше.

Предлагаемый результат: после успешного пустого ответа показать «В этой теме пока нет курсов. Выберите другую тему.» Список остаётся пустым, кнопка снова доступна, выбранная тема сохраняется. Для all и frontend прежние две карточки и обычное сообщение количества сохраняются.

Это конкретный договор. Он не обещает наполнить пустую тему прямо сейчас и не превращает отсутствие материалов в сетевую ошибку. Также он не меняет состав данных или адреса карточек. Для большого каталога такой подход позволяет постепенно улучшать разделы, пока новые статьи ещё готовятся.

Сначала запишите условия, при которых сообщение должно появиться: успешный ответ, корректный массив, длина ноль. Ответ 400 и отказ сети относятся к другому поведению. Если показывать текст пустой темы для любой ошибки, пользователь получит неверное объяснение недоступности сервера.

Область исходников

Предполагаемая правка находится в public/app.js после успешного разбора ответа и обновления списка. HTML уже содержит #status с role="status", поэтому план не требует нового контейнера или отдельного дизайн-компонента. CSS и серверный договор сохраняются.

Источник: успешный ответ /api/courses.
Условие: courses.length === 0.
Результат: пояснение пустой темы в существующем #status.
Остальные успешные ответы: прежний текст количества.
Ошибки: прежнее сообщение HTTP/сети.

Это схема будущей логики, а не внесённый исполняемый фрагмент. В start и expected данного урока исходники совпадают, потому что результатом является документ планирования. Такое решение позволяет ясно отличить обсуждение от реализации и не выдавать план за завершённую программу.

Ссылки /courses/javascript/ и /courses/html-css/ должны остаться прежними. Сам запрос продолжает использовать topic=publishing, а не новое красивое название раздела. Название в интерфейсе и постоянное значение параметра относятся к разным слоям договора.

Сценарии для будущего чтения

Запишем четыре содержательных случая. Первый — успешная загрузка all, которая должна сохранить две карточки и обычный текст. Второй — успешный пустой publishing, для которого появляется новое пояснение. Третий — неизвестная тема fronted, которая остаётся 400. Четвёртый — отсутствующий сервер, который не должен выглядеть как пустой успешный каталог.

Условие Будущее ожидаемое поведение
all, успешный ответ Два курса, сообщение количества
publishing, успешный ответ Пустой список, объяснение выбора темы
fronted, ответ 400 Сообщение ошибки, прежний список
Нет ответа сервера Сообщение сетевой ошибки

Эта таблица задаёт проверки для следующей разрешённой работы, но сейчас они не запускаются. Не добавляйте к плану отметки «пройдено», пока не получены действительные наблюдения. В нашей текущей партии пользователь просил локальное написание без тестов и деплоя, поэтому подготовка критериев не превращается в их выполнение.

Есть ещё поведение общей длительности. После успешного пустого ответа список очищен, и кнопка расчёта должна показать ноль. Новое пояснение не должно неожиданно вернуть старые карточки или изменить числовое преобразование. Это связанный результат уже изученного механизма, который стоит сохранить при узкой редакционной правке интерфейса.

Если следующая редакционная задача добавит третий курс в тему «Публикация», новое пояснение должно исчезнуть автоматически для непустого ответа. Не связывайте условие с названием темы: связывайте его с длиной успешного списка. Тогда расширение данных не потребует переименования маршрута или отдельной правки текста интерфейса. Если реализованный вариант продолжает сообщать об отсутствии материалов при появившейся карточке, критерий результата нарушен и изменение следует исправить либо вернуть. Этот случай показывает, почему общее пустое состояние удобнее специального исключения для одной временно незаполненной рубрики.

Риск и способ возврата

Основной риск — смешать пустой успех и ошибку запроса. Поэтому условие нового текста располагается только после успешного ответа. Второй риск — перезаписать статус загрузки слишком рано: пока запрос ещё не завершён, пользователь должен видеть «Загрузка…», а не обещание отсутствующих материалов.

Если следующая реализация оформлена отдельным коммитом, её можно отменить обратной записью, сохранив остальную историю. Руководство revert описывает такой механизм. В плане заранее выбирается узкий состав задачи, чтобы возврат относился к пояснению, а не к множеству несвязанных изменений.

Возврат исходника ещё не меняет опубликованный сайт. Если выпуск позднее состоится, потребуется отдельный договор о сборочном артефакте и способе его возврата. В нашем учебном примере production отсутствует. Поэтому документ пишет «выпуск не выполнялся» и не создаёт ложного ощущения, что тег или коммит уже управляет хостингом.

Работа в ветке и передача результата

Для будущей реализации можно выбрать ветку feature/empty-topic-message. Название помогает понять задачу, но не заменяет описание поведения. Предполагаемый Merge Request содержит исходную проблему, новый текст, сохранённые маршруты и статус выполненных действий. Его внешний выпуск остаётся отдельным решением команды.

Инструкция GitLab по Merge Request описывает объект обсуждения веток. Наш план использует эту модель без создания запроса в аккаунте. Коллега должен получить обозримое изменение и критерии, а не просьбу «сделайте что-нибудь с пустой страницей».

Удобно также назначить момент обновления документа передачи. После действительной реализации в handover.md появится новое поведение пустого списка, а в статусе проверок — только реально выполненные действия. Пока этого нет, текущий договор остаётся прежним. Так документы сопровождают состояние исходников и не обещают будущие функции заранее.

Курс завершился связью нескольких инструментов: история сохраняет задачи, ревью сопоставляет их с требованием, тег обозначает источник версии, DevTools объясняет наблюдаемое поведение, а план ограничивает следующий шаг. Для нашего каталога подготовлена конкретная задача пустого состояния с неизменными URL, четырьмя сценариями и понятной границей выпуска. Продолжать её можно отдельно, не теряя уже согласованные материалы и условия.