"Blueprint Driven Development, or how I wrote code using TDD in the era of AI and didn't die", Stanislav Dolgachov

In the era of artificial intelligence, writing code has become easier than ever. The milkman no longer delivers milk, and the baker no longer bakes bread — everyone is generating code. But what about the quality of that code? We used to write automated tests to ensure quality, but do we still need them if AI supposedly knows best? In my opinion, unit tests and similar automated checks have never been more important than they are now, because we need to control what is written not only by AI, but also by the milkman, the baker, and even your team lead.

1. Blueprint
Driven
Development
1

2. Who am I?
10+ років у розробці
HTML, CSS, JS, TS, Angular, BJJ, React,
Next.js
4 роки брехав, що пишу по TDD
•
•
•
2

3. Як мене знайти?
GitHub: dolgachio
Telegram: @OpenSourceUa
Instagram: dolgach.io
•
•
•
3

4. Про що будемо сьогодні розмовляти?
Теорія TDD
Практична задача з реального проєкту
Поради і рекомендації в еру ШІ1. 2. 3.
4

5. Візьмемо реальну задачу з проєкту
Імпорт даних з Excel / CSV файлу
користувач має можливість завантажити файл з табличкою і переглянути
як файл буде завантажено, буде змінюватись в майбутньому
користувач має можливість обирати рядок і колонку, де починаються дані
для імпорту
•
•
•
5

6. Демонстрація задачі
6

7. 1. Теорія
7

8. Чому весь код навколо нас поганий?
Низька компетенція всіх крім нас самих.
Немає часу на рефакторинг/виправлення.
Замовники винні.
Ми спочатку робимо, а потім думаємо. ✅1. 2. 3. 4.
8

9. TDD що це взагалі?*(життєве визначення)
9

10. TDD що це взагалі?
Test Driven Development або тести до коду.
БУКВАЛЬНО всі знають що це, всі пробували, але ніхто не пише ??????
10

11. Чому ніхто не хоче писати по TDD?
Тести - це зайва робота.
Тести постійно падають.
Тести можна написати і потім.
Моє улюблене ➡️ ➡️ ➡️1. 2. 3. 4.
11

12. Тобі гроші на тести ніхто не дасть
12

13. Чому ніхто не хоче писати по TDD?
Тести - це зайва робота.
Тести постійно падають.
Тести можна написати і потім.1. 2. 3.
13

14. 14

15. Тести не головне ??????
15

16. Правильний TDD: Navigation Map
16

17. Navigation Map
чіткий план з назвами абстракцій
описом їх API
покроковим детальнимсписком задач.
•
•
•
17

18. Navigation Map (Triple A principle)
Architecture: Архітектура або дизайн, того, що ми будуємо
API: інтерфейси, типи, "контракти" сутностей
Actions: Чіткий список дій, іншими словами - що потрібно зробити і в якій
послідовності1. 2. 3.
18

19. Так ШІ, Майбутнє вже наступило
19

20. Чому TDD важливий у 2k25?
Згідно з дослідженням від NewScientist, близько третини відповідей AI-
пошукових інструментів не мають підтверджень
20

21. Чому TDD важливий у 2k25?
Згідно з репортом від Dora 95% полагаються на ШІ асистентів, з них 70%
довіряють ШІ. Тобто ми занадто сильно довіряємо ШІ.
21

22. Чому TDD важливий у 2k25?
Правильний TDD дозволяє
Сформувати точну специфікацію того, що ми хочемо зробити.
Перевірити, що ми отримали саме те, що хотіли.
Впроваджувати зміни маленькими кроками.1. 2. 3.
22

23. 23

24. Правильний TDD: Navigation Map
24

25. Реальна задача з проєкту
Імпорт даних з Excel / CSV файлу
користувач має можливість завантажити файл з табличкою і переглянути
як файл буде завантажено, буде змінюватись в майбутньому
користувач має можливість обирати рядок і колонку, де починаються дані
для імпорту
•
•
•
25

26. Navigation Map: Architecture
data-import/
├── DataImport.tsx
├── components/
│ ├── DataImportForm.tsx
│ ├── DataPreviewGrid.tsx
│ └── FileUploader.tsx

26

27. Navigation Map: Architecture
data-import/
├── hooks/
│ └── useDataImport.ts
├── services/
│ └── parseImportFile.ts
│ └── formatDataCellForPreview.ts
└── types/
├── DataImportSelection.types.ts
└── DataPreview.types.ts

27

28. DataImportSelection.types.ts
DataCell
DataRow
DataSheet
DataFile
Navigation Map: API
// types/

export type = string | number | null;
export type = Record<string, DataCell>
export type = {
name: string;
headers: string[];
rows: DataRow[];
};

export type = {
fileName: string;
sheets: DataSheet[];
};

28

29. DataPreviewGrid.tsx
DataFile | null
DataImportSelection | null
DataPreviewGrid: React.FC<Props>
Navigation Map: API
// components/
interface Props {
data: ;
selection: ;
}
export const = ({
data,
selection,
}) => {
if (!data) return <div>No data loaded</div>;
return <div>{/* Render your table here */}</div>;
};

29

30. Navigation Map: Actions
Компонент DataPreviewGrid.tsx
Форматування даних, функція formatDataCellForPreview
Інтеграція з компонентом AgGrid або подібним
Підготовка даних для таблиці
Налаштування колонок і рядків
Компонент DataImportForm.tsx
...
тощо1. 1. 2. 1. 2. 2. 3. 4.
30

31. Чому створення Navigation
Map дуже важливо?
Бо вона дозволяє:
Працювати над однією великою фічею паралельно кільком розробникам.
Наприклад, один робить DataPreviewGrid, інший - DataImportForm, тощо.
Плануючи сутності заздалегідь ми можемо використати найкращі
практики по типу SOLID, DRY, тощо.
Гарний дизайн і архітектура запорука добрих тестів.1. 2. 3.
31

32. ?????? Чи можемо ми нарешті
почати писати тести?
Ніт
??????
32

33. Для написання тестів теж існують
кращі практики і правила
Роботів і людей треба направляти, як це і не дивно.
33

34. Як направляти роботів і людей?
Всі інструменти контролю якості коду і їх конфіги: eslint, prettier, тощо
Документація для роботів і людей, наприклад в теці /docs в MarkDown
форматі. Як для коду, так і для тестів.
Приклади правильних тестів в репозиторії.
Інші: в залежності від інструментів.1. 2. 3. 4.
34

35. Design for lean testing
javascript-testing-best-practices (24.5k ⭐)
// docs/testing-guidelines.md
# Test Writing Guidelines
0. The Golden Rule:

35

36. Design for lean testing
What is being tested?
Under what circumstances and scenario?
What is the expected result?
javascript-testing-best-practices (24.5k ⭐)
// docs/testing-guidelines.md
# Test Writing Guidelines
0. The Golden Rule:

## Section 1: The Test Anatomy

1.1 Include 3 parts in each test name
(1)
(2)
(3)

36

37. Design for lean testing
What is being tested?
Under what circumstances and scenario?
What is the expected result?
AAA
realistic input data
javascript-testing-best-practices (24.5k ⭐)
// docs/testing-guidelines.md
# Test Writing Guidelines
0. The Golden Rule:

## Section 1: The Test Anatomy

1.1 Include 3 parts in each test name
(1)
(2)
(3)
1.2 Structure tests by the pattern
1.3 Don’t “foo”, use

37

38. formatDataCellForPreview as sut
// Arrange
// Act
// Assert
Приклад тесту Ч.1
import { } from "...";
describe("formatDataCellForPreview", () => {
let dataCell: DataCell | null;
it("should return None for null input", () => {

dataCell = null;

const formattedValue= sut(dataCell);

expect(formattedValue).toBe("None");
});
});

38

39. describe("when input is a number", () => {
122000.56
});
Приклад тесту Ч.2
describe("formatDataCellForPreview", () => {

it("should add currency formatting to it", () => {
// Arrange
dataCell = ;
// Act
const formattedValue= sut(dataCell);
// Assert
expect(formattedValue).toBe("$1,220,00.56");
});

});

39

40. Поширені помилки
Писати тести, щоб вони спочатку пройшли, а не впали.
Намагатись забезпечити покриття тестами на якийсь відсоток.
Занадто складні тести або one test to rule them all.
Більше про про помилки у відео тут1. 2. 3. 4.
40

41. Як почати писати по TDD вже сьогодні?
EASY: Вивчіть основи TDD. Неможливо за 30 хвилин це все охопити.
MEDIUM: Напишіть Тест на Багу, але тест має бути написаним до коду, і
він має впасти.
HARD: Пишіть по TDD весь новий код ??????.
Keep Calm ❤️1. 2. 3. 4.
41

42. Підсумки
Переваги правильного TDD:
Дизайн нашого коду краще бо в нас є Navigation Map.
Ми можемо делегувати задачі і працювати над великою фічею
паралельно.
Наш код легше підтримувати і розширювати в майбутньому. Ми краще
спимо вночі.
Можна видєлуватись і виступати на конференціях.1. 2. 3. 4.
42

43. Посилання
javascript-testing-best-practices (24.5k ⭐)
nodejs-testing-best-practices (4.1k ⭐)
[VIDEO] Unit testing in JavaScript Part 1 (FunFunFunction)
[VIDEO] Unit testing in JavaScript Part 2 (FunFunFunction)
Vibe Coding Is The WORST IDEA Of 2025
The Most Common Test Driven Development Mistakes1. 2. 3. 4. 5. 6.
43

44. Як мене знайти?
GitHub: dolgachio
Telegram: @OpenSourceUa
Instagram: dolgach.io
•
•
•
44

45. Q&A
45