Провёл 5-часовой воркшоп по TDD

Месяц назад меня пригласили участвовать в конференции Junior/Middle Frontend Чатика. В качестве темы мы выбрали тестирование React-приложений.

Я подумал, что мне стоит рассказать о TDD. Этот подход я использую в разработке того же Тяжеловато, и он экономит мне кучу времени.

Рассказывать о TDD, мне показалось, полезнее всего на примере разработки приложения. Причин несколько:

  • на примере лучше видно, как TDD помогает проектировать API и рефакторить код;
  • понятнее, когда стоит переходить от теста к реализации и рефакторингу;
  • лучше видно, как проводить границы между модулями и как делать код более тестируемым.

Я решил, что хорошим форматом будет лайв-кодинг и начал готовить приложение, которое мы бы написали на воркшопе. Выбрал конвертер валют:

Диаграмма компонентов приложения: в шапке текущий курс и кнопка обновления курса, в центре форма для конвертации сумм, в подвале случайная цитата с прогнозами
Диаграмма компонентов приложения: в шапке текущий курс и кнопка обновления курса, в центре форма для конвертации сумм, в подвале случайная цитата с прогнозами

Я подобрал такое сочетание компонентов, чтобы покрыть как можно больше разных видов тестов, с которыми можно столкнуться при разработке React-приложения:

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

Пару дней назад вышла запись воркшопа, приглашаю посмотреть ^_^

Что ещё

Ссылочки на воркшоп и разные полезности: