3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор ~9 хв

Що таке тести і TDD простими словами

Щоб нова фіча не зламала три старі тишком-нишком

Тести і TDD простими словами: навіщо писати перевірку до коду, як працює цикл червоний-зелений і чому тести ловлять баги раніше, ніж їх побачить користувач.

Скіли ECC у цьому уроці: tdd-workflow

Що таке тест простими словами

Зібрав шафу з IKEA. Дверцята відчиняються, полиці стоять - краса, хоч у сторіс викладай. За тиждень прикручуєш нову полицю і ненароком перекошуєш дверцята. А ти цього не бачиш. Побачиш за місяць - коли дверцята урочисто відваляться тобі на ногу.

Щоб такого не було, придумали тести. Тест - це робот, який після кожної твоєї правки обходить усю шафу і смикає кожні дверцята: відчиняються? зачиняються? не перекошені? Смикнув - і одразу доповів. «Усе ок» або «ось тут відвалилося, лагодь».

А TDD - це просто звичка. Спочатку покликати робота-перевіряльника, і тільки потім будувати.

Робот-перевіряльник з ліхтариком обходить ряд дверцят шафи і ставить галочки
Тест - це робот, який смикає кожні дверцята після кожної зміни.

Навіщо тести потрібні вайбкодеру

Ти вайбкодер. Тести руками ти не пишеш - їх напише агент. Але якщо розумієш, навіщо вони взагалі, то отримуєш одразу чотири приємні бонуси:

  • перестаєш боятися чіпати код - робот сам скаже, якщо щось поїхало;
  • ловиш баги до того, як їх помітить користувач (а тим паче замовник);
  • спокійно просиш агента «перепиши гарніше» - тести підстрахують;
  • і нарешті розумієш, навіщо агент «спершу пише перевірку, яка падає». Це не глюк. Це метод.

Різниця між «мій сайт постійно десь ламається, і я не розумію де» та «міняю що хочу і сплю спокійно» зазвичай зводиться до одного слова: тести.

Цикл TDD: червоний, зелений, причесати

Просиш агента працювати за TDD - і він не кидається писати код наосліп. Він іде за чітким циклом. Ось він, без мудрованих слів.

Крок 1. Описуємо, чого хочемо

Спочатку агент формулює задачу очима користувача: «Я як покупець хочу шукати товари за змістом, щоб знаходити потрібне навіть без точних слів». Це називається user journey . З неї одразу ясно, що перевіряти.

Крок 2. Пишемо тест - і він СПЕЦІАЛЬНО падає

Далі починається дивне. Агент пише перевірку до коду. Зрозуміло, що вона тут-таки падає - коду ж іще немає! Це і є червоний етап.

Крок 3. Пишемо мінімум коду, щоб тест позеленів

Тепер агент пише рівно стільки коду, щоб тест пройшов. Ні рядком більше. Тест із червоного стає зеленим . Робот задоволений. Ти теж.

Крок 4. Наводимо красу (рефакторинг)

Код працює, але виглядає, скажімо мʼяко, абияк. Ось тепер його можна причісувати - прибрати дублі, перейменувати зрозуміліше. І після кожного кроку ганяти тести: поки вони зелені - ти нічого не зламав.

Світлофор: червоний - тест падає, зелений - тест проходить, по колу
Увесь TDD вміщується у світлофор: червоний → зелений → причесати → знову.

Види тестів: юніт, інтеграція, E2E

Тести бувають трьох «розмірів» - від дрібного до великого. Хороший агент покриває всі три, а не один улюблений.

Три рівні перевірок
  • Юніт - перевіряє одну маленьку деталь: «функція складає 2 і 2 і видає 4?». Швидко і точково.
  • Інтеграція - перевіряє, що деталі дружать: «кнопка реально дістає дані із сервера?».
  • E2E (від початку до кінця) - робот відкриває сайт як жива людина: клікає, друкує, перевіряє результат.
Чого тестами НЕ ловлять
  • «Чи гарно» - дизайн тест не оцінить, це вирішуєш ти очима.
  • Те, що не описав - робот перевіряє рівно те, про що його попросили, і ні байтом більше.
  • «Чи зручно людям» - UX відчуваєш ти, а не машина.

Хороший тест проти поганого: як відрізнити

Найчастіша пастка: тест начебто є, а перевіряє не те. Ось як відрізнити надійного робота від декоративного. Це прямо з правил скіла tdd-workflow.

Хороший тест
  • Перевіряє те, що бачить користувач: «на екрані написано Кошик: 3».
  • Чіпляється за зміст: «кнопка з текстом Купити», а не за випадковий клас.
  • Незалежний: сам готує свої дані і ні від кого не залежить.
  • Перевіряє і погані сценарії: порожнє введення, помилка сервера, дивні числа.
Поганий тест
  • Лізе в нутрощі: «а змінна count точно дорівнює 5?» - користувачу на це начхати.
  • Чіпляється за крихке: «клікни по css-class-xyz» - поміняли стиль, тест упав.
  • Залежить від сусіда: один тест створив юзера, інший сподівається, що той іще живий.
  • Перевіряє тільки коли все добре - а в реальності криві дані трапляються на кожному кроці.

Приклад із життя: як промокод ламає кошик

Зробив інтернет-магазин. Кошик рахує суму - працює. За тиждень просиш агента: «додай знижковий промокод». Він додає. Промокод працює! Ти радієш і йдеш спати як немовля.

А вранці сюрприз: після додавання промокоду звичайна сума без знижки почала рахуватися з копійчаною помилкою. Ти цього не помітив, бо перевіряв тільки промокод. Зате помітив клієнт - і лишив теплий відгук на одну зірку.

З тестами цього б не було. Робот-перевіряльник після правки промокоду сам перерахував би і звичайний кошик, і заволав би: «гей, тут тепер 99 гривень замість 100, лагодь». За три секунди - до сну, а не після.

Ось як попросити агента працювати так, щоб він тебе страхував:

Промпт - скопіюй і спробуй

Додай у кошик підтримку знижкових промокодів. Працюй суворо за TDD:

  1. Спочатку опиши простими словами, що має відбуватися: що вводить користувач і що він має побачити.
  2. Напиши тести ДО коду. Обовʼязково перевір і звичайний кошик без промокоду - я хочу бути впевнений, що його не зламали.
  3. Запусти тести і покажи мені, що новий тест падає. Це нормально, так і має бути.
  4. Тепер напиши мінімум коду, щоб усі тести стали зеленими.
  5. Запусти тести знову і покажи, що все зелене.
  6. Перевір крайні випадки: порожній промокод, неіснуючий промокод, знижка більша за суму.

Як спіймати тести, написані «для галочки»

Буває, агент квапиться і вдає, що протестував. Пробіжись по чек-листу - це прямо суть скіла tdd-workflow.

  1. Тест реально падав? Агент одразу показав зелене, не показавши червоне? Можливо, тест не перевіряє анічогісінько.
  2. Старе прогнали? Нова фіча не повинна ламати те, що працювало. Спитай прямо: «а старе ти перевіряв?».
  3. Чи є погані сценарії? Порожнє введення, помилка, дивні числа - не тільки «коли все добре».
  4. Тест чіпляється за зміст, а не за стиль? «Кнопка Купити», а не безіменний css-клас.
  5. Тести незалежні? Кожен сам готує дані і не сподівається на сусіда.
Мем: агент затуляє очі рукою і каже «не запускав, але впевнений, що працює»
Класика жанру. Саме тому червоний етап обовʼязковий.

Часті помилки новачків у TDD

  • Просити код без тестів. «Просто зроби» - а потім дивуватися поломкам. Додавай «працюй за TDD».
  • Вірити зеленому, не бачивши червоного. Тест жодного разу не падав? Значить, може, і не перевіряє нічого.
  • Тестувати тільки нову фічу. Головна користь тестів - спіймати, що нове зламало старе.
  • Перевіряти тільки «коли все добре». Реальні дані бувають порожні, криві і злі.
  • Чіплятися за крихке. Тест по css-класу падає від будь-якої зміни дизайну. Чіпляйся за зміст.
  • Зносити тести, коли вони заважають. Тест, що падає, - не ворог. Це робот, який щойно врятував тобі ногу.
Піксель-арт: зелена галочка-щит захищає будиночок-проєкт від падаючих цеглин-багів
Зелені тести - це щит між твоїм проєктом і багами.

TL;DR - если коротко

  • Тест - робот-перевіряльник: сам тисне кнопку і доповідає «працює» або «все, зламалося».
  • TDD - звичка писати перевірку до коду. Спершу червоний, тест падає. Потім зелений, код лагодить.
  • Тести ловлять не перший баг, а ті, що повертаються - коли свіжа фіча тихо ламає стару.
  • Хороший тест дивиться на те, що бачить користувач, а не як воно влаштоване всередині.
  • Скажи агенту «працюй за TDD» - він сам напише тести, побачить провал, полагодить і переперевірить.
  • Зелений тест, який ти жодного разу не бачив червоним, - не страховка. Це самообман.

Пошук по вікі

Натисніть Esc для закриття

Введіть запит для миттєвого пошуку по всіх сторінках курсів та уроків.