Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Angular 22'de Test Altyapısı: Vitest, unit-test Builder'ı, jsdom ve Neyi Hangi Seviyede Test Etmeli?
Angular 22'nin unit-test builder'ı Vitest'i isolation kapalı çalıştırır; bu yüzden module'de tutulan state, worker sayısına göre test dosyaları arasında taşınabilir ve lokalde yeşil olan suite CI'da kırmızıya döner. Bu yazıda Bookstore'un Angular istemcisinde test seviyelerini ve test haritasını çıkarıyor, angular.json test target'ını, setupFiles, providersFile ve runnerConfig'i kuruyor, jsdom ile happy-dom'u ölçüyor ve testleri tek tek çalıştırıp debug ediyoruz.
Angular'da Service, Pipe, Signal ve Resource Testleri: TestBed.inject, HttpTestingController ve Fake Timer'lar
httpResource durumunu hemen loading gösterir ama isteği bir effect içinde gönderir; testte isteği görmek için önce TestBed.tick(), cevaptan sonra değeri okumak için whenStable() gerekir. Bookstore'un CatalogService'i, PricePipe'ı ve RecentlyViewed'ı üzerinden runInInjectionContext'i, effect testini, HttpTestingController ile iptal ve hata yolunu, debounced() için fake timer'ları ve Angular 22'deki resource zamanlama değişikliğini gerçek koşularla gösteriyoruz.
Angular Component Testleri: setInput, output, Zoneless'ta whenStable, @defer ve Host Component
Angular 22'de componentInstance üzerinden değer atayıp detectChanges çağıran eski testler kalır, çünkü varsayılan OnPush ve zoneless fixture yalnız Angular'a haber veren değişiklikleri işler; değeri setInput ile vermek ve DOM'u whenStable'dan sonra okumak gerekir. Bookstore'un BookCard, QuantityInput, CartSummary ve CatalogPage component'leriyle output, model(), content projection, @defer ve getLastFixture testlerini gerçek koşularla anlatıyoruz.
Angular Testing Library ile Kullanıcı Gibi Test Etmek: render, Role Sorguları ve user-event
Kullanıcı gibi test etmek, element'i rol ve etiketle bulup kullanıcının yaptığı sırayla etkileşmek demek: fireEvent.input ile yazılan test, alanın blur'da touched olduğunu atladığı için kaldı, user-event ile yazılan geçti. Bookstore'un Signal Forms checkout formunda render(), sorgu önceliği, aria-describedby ile bağlanan hata mesajları, findBy ile asenkron içerik, routes ile navigasyon ve aynı testin TestBed ile karşılaştırması gerçek koşularla.
Angular Testinde Bağımlılıkları Taklit Etmek: Provider Override, vi.fn, ng-mocks, MSW ve RouterTestingHarness
Process dışına çıkan HTTP, zaman ve tarayıcı API'lerini taklit et, CartStore ve router gibi ucuz bağımlılıkları gerçek bırak: her şeyi mock'layan bir test, sepeti siparişten önce boşaltan bir hatayı kaçırdı. Bookstore'un checkout ve sipariş detay sayfalarında provider override, vi.fn, vi.spyOn, elle yazılmış fake, ng-mocks ile child component, MSW 3 ile network seviyesinde taklit ve gerçek route'larla RouterTestingHarness testlerini gerçek koşularla gösteriyoruz.
Component Harness'ları: CDK Harness Kullanmak, Kendi Harness'ını Yazmak ve Testleri Markup'tan Bağımsızlaştırmak
Component harness, test ile DOM arasına bir API koyar: markup değişince testler değil yalnız harness değişir. Bookstore'da Angular Material'ın select ve dialog harness'larını, documentRootLoader'ı ve animasyon ayarını, RatingInput için HarnessPredicate'li kendi harness'ımızı ve harness ile Testing Library'yi ne zaman seçeceğimizi gerçek koşularla gösteriyoruz.
Vitest Browser Mode: Angular Testlerini Gerçek Chromium, Firefox ve WebKit'te Çalıştırmak
Layout'a bağlı davranışları (IntersectionObserver, @defer on viewport, sticky konum, görünüm) jsdom değil, Vitest browser mode ile gerçek tarayıcıda test et. Bookstore'da jsdom testi geçerken geniş ekranda 30 kitabın yalnız 24'ünü yükleyen sonsuz kaydırma hatasını, ayrı test target'ı, MSW worker'ı, toMatchScreenshot ve Chromium/WebKit koşularıyla gösteriyoruz.
Playwright ile Angular E2E: Locator'lar, Auto-Waiting, Network Mocking, storageState ve Trace Viewer
Angular arayüzünü backend olmadan E2E test etmek için Playwright'ı ng e2e'ye bağla, API'yi otomatik bir page.route fixture'ıyla taklit et ve karşılanmayan her isteği hata say; yoksa geliştirme sunucusu index.html döndürür. Bookstore'un arama, sepet ve checkout akışında rol tabanlı locator'ları, storageState ile tek seferlik girişi, trace'i ve flaky test kaynaklarını gerçek koşularla gösteriyoruz.
Karma ve Jasmine'den Vitest'e Taşımak ve Angular 12'den 22'ye Testte Değişenler
Karma'dan Vitest'e geçiş iki adımda yapılır: migrate-karma-to-vitest build ayarlarını, refactor-jasmine-vitest test kodunu çevirir; ama raporun temiz olması testlerin doğru olduğunu göstermez. Bookstore'un eski istemcisinde done callback'inin kaldırılmasıyla kaybolan kontrolü, derlenmeyen mock tiplerini, fakeAsync için iki yolu, Karma ile yan yana geçişi ve Angular 12'den 22'ye testte değişenleri gerçek koşularla gösteriyoruz.