Что такое TDD и BDD на пальцах, и что должен знать о них фронтендер

Постараюсь как можно проще объяснить эти концепции и на примере показать разницу.

❓Что это вообще за буквы

И то, и другое — подходы к разработке, когда сначала пишутся тесты, а потом код.

*DD (*что-то* Driven Development) — разработка, основанная на чем-то.

TDD (Test Driven Development) — Разработка на основе тестов.

BDD (Behavior Driven Development) — Разработка на основе поведения.

BDD, на самом деле, является расширением TDD-подхода. Тем не менее, они предназначены для разных целей и для их реализации используются разные инструменты. В разных командах эти понятия могут интерпретировать по-разному, и часто возникает путаница между ними.

❓В чем разница

  • TDD хорошо подходит для юнит-тестирования, т.е. для проверки работы отдельных модулей самих по себе. BDD — для интеграционного (т.е. для проверки, как отдельные модули работают друг с другом) и e2e (т.е. для проверки всей системы целиком) тестирования.
  • TDD: тесты сразу реализуются в коде, для BDD чаще всего описываются шаги на языке, понятном всем, а не только разработчикам.
  • TDD: юнит-тесты пишут сами разработчики. BDD требует объедения усилий разных членов команды. Обычно тест-кейсы (шаги) описываются ручным тестировщиком или аналитиком и воплощаются в код тестировщиком-автоматизатором. В нашей команде мы (фронтенедеры) описываем шаги вместе с тестировщиками, а код тестов пишет фронтенд-команда.
  • TDD проверяет работу функций, BDD — пользовательские сценарии.

❓А как выглядит на примере

Давайте возьмем простую задачку. Нам нужно сделать форму, в которую мы вводим возраст котика и его вес, а в ответ получаем, сколько корма котик должен кушать в сутки.

Как подойти к этой задаче, используя TDD подход:

  1. Пишем тест, в котором проверяем, что функция getCatFood() возвращает нужные значения в разных ситуациях
  2. Проверяем, что тесты упали (кода еще нет)
  3. Пишем код функции очень просто — так чтобы тесты прошли
  4. Проверяем, что тесты прошли
  5. На этом шаге можем задуматься о качестве кода. Можем спокойно рефакторить и изменять код как угодно, т.к. у нас есть тесты, которые с уверенностью скажут, что мы где-то ошиблись
  6. Повторяем все вышеуказанные шаги еще раз

Как подойти к этой задаче, используя BDD подход:

  1. Процесс начинается с того что пользователь открывает форму
  2. Нам нужно протестировать числа которые выдает форма
  3. Нам нужно ввести 10–20 разных значений
  4. Проверка в данном случае это нажатие на Submit кнопку и проверка значения
  5. Тест пройдет если результат на форме соответствует “правильным” значениям

Далее мы это описываем с помощью специального синтаксиса (он зависит от инструмента, который используем, но суть одна). Например:

Функция: Расчет количества корма

Сценарий: При вводе валидных параметров отображается правильный ответ

Когда я нахожусь на странице с формой

И ввожу возраст 5 лет

И ввожу вес 5 кг

То мне отображается количество корма 500 г

Потом эти шаги реализуются в коде.

❓ Я фронтендер, зачем мне это надо

Умение тестировать свой код — очень жирный плюс для фронтендера, и вот почему:

  • ты продумываешь детали еще до реализации, это помогает абстрагироваться от кода и уловить непонятные моменты в ТЗ на самом раннем этапе
  • помогают наладить коммуникацию между разными членами команды: разработчиком, тестировщиком, менеджером и тд.
  • раньше отлавливаются ошибки в коде, а чем раньше поймана бага, тем дешевле ее пофиксить
  • меньше переходов туда-обратно таска от разработчика к тестировщику, значит, таски быстрее доедут до прода и меньше придется переключаться между тасками
  • разгружаете своих ручных тестировщиков. Регрессионное тестирование — процесс очень трудоемкий. Если все покрыто автотестами, им достаточно просто описать тест-кейсы, код могут написать автоматизатор или разработчик
  • можно смелее делать рефакторинг
  • хорошие тесты — это еще и документация, и они помогают быстрее адаптироваться новым членам команды

PS В следующем посте расскажу об инструментах, которые мы используем для тестирования, и как у нас построен процесс.

Подписывайтесь на блоги:

Телеграм: frontend_thoughts

Instagram: lucy_frontend

Frontend developer at Mail.Ru Group 👩‍💻, leader of moscowcss community, conference speaker 🎤, write about IT, channel: t.me/frontend_thoughts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store