Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
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.
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.
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.
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 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'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 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.
TDD'nin Sınırları: "Is TDD Dead?" Tartışması, Araştırmalar, Ne Zaman TDD Yapmamalı ve AI Agent'larla TDD
TDD bir ritüel değil bir takastır: araştırmalar küçük bir kalite artışı ve karışık üretkenlik sonuçları gösteriyor, faydanın test-first sırasından çok kısa ve düzenli adımlardan gelebileceğini söylüyor. 2014'teki "Is TDD Dead?" tartışmasını, TDD'nin zayıf kaldığı spike, UI ve performans gibi yerleri, AI coding agent'larının testleri atlama ve gevşetme eğilimine karşı kuralları ve bunu yakalayan bir CI adımını gerçek çıktıyla ele alıyoruz.
Bug Fix ve Legacy Kodda TDD: Önce Kırmızı Test, Characterization ve Sprout ile Yeni Kod
Bug düzeltirken TDD önce hatayı en düşük doğru seviyede yeniden üreten kırmızı bir testle başlar; testi olmayan legacy kodda ise önce characterization testlerle bugünkü davranış kaydedilir, yeni kural ayrı bir sprout'ta test-first büyütülüp eskiye tek satırla bağlanır. Testsiz bir CheckoutService'te bug'ı kaydetmiş bir characterization testin düzeltmeden sonra neden kırmızıya döndüğünü ve iki test türünün farkını gerçek çıktılarla görüyoruz.
Angular'da TDD: Vitest ve Signal Tabanlı Component'i Test-first Geliştirmek
Angular'da TDD'ye component'ten değil saf TypeScript fonksiyonundan başlamak testleri hızlı, component'i ince tutar. Angular 22 ve Vitest ile sepet toplamlarını kayan nokta sürprizini yakalayarak, signal input'lu CartSummary component'ini whenStable ve setInput ile, HttpClient service'ini provideHttpClientTesting ile isteği önce yazarak geliştiriyor; zoneless projede fakeAsync'in neden çalışmadığını gerçek çıktıyla görüyoruz.
Outside-in TDD: Double Loop, Acceptance Test'ten Domain'e ve London ile Classical Okulu Pratikte
Outside-in TDD, özellik bitene kadar kırmızı kalan bir acceptance test'le dış döngüyü, onu geçirecek parçaları büyüten unit test döngüleriyle iç döngüyü kurar. POST /api/cart/{id}/coupon endpoint'ini WebApplicationFactory ile walking skeleton'dan başlatıp mock'larla collaborator keşfediyor, aynı handler'ı classical yolla da test ediyor ve davranışı değiştirmeyen bir refactor'da hangi testlerin kırıldığını gerçek çıktıyla karşılaştırıyoruz.
Kata'larla TDD Pratiği: String Calculator, Bowling Game ve Bilinçli Tekrar
Kata, cevabı bilinen küçük bir problemi defalarca çözerek TDD ritmini bilinçli tekrarla geliştirmektir; başarı ölçütü bitirmek değil adım kalitesidir. Coding dojo, randori ve ping-pong formatlarını, String Calculator'ı C# ve xUnit v3 Theory ile, Bowling Game'i TypeScript ve Vitest ile çözerken test list'in evrimini, kritik karar anlarını ve kata'yı zorlaştıran varyasyonları gerçek çıktılarla görüyoruz.