Component testing — dasturiy tizimning alohida komponentini uning tashqi chegaralari nazorat qilingan holda tekshirish usulidir. Frontendda bu button, forma yoki murakkab UI widgetni browserga yaqin muhitda render qilishni; backendda esa service yoki modulni dependency adapterlari bilan sinashni anglatishi mumkin. Componentning aniq chegarasi arxitekturaga bog‘liq.
Test obyekti
Unit test odatda funksiya yoki classning kichik mantiqiy birligini tekshiradi. Component test bir nechta ichki birlikning hamkorligini ko‘rishi mumkin, lekin butun tizim va barcha haqiqiy tashqi xizmatni ishga tushirmaydi. End-to-end test esa foydalanuvchi oqimini deploy qilingan qatlamlar bo‘ylab tekshiradi.
Frontend component testi real DOM yoki browserda render, event propagation, focus va stylega bog‘liq holatni ko‘radi. jsdom tez bo‘lsa-da layout va ayrim browser APIlarni to‘liq amalga oshirmaydi. Real browser component runneri rendering aniqligini oshiradi, ammo ko‘proq resurs talab qiladi.
Dependency chegarasi
Component API client, clock, storage yoki context providerga bog‘liq bo‘lsa test nazoratli implementation beradi. Mock faqat kerakli tashqi chegarani almashtiradi. Componentning ichki metodlarini mock qilish testni implementationga bog‘lab, refactoringda keraksiz buzilish keltiradi.
Network layer mock server orqali ishlatilsa request method, path va body ham tekshiriladi. Juda soddalashtirilgan function stub real serialization, loading va error xatti-harakatini chetlab o‘tishi mumkin. Contractga mos fixturelar API schema o‘zgarganda yangilanadi.
Foydalanuvchi amali
UI test elementni CSS class bilan emas, role, label va ko‘rinadigan nom bilan topishi mumkin. Click va keyboard hodisasi foydalanuvchi interaksiyasiga yaqin usulda yuboriladi. Bu accessibility semantikasidagi xatolarni ham ochadi.
Test initial render, user action va kuzatiladigan natijani ajratadi. Internal state qiymatini bevosita o‘qish o‘rniga ekrandagi matn, disabled holat yoki chiqarilgan event tekshiriladi. Async update uchun retry assertion ishlatiladi, fixed sleep emas.
Holatlar matritsasi
Asosiy holatlar empty, loading, success, validation error, permission denial va server failuredan iborat bo‘lishi mumkin. Barcha prop kombinatsiyasini qo‘lda ko‘paytirish o‘rniga biznesga ta’sir qiluvchi chegaralar tanlanadi. Long text, RTL, keyboard va narrow viewport UI componentning yashirin nuqsonlarini topadi.
Visual snapshot layout regressiyasini, semantic assertion esa aniq xatti-harakatni tekshiradi. Katta DOM snapshot kichik markup o‘zgarishida shovqin yaratadi va reviewni mexanik tasdiqqa aylantiradi. Tor, ma’noli snapshot ishlatiladi.
Izolyatsiya va tezlik
Har test yangi render va tozalangan global holat bilan boshlanadi. Timer, event listener va network handler yakunda olib tashlanadi. Shared singleton yoki cache parallel testlarga ta’sir qilmasligi kerak.
Component test end-to-end testdan tezroq bo‘lgani uchun ko‘proq variantni qamraydi, lekin router, real backend va deployment konfiguratsiyasi integratsiyasini kafolatlamaydi. Test qatlamlari bir-birini to‘ldiradi.
Framework lifecyclei
Reactive framework state update ni batch yoki microtaskda bajarishi mumkin. Test actiondan keyin frameworkning tavsiya etilgan async utilitysi orqali DOMni kutadi. State setter chaqirilgan zahoti markup o‘zgargan deb taxmin qilish race yaratadi. Unhandled promise rejection runner tomonidan failurega aylantiriladi.
Component global CSS, theme va localization providerga bog‘liq bo‘lsa test wrapper production hierarchy ning zarur qismini beradi. Barcha providerlarni ko‘r-ko‘rona qo‘shish esa har testni katta integration testga aylantiradi. Minimal wrapper dependency kontraktini ko‘rinadigan saqlaydi.
Bog‘liq tushunchalar
Unit testing, Integration testing, End-to-end testing, Test double, DOM, Visual regression testing, Test isolation