🅰️ Анатомія Angular: 3 специфічні баги, які зводять QA з розуму (і як їх ламати)Привіт, екіпаж! Сьогодні розриваємо шаблони. ☕️Більшість QA тестують веб-додатки однаково, не задумуючись, на чому вони написані — React, Vue чи Angular. Але це фатальна помилка.Як людина, яка щодня пише код на Angular, я зіллю вам наші головні "гріхи". Angular — це важкий, суворий enterprise-фреймворк зі своїми унікальними правилами гри. І якщо ви знаєте його слабкі місця, ви зможете знаходити критичні баги за лічені хвилини.Ось 3 вектори атаки специфічно під Angular-проєкти:🚰 Витік пам'яті (Прокляття RxJS)Angular побудований на реактивному програмуванні (RxJS). Ми постійно "підписуємося" (subscribe) на потоки даних — події кліків, таймери, відповіді від API. Головний гріх джуна-ангулярщика: забути "відписатися" (unsubscribe) при закритті сторінки.Як тестувати: Зайдіть на сторінку, де дані оновлюються самі (наприклад, дашборд із графіками). Перейдіть на іншу сторінку. Поверніться назад. Зробіть так 10 разів швидко. Відкрийте вкладку Network. Якщо ви бачите, що один і той самий API-запит тепер відправляється 10 разів одночасно — вітаю, ви знайшли витік пам'яті. Додаток скоро намертво зависне. 👻 "Мертвий" UI (Проблема Change Detection)В Angular є магічний механізм (Zone.js), який розуміє, коли треба перемалювати екран. Але для оптимізації ми часто вмикаємо стратегію OnPush (перемальовувати тільки якщо змінилося посилання на об'єкт). Якщо розробник схалтурив і просто змінив поле в об'єкті, дані під капотом оновляться, а екран — ні.Як тестувати: Зробіть дію, яка оновлює дані "збоку" (наприклад, дочекайтеся повідомлення через WebSocket або закінчення довгого таймера). Екран не змінився? А тепер просто клікніть мишкою в будь-яке порожнє місце сторінки. Якщо нові дані раптом магічно з'явилися тільки ПІСЛЯ вашого кліку — це класичний баг Change Detection. ♻️ Привиди минулого (Синглтон-сервіси)В Angular сервіси (класи, які зберігають дані) часто існують в єдиному екземплярі (Singleton) на весь додаток. Вони живуть, навіть коли ви переходите між сторінками.Як тестувати: Відкрийте Профіль Користувача №1. Потім перейдіть на головну. Тепер відкрийте Профіль Користувача №2. Якщо на частку секунди ви бачите фото або ім'я першого користувача, перш ніж завантажиться другий — розробник забув очистити стан (State) сервісу при знищенні компонента (ngOnDestroy). Висновок: Знання інструменту, на якому написаний ваш продукт — це ваша суперсила. Якщо ви прийдете до розробника і скажете не просто "тут лагає", а "здається, ти забув відписатися від Observable в цьому компоненті", рівень поваги до вас злетить у космос.А ви знаєте, на якому фреймворку написаний ваш поточний проєкт? 👇🔥 — Звісно, я знаю весь стек технологій!👀 — Здається, React... або Vue... яка різниця, кнопки ж клікаються.🤯 — Піду швидко спитаю розробників, поки ніхто не бачить!