Angular uygulamalar\u0131, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve genellikle dinamik, etkile\u015fimli kullan\u0131c\u0131 deneyimleri sunar. Bu deneyimlerin \u00e7o\u011fu, HTTP istekleri, zamanlay\u0131c\u0131lar, Promise’ler ve Observable’lar gibi asenkron i\u015flemler arac\u0131l\u0131\u011f\u0131yla elde edilir. Ancak, asenkron kodun test edilmesi, senkron kodun test edilmesine g\u00f6re daha karma\u015f\u0131k ve zorlay\u0131c\u0131d\u0131r. Asenkron i\u015flemlerin tamamlanmas\u0131n\u0131 beklemek, testlerin karars\u0131z olmas\u0131na (flaky tests) veya gere\u011finden uzun s\u00fcrmesine neden olabilir.<\/p>\n
Angular, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in iki g\u00fc\u00e7l\u00fc ara\u00e7 sunar: Bir Angular uygulamas\u0131nda asenkron i\u015flemlerle s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z:<\/p>\n * HTTP \u0130stekleri:<\/strong> Bir API’den veri \u00e7ekmek veya sunucuya veri g\u00f6ndermek. Bu i\u015flemler, kodunuzun y\u00fcr\u00fct\u00fclme s\u0131ras\u0131n\u0131 etkiler ve test ortam\u0131nda beklenen davran\u0131\u015f\u0131n sa\u011flanmas\u0131 i\u00e7in \u00f6zel yakla\u015f\u0131mlar gerektirir. Varsay\u0131lan olarak, bir test blo\u011fu (\u00f6rne\u011fin, * Ger\u00e7ek HTTP \u0130stekleri:<\/strong> Bir servis arac\u0131l\u0131\u011f\u0131yla yap\u0131lan HTTP \u00e7a\u011fr\u0131lar\u0131n\u0131 test ederken, \u00f6zellikle A\u015fa\u011f\u0131daki \u00f6rnekte, bir servisten veri \u00e7eken ve bu veriyi g\u00f6r\u00fcnt\u00fcleyen bir bile\u015fenin nas\u0131l test edilece\u011fini g\u00f6rece\u011fiz.<\/p>\n \u015eimdi bu bile\u015feni Bu \u00f6rnekte: Avantajlar\u0131:<\/strong> Dezavantajlar\u0131:<\/strong> * Zamanlay\u0131c\u0131lar:<\/strong> \u00d6nemli Not:<\/strong> * A\u015fa\u011f\u0131daki \u00f6rneklerde, {{ message }}<\/p>\r\n <\/code>,\r\n})\r\nexport class TimerComponent implements OnInit {\r\n message: string = 'Bekleniyor...';\r\n\r\n ngOnInit(): void {\r\n setTimeout(() => {\r\n this.message = 'Mesaj geldi!';\r\n }, 1000); \/\/ 1 saniye sonra mesaj de\u011fi\u015fecek\r\n }\r\n}<\/code><\/pre>\n Test kodu:<\/p>\n {{ data }}<\/p>\r\n <\/code>,\r\n})\r\nexport class PromiseComponent implements OnInit {\r\n data: string = 'Y\u00fckleniyor...';\r\n\r\n ngOnInit(): void {\r\n this.fetchData().then((result) => {\r\n this.data = result;\r\n });\r\n }\r\n\r\n fetchData(): Promise Test kodu:<\/p>\n {{ value }}<\/p>\r\n <\/code>,\r\n})\r\nexport class ObservableComponent implements OnInit {\r\n value: string = 'Bekleniyor...';\r\n\r\n ngOnInit(): void {\r\n this.getDelayedValue().subscribe((val) => {\r\n this.value = val;\r\n });\r\n }\r\n\r\n getDelayedValue(): Observable Test kodu:<\/p>\n Avantajlar\u0131:<\/strong> Dezavantajlar\u0131:<\/strong> | \u00d6zellik | Genel Kural:<\/strong><\/p>\n * \u00d6nemli Uyar\u0131:<\/strong> Ayn\u0131 1. Her iki arac\u0131n da kendine \u00f6zg\u00fc avantajlar\u0131 ve k\u0131s\u0131tlamalar\u0131 vard\u0131r. Bu nedenle, test etti\u011finiz asenkron i\u015flemin do\u011fas\u0131na g\u00f6re do\u011fru arac\u0131 se\u00e7mek, Angular testlerinizin kalitesini, h\u0131z\u0131n\u0131 ve g\u00fcvenilirli\u011fini art\u0131rman\u0131n anahtar\u0131d\u0131r. Bu makaledeki \u00f6rnekler ve a\u00e7\u0131klamalar, Angular test stratejinizde waitForAsync<\/code> ve fakeAsync<\/code>. Bu makale, her iki arac\u0131n ne oldu\u011funu, ne zaman kullan\u0131laca\u011f\u0131n\u0131, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve Angular test stratejinizde nas\u0131l optimize edece\u011finizi derinlemesine inceleyecektir.<\/p>\nAsenkron \u0130\u015flemler ve Test Etmenin Zorluklar\u0131<\/h3>\n
\n* Zamanlay\u0131c\u0131lar:<\/strong> setTimeout<\/code> veya setInterval<\/code> gibi JavaScript fonksiyonlar\u0131 ile belirli bir s\u00fcre sonra veya d\u00fczenli aral\u0131klarla kod \u00e7al\u0131\u015ft\u0131rmak.
\n* Promise’ler:<\/strong> Asenkron bir i\u015flemin ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z sonucunu temsil eden nesneler.
\n* Observable’lar:<\/strong> RxJS k\u00fct\u00fcphanesinin temelini olu\u015fturan, zamanla yay\u0131lan veri ak\u0131\u015flar\u0131n\u0131 temsil eden g\u00fc\u00e7l\u00fc yap\u0131lar.<\/p>\nit()<\/code> fonksiyonu) i\u00e7indeki kod senkron olarak \u00e7al\u0131\u015f\u0131r. E\u011fer test, asenkron bir i\u015flemin sonucuna ba\u011fl\u0131ysa ve bu i\u015flem tamamlanmadan test bitiyorsa, test ba\u015far\u0131s\u0131z olur veya yanl\u0131\u015f sonu\u00e7lar verir. \u0130\u015fte bu noktada waitForAsync<\/code> ve fakeAsync<\/code> devreye girer.<\/p>\nwaitForAsync Kullan\u0131m\u0131<\/h3>\n
waitForAsync<\/code>, Angular’\u0131n test yard\u0131mc\u0131lar\u0131ndan biridir ve Zone.js ile entegre \u00e7al\u0131\u015farak asenkron i\u015flemlerin tamamlanmas\u0131n\u0131 ger\u00e7ekten<\/em> bekler. \u00d6zellikle ger\u00e7ek zamanl\u0131 asenkron operasyonlar\u0131 (\u00f6rne\u011fin, HTTP istekleri veya karma\u015f\u0131k Observable zincirleri) test ederken idealdir.<\/p>\nwaitForAsync Nedir?<\/h4>\n
waitForAsync<\/code>, bir test blo\u011funun i\u00e7ine sarmalanan asenkron i\u015flemlerin tamamlanmas\u0131n\u0131 beklemek i\u00e7in kullan\u0131lan bir fonksiyondur. Zone.js’in g\u00fcc\u00fcnden yararlanarak, test ortam\u0131nda ba\u015flat\u0131lan t\u00fcm asenkron g\u00f6revlerin (makro g\u00f6revler ve mikro g\u00f6revler dahil) bitmesini izler. Test, t\u00fcm bu g\u00f6revler tamamland\u0131\u011f\u0131nda sona erer.<\/p>\nNe Zaman waitForAsync Kullan\u0131l\u0131r?<\/h4>\n
HttpClientTestingModule<\/code> kullan\u0131yorsan\u0131z.
\n* Karma\u015f\u0131k Observable Zincirleri:<\/strong> delay<\/code>, debounceTime<\/code>, throttleTime<\/code> gibi zaman tabanl\u0131 RxJS operat\u00f6rleri i\u00e7eren veya i\u00e7 i\u00e7e ge\u00e7mi\u015f asenkron ak\u0131\u015flara sahip Observable’lar\u0131 test ederken.
\n* Promise<\/code>‘ler ve async\/await<\/code>:<\/strong> Promise<\/code> tabanl\u0131 kodlar\u0131 veya async\/await<\/code> s\u00f6zdizimi ile yaz\u0131lm\u0131\u015f fonksiyonlar\u0131 test ederken.
\n* D\u0131\u015f K\u00fct\u00fcphaneler:<\/strong> Zone.js taraf\u0131ndan izlenen ve kontrol edilemeyen d\u0131\u015f k\u00fct\u00fcphanelerin asenkron i\u015flemlerini test ederken.<\/p>\nwaitForAsync Nas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
waitForAsync<\/code>, it()<\/code> blo\u011funun callback fonksiyonunu sarmalar. Genellikle async\/await<\/code> ile birlikte kullan\u0131larak daha okunabilir bir kod sa\u011flar. Ayr\u0131ca, fixture.whenStable()<\/code> Promise’ini kullanarak Angular’\u0131n t\u00fcm asenkron i\u015flemleri tamamlamas\u0131n\u0131 bekleyebilirsiniz.<\/p>\nimport { Component, OnInit } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { Observable } from 'rxjs';\r\nimport { delay } from 'rxjs\/operators';\r\n\r\ninterface Item {\r\n id: number;\r\n name: string;\r\n}\r\n\r\n@Component({\r\n selector: 'app-data',\r\n template: \r\n Veri Listesi<\/h2>\r\n
\r\n
waitForAsync<\/code> kullanarak test edelim:<\/p>\nimport { ComponentFixture, TestBed, waitForAsync } from '@angular\/core\/testing';\r\nimport { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing';\r\nimport { DataComponent } from '.\/data.component';\r\nimport { NO_ERRORS_SCHEMA } from '@angular\/core';\r\n\r\ndescribe('DataComponent with waitForAsync', () => {\r\n let component: DataComponent;\r\n let fixture: ComponentFixture
\n* beforeEach(waitForAsync(...))<\/code> kullanarak test mod\u00fcl\u00fcn\u00fcn asenkron olarak yap\u0131land\u0131r\u0131lmas\u0131n\u0131 bekliyoruz.
\n* it('...', waitForAsync(async () => { ... }))<\/code> ile test blo\u011funu waitForAsync<\/code> i\u00e7ine al\u0131yoruz. async<\/code> anahtar kelimesi, await<\/code> kullanmam\u0131z\u0131 sa\u011flar.
\n* httpTestingController<\/code> ile HTTP iste\u011fini mock’luyor ve yan\u0131t\u0131n\u0131 kontrol ediyoruz.
\n* req.flush(mockItems)<\/code> ile servisten gelen yan\u0131t\u0131 sim\u00fcle ediyoruz.
\n* await fixture.whenStable()<\/code> kritik bir ad\u0131md\u0131r. Bu, Angular’\u0131n Zone.js taraf\u0131ndan izlenen t\u00fcm asenkron g\u00f6revlerinin (\u00f6rne\u011fin, Observable’daki delay<\/code> operat\u00f6r\u00fc) tamamlanmas\u0131n\u0131 bekler. Bu olmadan, delay<\/code> s\u00fcresi bitmeden test devam edebilir ve yanl\u0131\u015f sonu\u00e7lar verebilir.<\/p>\nwaitForAsync Avantajlar\u0131 ve Dezavantajlar\u0131<\/h4>\n
\n* Ger\u00e7ek\u00e7i Test Ortam\u0131:<\/strong> Asenkron kodunuzu ger\u00e7ek \u00e7al\u0131\u015fma ortam\u0131na en yak\u0131n \u015fekilde test eder.
\n* G\u00fcvenilirlik:<\/strong> Zone.js sayesinde t\u00fcm asenkron i\u015flemlerin tamamland\u0131\u011f\u0131ndan emin olursunuz, bu da “flaky” testleri azalt\u0131r.
\n* Karma\u015f\u0131k Senaryolar:<\/strong> fakeAsync<\/code>‘in ba\u015fa \u00e7\u0131kamad\u0131\u011f\u0131 (\u00f6rne\u011fin, Zone.js taraf\u0131ndan izlenmeyen d\u0131\u015f k\u00fct\u00fcphane asenkron i\u015flemleri) senaryolar i\u00e7in uygundur.<\/p>\n
\n* Daha Yava\u015f Testler:<\/strong> Asenkron i\u015flemlerin ger\u00e7ek zamanl\u0131 olarak tamamlanmas\u0131n\u0131 bekledi\u011fi i\u00e7in testler daha uzun s\u00fcrebilir.
\n* Hata Ay\u0131klama:<\/strong> Zaman gecikmeleri nedeniyle hata ay\u0131klama bazen daha zor olabilir.<\/p>\nfakeAsync Kullan\u0131m\u0131<\/h3>\n
fakeAsync<\/code>, Angular testlerinde zaman\u0131 manip\u00fcle etmenizi sa\u011flayan g\u00fc\u00e7l\u00fc bir test yard\u0131mc\u0131 arac\u0131d\u0131r. Asenkron kodun senkron bir \u015fekilde \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flayarak testleri \u00e7ok daha h\u0131zl\u0131 ve deterministik hale getirir.<\/p>\nfakeAsync Nedir?<\/h4>\n
fakeAsync<\/code>, Zone.js’in bir par\u00e7as\u0131 olan AsyncTestZone<\/code>‘u kullanarak, test blo\u011fu i\u00e7indeki asenkron g\u00f6revleri (zamanlay\u0131c\u0131lar, Promise’ler, baz\u0131 Observable’lar) yakalar ve bunlar\u0131 ger\u00e7ek zaman\u0131 ilerletmeden, manuel olarak kontrol etmenizi sa\u011flar. Bu sayede, normalde milisaniyeler veya saniyeler s\u00fcrecek i\u015flemler an\u0131nda tamamlanabilir.<\/p>\nNe Zaman fakeAsync Kullan\u0131l\u0131r?<\/h4>\n
setTimeout<\/code>, setInterval<\/code> gibi JavaScript zamanlay\u0131c\u0131lar\u0131n\u0131 i\u00e7eren kodlar\u0131 test ederken.
\n* Promise’ler:<\/strong> Promise.resolve()<\/code>, Promise.reject()<\/code> veya new Promise()<\/code> ile olu\u015fturulan Promise’leri test ederken.
\n* Basit Observable’lar:<\/strong> RxJS’in of()<\/code>, from()<\/code>, timer()<\/code>, delay()<\/code> gibi operat\u00f6rleriyle olu\u015fturulan ve Zone.js taraf\u0131ndan kontrol edilebilen Observable’lar\u0131 test ederken.
\n* debounceTime<\/code>, throttleTime<\/code> gibi Zaman Tabanl\u0131 RxJS Operat\u00f6rleri:<\/strong> Bu operat\u00f6rlerin davran\u0131\u015f\u0131n\u0131 h\u0131zl\u0131ca test etmek i\u00e7in idealdir.
\n* Senkron Hale Getirilmi\u015f Asenkron \u0130\u015flemler:<\/strong> Ger\u00e7ek HTTP istekleri yerine HttpClientTestingModule<\/code> ile mock’lanm\u0131\u015f HTTP yan\u0131tlar\u0131n\u0131 i\u00e7eren senaryolarda da kullan\u0131labilir, ancak genellikle waitForAsync<\/code> daha do\u011fal bir uyum sa\u011flar.<\/p>\nfakeAsync<\/code> i\u00e7inde ger\u00e7ek bir HTTP iste\u011fi yapmaya \u00e7al\u0131\u015f\u0131rsan\u0131z (yani HttpClientTestingModule<\/code> kullanmadan), XMLHttpRequest<\/code> veya fetch<\/code> gibi taray\u0131c\u0131 API’leri Zone.js taraf\u0131ndan yakalanamad\u0131\u011f\u0131 i\u00e7in bir hata al\u0131rs\u0131n\u0131z. Bu nedenle, fakeAsync<\/code> HTTP isteklerini ger\u00e7ekten<\/em> yapmayan, mock’lanm\u0131\u015f senaryolar i\u00e7in daha uygundur.<\/p>\nfakeAsync Nas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
fakeAsync<\/code>, it()<\/code> blo\u011funun callback fonksiyonunu sarmalar. \u0130\u00e7erisinde tick()<\/code> ve flush()<\/code> ad\u0131nda iki yard\u0131mc\u0131 fonksiyon bulunur:<\/p>\ntick(millis?: number)<\/code>: Test ortam\u0131ndaki zaman\u0131 belirtilen milisaniye kadar ileri sarar. Bu, setTimeout<\/code> veya setInterval<\/code> gibi zamanlay\u0131c\u0131lar\u0131n tetiklenmesini sa\u011flar. Varsay\u0131lan olarak 0 milisaniye ilerletir.
\n* flush()<\/code>: T\u00fcm bekleyen mikro g\u00f6revleri (Promise’ler ve baz\u0131 Observable abonelikleri) an\u0131nda tamamlar. tick(0)<\/code> ile benzerdir ancak Promise’ler i\u00e7in daha a\u00e7\u0131klay\u0131c\u0131d\u0131r.<\/p>\nfakeAsync<\/code>‘in farkl\u0131 asenkron senaryolarda nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6rece\u011fiz.<\/p>\n\u00d6rnek 1: setTimeout ile Zamanlay\u0131c\u0131 Testi<\/h4>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-timer',\r\n template: \r\n Zamanlay\u0131c\u0131<\/h2>\r\n
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular\/core\/testing';\r\nimport { TimerComponent } from '.\/timer.component';\r\nimport { NO_ERRORS_SCHEMA } from '@angular\/core';\r\n\r\ndescribe('TimerComponent with fakeAsync', () => {\r\n let component: TimerComponent;\r\n let fixture: ComponentFixturemessage<\/code> \u00f6zelli\u011fi g\u00fcncellenmeyecektir\r\n \/\/ \u00e7\u00fcnk\u00fc bile\u015fen zaten yok edilmi\u015ftir.\r\n expect(component.message).toBe('Bekleniyor...');\r\n }));\r\n});<\/code><\/pre>\n\u00d6rnek 2: Promise Testi<\/h4>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-promise',\r\n template: \r\n Promise \u00d6rne\u011fi<\/h2>\r\n
import { ComponentFixture, TestBed, fakeAsync, flush } from '@angular\/core\/testing';\r\nimport { PromiseComponent } from '.\/promise.component';\r\nimport { NO_ERRORS_SCHEMA } from '@angular\/core';\r\n\r\ndescribe('PromiseComponent with fakeAsync', () => {\r\n let component: PromiseComponent;\r\n let fixture: ComponentFixture\u00d6rnek 3: Observable (delay operat\u00f6r\u00fc ile) Testi<\/h4>\n
import { Component, OnInit } from '@angular\/core';\r\nimport { Observable, of } from 'rxjs';\r\nimport { delay } from 'rxjs\/operators';\r\n\r\n@Component({\r\n selector: 'app-observable',\r\n template: \r\n Observable \u00d6rne\u011fi<\/h2>\r\n
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular\/core\/testing';\r\nimport { ObservableComponent } from '.\/observable.component';\r\nimport { NO_ERRORS_SCHEMA } from '@angular\/core';\r\n\r\ndescribe('ObservableComponent with fakeAsync', () => {\r\n let component: ObservableComponent;\r\n let fixture: ComponentFixturefakeAsync Avantajlar\u0131 ve Dezavantajlar\u0131<\/h4>\n
\n* H\u0131zl\u0131 Testler:<\/strong> Asenkron i\u015flemlerin ger\u00e7ek zamanl\u0131 tamamlanmas\u0131n\u0131 beklemedi\u011fi i\u00e7in testler \u00e7ok h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131r.
\n* Deterministik:<\/strong> Zaman\u0131 manuel olarak kontrol etti\u011finiz i\u00e7in test sonu\u00e7lar\u0131 her zaman ayn\u0131d\u0131r.
\n* Kolay Hata Ay\u0131klama:<\/strong> Zaman gecikmeleri ortadan kalkt\u0131\u011f\u0131 i\u00e7in hata ay\u0131klama daha kolayd\u0131r.
\n* Okunabilirlik:<\/strong> async\/await<\/code> benzeri senkron bir ak\u0131\u015f sa\u011flar.<\/p>\n
\n* K\u0131s\u0131tlamalar:<\/strong> Zone.js taraf\u0131ndan yakalanamayan (\u00f6rne\u011fin, ger\u00e7ek HTTP istekleri, Web Workers) asenkron i\u015flemleri test edemez. Bu durumlarda bir hata f\u0131rlat\u0131r.
\n* Ger\u00e7ek\u00e7ilik Eksikli\u011fi:<\/strong> Zaman\u0131 manip\u00fcle etti\u011fi i\u00e7in ger\u00e7ek \u00e7al\u0131\u015fma ortam\u0131n\u0131n baz\u0131 n\u00fcanslar\u0131n\u0131 yans\u0131tmayabilir.
\n* tick()<\/code> ve flush()<\/code> Y\u00f6netimi:<\/strong> Karma\u015f\u0131k asenkron ak\u0131\u015flarda tick()<\/code> ve flush()<\/code>‘\u0131 do\u011fru yerlerde kullanmak bazen zor olabilir.<\/p>\nwaitForAsync ve fakeAsync Kar\u015f\u0131la\u015ft\u0131rmas\u0131 ve Ne Zaman Hangisini Se\u00e7meli?<\/h3>\n
waitForAsync<\/code> | fakeAsync<\/code> |
\n| :—————- | :————————————————– | :——————————————————– |
\n| \u00c7al\u0131\u015fma Prensibi<\/strong> | Zone.js ile ger\u00e7ek asenkron g\u00f6revlerin tamamlanmas\u0131n\u0131 bekler. | Zone.js ile asenkron g\u00f6revleri yakalar ve zaman\u0131 manuel manip\u00fcle eder. |
\n| Test H\u0131z\u0131<\/strong> | Daha yava\u015f (ger\u00e7ek zaman gecikmeleri nedeniyle). | \u00c7ok h\u0131zl\u0131 (zaman\u0131 atlayarak). |
\n| Ger\u00e7ek\u00e7ilik<\/strong> | Y\u00fcksek (ger\u00e7ek \u00e7al\u0131\u015fma ortam\u0131na yak\u0131n). | D\u00fc\u015f\u00fck (zaman manip\u00fclasyonu nedeniyle). |
\n| Kullan\u0131m Alan\u0131<\/strong> | Ger\u00e7ek HTTP istekleri, karma\u015f\u0131k RxJS ak\u0131\u015flar\u0131, d\u0131\u015f k\u00fct\u00fcphanelerin asenkron i\u015flemleri. | setTimeout<\/code>, setInterval<\/code>, Promise’ler, delay<\/code>, debounceTime<\/code> gibi RxJS operat\u00f6rleri. |
\n| Hata Yakalama<\/strong> | Ger\u00e7ek asenkron hatalar\u0131 yakalar. | Zone.js<\/code> taraf\u0131ndan yakalanamayan asenkron i\u015flemlerde hata verir. |
\n| Yard\u0131mc\u0131 Fonksiyonlar<\/strong> | fixture.whenStable()<\/code>, async\/await<\/code> | tick()<\/code>, flush()<\/code> |<\/p>\nfakeAsync<\/code>‘i tercih edin:<\/strong> M\u00fcmk\u00fcn oldu\u011funca fakeAsync<\/code> kullanmaya \u00e7al\u0131\u015f\u0131n. Testlerinizin daha h\u0131zl\u0131 ve deterministik olmas\u0131n\u0131 sa\u011flar. \u00d6zellikle zamanlay\u0131c\u0131lar, Promise’ler ve basit Observable’lar i\u00e7in harikad\u0131r.
\n* waitForAsync<\/code>‘e ba\u015fvurun:<\/strong> fakeAsync<\/code>‘in k\u0131s\u0131tlamalar\u0131na tak\u0131ld\u0131\u011f\u0131n\u0131zda veya ger\u00e7ek HTTP istekleri gibi Zone.js’in kontrol edemedi\u011fi d\u0131\u015f asenkron i\u015flemleri test etmeniz gerekti\u011finde waitForAsync<\/code> kullan\u0131n. HttpClientTestingModule<\/code> ile HTTP isteklerini mock’lasan\u0131z bile, delay<\/code> gibi operat\u00f6rler kullan\u0131yorsan\u0131z waitForAsync<\/code> ve fixture.whenStable()<\/code> kombinasyonu daha g\u00fcvenli bir se\u00e7im olabilir.<\/p>\nit<\/code> blo\u011fu i\u00e7inde waitForAsync<\/code> ve fakeAsync<\/code>‘i birlikte kullanmaya \u00e7al\u0131\u015fmay\u0131n. Bu, \u00f6ng\u00f6r\u00fclemeyen davran\u0131\u015flara ve hatalara yol a\u00e7acakt\u0131r. Her test blo\u011fu i\u00e7in tek bir asenkron test stratejisi se\u00e7melisiniz.<\/p>\nEn \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
detectChanges()<\/code>‘\u0131 Unutmay\u0131n:<\/strong> Angular, DOM’u otomatik olarak g\u00fcncellemez. Asenkron bir i\u015flem tamamland\u0131ktan sonra bile\u015fenin \u015fablonunun g\u00fcncellenmesi gerekiyorsa, fixture.detectChanges()<\/code>‘\u0131 tekrar \u00e7a\u011f\u0131rmay\u0131 unutmay\u0131n.
\n2. TestBed.inject()<\/code> Kullan\u0131n:<\/strong> Servisleri veya di\u011fer ba\u011f\u0131ml\u0131l\u0131klar\u0131 testlerde almak i\u00e7in TestBed.get()<\/code> yerine TestBed.inject()<\/code> kullan\u0131n. TestBed.get()<\/code> eski bir y\u00f6ntemdir ve gelecekte kald\u0131r\u0131labilir.
\n3. Temizleme \u0130\u015flemleri (afterEach<\/code>):<\/strong> \u00d6zellikle mock HTTP istekleri kullan\u0131rken, httpTestingController.verify()<\/code>‘yi afterEach<\/code> blo\u011funda \u00e7a\u011f\u0131rarak bekleyen veya yanl\u0131\u015fl\u0131kla yap\u0131lan HTTP isteklerinin olmad\u0131\u011f\u0131n\u0131 do\u011frulay\u0131n. Bu, testlerinizin izole kalmas\u0131na yard\u0131mc\u0131 olur.
\n4. Abonelikleri Y\u00f6netin:<\/strong> Bile\u015fenlerinizde Observable’lara abone oluyorsan\u0131z, haf\u0131za s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in ngOnDestroy<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc kancas\u0131nda abonelikleri iptal etti\u011finizden emin olun (.unsubscribe()<\/code>). Testlerinizde de bu senaryoyu kontrol etmek isteyebilirsiniz.
\n5. Testleri Odaklay\u0131n:<\/strong> Her testin tek bir \u015feyi test etmesini sa\u011flay\u0131n. Karma\u015f\u0131k asenkron ak\u0131\u015flar\u0131 k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara ay\u0131r\u0131n.
\n6. Hata Senaryolar\u0131n\u0131 Test Edin:<\/strong> Ba\u015far\u0131l\u0131 asenkron i\u015flemler kadar, hata durumlar\u0131n\u0131 da test edin. \u00d6rne\u011fin, bir HTTP iste\u011finin ba\u015far\u0131s\u0131z olmas\u0131 durumunda bile\u015fenin nas\u0131l davrand\u0131\u011f\u0131n\u0131 kontrol edin.
\n7. async\/await<\/code> ile waitForAsync<\/code>:<\/strong> waitForAsync<\/code> ile async\/await<\/code> kullanmak, Promise tabanl\u0131 veya Observable tabanl\u0131 asenkron kodunuzu daha okunabilir ve y\u00f6netilebilir hale getirir. await fixture.whenStable()<\/code> kilit noktad\u0131r.<\/p>\nSonu\u00e7<\/h3>\n
waitForAsync<\/code> ve fakeAsync<\/code>, Angular geli\u015ftiricilerinin asenkron kodlar\u0131n\u0131 g\u00fcvenilir ve verimli bir \u015fekilde test etmeleri i\u00e7in vazge\u00e7ilmez ara\u00e7lard\u0131r. fakeAsync<\/code>, zamanlay\u0131c\u0131lar ve Promise’ler gibi i\u00e7 asenkronluklar\u0131 h\u0131zl\u0131 ve deterministik bir \u015fekilde test etmek i\u00e7in m\u00fckemmeldir. waitForAsync<\/code> ise ger\u00e7ek HTTP istekleri ve Zone.js taraf\u0131ndan izlenen karma\u015f\u0131k asenkron ak\u0131\u015flar i\u00e7in daha ger\u00e7ek\u00e7i bir test ortam\u0131 sunar.<\/p>\nwaitForAsync<\/code> ve fakeAsync<\/code>‘i ustaca kullanman\u0131z i\u00e7in sa\u011flam bir temel sa\u011flam\u0131\u015ft\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Testlerinde Asenkron \u0130\u015flemleri Y\u00f6netmek: waitForAsync ve fakeAsync Kullan\u0131m\u0131\nAngular uygulamalar\u0131, modern web geli\u015ftirmenin temel ta\u015f","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-30325","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n