Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme
Reaktif ve eş zamanlı olmayan davranışı test edin
Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Asıl Zor Kısım: Testlerde Eşzamansızlık
Gerçek bileşenler eşzamansız işler gerçekleştirir: zamanlayıcılar, vaatler, HTTP ve gecikmeli girdiler. Doğrulamaların eşzamansız iş tamamlandıktan sonra çalışması için testlerin zamanı denetlemesi gerekir. Angular, zamanı belirleyici biçimde denetlemek için size fakeAsync, tick ve flush araçlarını sunar.
Bir Signal'ı Test Etme
Bir signal, bir işlev gibi okunur. Test etmek kolaydır: signal'ı çağırıp değeri doğrulayın; ardından değeri güncelleyip tekrar doğrulayın.
it('increments the count signal', () => {
const fixture = TestBed.createComponent(CounterComponent);
const c = fixture.componentInstance;
expect(c.count()).toBe(0);
c.increment();
expect(c.count()).toBe(1);
});Computed Signal'lar Otomatik Olarak Güncellenir
Bir computed, bağımlılıkları değiştiğinde yeniden hesaplanır. Testte kaynak signal'ı değiştirip ardından computed değerini okursunuz; elle yeniden hesaplama yapmanız gerekmez.
expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)Signal'lar ve DOM
Bir signal değişikliğinin şablona yansıdığını görmek için, onu güncelledikten sonra diğer tüm durumlarda olduğu gibi detectChanges() çağırın.
c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');fakeAsync ile Tanışma
Sahte bir zaman dilimine girmek için bir testi fakeAsync içine sarın. Zamanlayıcılar ve mikro görevler çalışmak yerine kuyruğa alınır ve bunları elle ilerletirsiniz. Bu, eşzamansız testleri eşzamanlı ve güvenilir hâle getirir.
import { fakeAsync, tick } from '@angular/core/testing';
it('loads after delay', fakeAsync(() => {
// timers are now under your control
}));tick ile Zamanı İlerletme
tick(ms), sanal saati ileri alarak bu zaman aralığında planlanmış tüm zamanlayıcıları çalıştırır.
it('fires after 1s', fakeAsync(() => {
let done = false;
setTimeout(() => (done = true), 1000);
expect(done).toBe(false);
tick(1000);
expect(done).toBe(true);
}));Bekleyen Tüm Zamanlayıcılar İçin flush
Kesin gecikmeyi bilmiyorsanız flush(), kuyruk boşalana kadar bekleyen tüm makro görevleri tüketir.
import { fakeAsync, flush } from '@angular/core/testing';
it('completes debounced search', fakeAsync(() => {
component.search('ang');
flush(); // run all timers (e.g. debounceTime)
expect(component.results().length).toBeGreaterThan(0);
}));Promise'leri fakeAsync ile Test Etme
Promise'ler mikro görevler olarak çözülür. fakeAsync içinde, doğrulama yapmadan önce bunları tamamlamak için flushMicrotasks() (veya tick()) çağırın.
import { fakeAsync, flushMicrotasks } from '@angular/core/testing';
it('resolves promise', fakeAsync(() => {
let v: number | undefined;
Promise.resolve(42).then((n) => (v = n));
flushMicrotasks();
expect(v).toBe(42);
}));async / waitForAsync Yardımcısı
Zamanı denetlemeden gerçek eşzamansız işlemlerin tamamlanmasını beklemesi gereken testlerde gövdeyi waitForAsync içine sarın ve fixture.whenStable() kullanın.
import { waitForAsync } from '@angular/core/testing';
it('settles', waitForAsync(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.componentInstance.ready()).toBe(true);
});
}));effect() Test Etme
Bir effect, okuduğu signal'lar değiştikten sonra eşzamansız olarak çalışır. Sonucunu gözlemlemek için değişiklik algılamayı (veya flush'ı) çalıştırarak effect'in yürütülmesini sağlayın, ardından yan etkiyi doğrulayın.
c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);Yaygın Tuzak: Artakalan Zamanlayıcılar
Bir fakeAsync testi hâlâ kuyruğa alınmış zamanlayıcılarla sona ererse Angular bir hata fırlatır. Sanal saat test tamamlandığında boş olsun diye her zaman bunları tick/flush ile çalıştırın veya aralıkları ngOnDestroy içinde temizleyin.
Hızlı Kontrol
Bilinen bir gecikme için doğru aracı seçin.
Özet
Signal'lar basit işlevler gibi test edilir (okumak için çağırın, güncellemek için set kullanın, DOM için detectChanges çağırın). Eşzamansız işlemler için fakeAsync, tick ile ilerlettiğiniz, flush ile tükettiğiniz ve promise'leri flushMicrotasks ile tamamladığınız bir sanal saat sağlar. Zamanlayıcıları asla beklemede bırakmayın.
Sıkça Sorulan Sorular
“Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme” dersi ücretsiz mi?
Evet — “Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme” dersinde ne öğreneceğim?
Reaktif ve eş zamanlı olmayan davranışı test edin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- TestBed ve Bileşen Tesisleri
- Girdileri, Çıktıları ve DOM'yi Test Etme
- Hizmetleri ve Bağımlılıkları Taklit Etme
- Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme