Проект модуля #2

Тестирование TODO-приложения

Тестирование фронтенда

Тестирование полноценного React-приложения с помощью React Testing Library внутри Jest. Здесь вы научитесь правильно организовывать тестовую инфраструктуру, изолировать бекенд и писать надежные тесты, которые достаточного легко отлаживать.

2-4
недели

Цель

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

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

Чтобы протестировать всё это, понадобится хороший инструментарий для выполнения множества задач:

  • семантической выборки элементов со страницы;
  • выполнения тестами действий как пользователь;
  • мокинг сетевых запросов и возвращение подготовленных данных;
  • проверка ожидаемого с действительным;
  • ... и многое другое.

Все эти темы и инструменты раскрываются в данном проекте.

Описание

ToDo List – программа для создания списков и отметки выполненных пунктов. Такие программы часто применяются как списки дел или покупок. Зачастую подобные программы имеют веб-версию и мобильное приложение, а синхронизируются они благодаря бэкенду, который хранит списки каждого пользователя в своей базе данных. Бэкенд при этом является типичным REST API, отдающим данные любому авторизированному клиенту.

Задачей этого проекта является тестирование типового ToDo List, обладающего web-интерфейсом и взаимодействующим с бэкендом по сети.

Hexlet ToDo List1

Hexlet ToDo List1

Наставники

Аватар наставника Василий Кузенков
Василий Кузенков
Путь в программирование начал школьником с модификации игр на С++. А уже в вузе подрабатывал, программируя на Vue + Electron с Laravel на бэке. Создал свой стартап, работал в крупной аутсорс-компании. Амбассадор качественного кода и хороших инженерных практик
Аватар наставника Олег Афанасьев
Олег Афанасьев
По иронии судьбы пришёл в программирование сразу после получения степени магистра в области рекламы и маркетинга. Вырос на Хекслете, работает фронтенд-разработчиком в «Ростелеком», занимается развитием ТВ-приложения на базе Wink для B2B сегмента
Аватар наставника Руслан Кучеров
Руслан Кучеров
Выпускник ВМК МГУ. Работает frontend-разработчиком более 5 лет. Сейчас в команде API карт в Яндексе. Видит своё предназначение в шаринге знаний: любит помогать, учить и получает от этого удовольствие.
Сколько стоят проекты?

Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.

Зачем проходить проекты?

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

Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.

Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».

Что делать, если возникли трудности во время выполнения проекта?

Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться. Попросите о помощи в нашем Slack-чате в канале #hexlet-projects.

Кто проверяет проекты?

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

У меня другой вопрос

Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.