Автопроверка проектов

Проекты — это полноценные приложения, которые студент самостоятельно разрабатывает от начала и до конца. Как и каждое практическое упражнение в Хекслете, проект автоматически проверяется тестами на соответствие требованиям, указанным в задании. Когда проект прошёл проверку, он отмечается как пройденный в профиле студента, и можно продолжать обучение.

Как работает автоматическая проверка

Для запуска тестов используется GitHub Action (далее — экшен), который система автоматически добавляет при создании репозитория проекта. Экшен «дожидается», пока студент пройдёт все шаги проекта в интерфейсе на сайте, и активируется на последнем шаге при отправке на проверку. Далее после каждого коммита проект прогоняется через тесты и линтер Хекслета.

Результат проверки отображается в бейджике в README репозитория и на странице Actions → Workflows → hexlet-check. Если все проверки успешно пройдены, бейджик будет зелёным, а в результатах запуска экшена появится зелёная галочка. Если тесты или линтер нашли ошибки, вы увидите красный бейджик и красный крестик.

Как читать результаты автоматической проверки

Перейдите на вкладку Actions, выберите слева воркфлоу hexelt-check, а справа — результат запуска экшена.

Здесь для примера будет выбран экшен, упавший на коммите refactoring stylish.

Слева, в блоке Jobs, вы увидите джобу build. Выберите её — справа загрузится список шагов. Нас интересует шаг Hexlet project check.

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

На втором скриншоте на 38-й строке показан запуск линтера — он не нашёл ошибок.

В проектах с фронтендом к результатам тестов прикрепляются скриншоты страниц, если они выглядят не так, как ожидается. В GitHub такие файлы называются артефактами (Artifacts), они доступны для скачивания внизу страницы упавшего экшена.

Проекты по вёрстке проверяются только снепшотами: эталонная страница сравнивается со страницей студента и между ними вычисляется разница. Результат проверки — изображение из трёх частей: «ожидалось / разница / получено».

В студенческом проекте (справа) фрагмент страницы оказался ниже, чем нужно (слева), а также есть различия в расположении и оформлении текста. Всё, что отличается, выделено красным на скриншоте посередине.

Как отлаживать свой код

Дебажить код можно тем же способом, что и в практиках — через отладочную печать. Её результат попадёт в общий вывод, вместе с результатами тестов.

Обращайте внимание на всё: тексты, кавычки, переносы строк. Если вы разрабатываете под Windows, то убедитесь, что в редакторе установлены переносы строк LF, а не CRLF. Это важно, так как тесты прогоняются в Linux, и текстовые значения могут быть неверно интерпретированы.

В некоторых проектах есть требование использовать специальные библиотеки для отладки приложения. Потом эти библиотеки «включаются» через переменные окружения при запуске автоматической проверки, например, так: DEBUG=axios,page-loader npm test. Результат дебага выводится вместе с результатами тестов.

В проектах с фронтендом смотрите на снепшоты, полученные из артефактов. Это позволит увидеть свой проект так, как его видели тесты.

Рекомендации по прохождению проектов

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

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

На каждом шаге проекта можно задать вопрос поддержке. Чтобы быстрее получить ответ, при составлении вопроса опирайтесь на нашу статью «Как правильно задавать вопросы».

Также задать вопрос по проекту можно в нашем Сообществе в Telegram — там вам ответят другие студенты.