Girdileri, Çıktıları ve DOM'yi Test Etme
Görüntülenen çıktıyı ve olayları doğrulayın
Girdileri, Çıktıları ve DOM'yi Test Etme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.
Component Sözleşmesini Test Etme
Component'ler inputs (gelen veriler), outputs (giden olaylar) ve rendered DOM aracılığıyla iletişim kurar. İyi component testleri bu üç yüzeyi kullanır ve dahili uygulama ayrıntıları yerine görünür sonucu doğrular.
Input Ayarlama
Component örneğinin input özelliğine değer atayın, ardından yeniden görüntülemek için detectChanges() çağırın. Signal input'larında değer fixture.componentRef.setInput() aracılığıyla ayarlanır.
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();querySelector ile DOM'u Okuma
Görüntülenmiş öğeleri bulmak ve metinlerini veya özniteliklerini doğrulamak için fixture.nativeElement.querySelector() kullanın.
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement ve By.css
fixture.debugElement.query(By.css(...)) bir DebugElement sarmalayıcısı döndürür. Bunun .nativeElement özelliği DOM düğümüdür ve platformlar arasında çalışabilen daha kapsamlı sorgular elde edersiniz.
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');Listeler için queryAll
Tekrarlanan öğeler için (örneğin bir @for döngüsü) tüm eşleşmeleri almak ve sayıyı kontrol etmek üzere queryAll kullanın.
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');Tıklamayı Simüle Etme
Etkileşimi test etmek için DOM olaylarını tetikleyin. Bir DebugElement üzerinde triggerEventHandler kullanın veya yerel .click() işlevini çağırın, ardından detectChanges() çağırın.
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);Output Olayını Test Etme
Yayımlaması gereken eylemi tetiklemeden önce component'in output'una (bir EventEmitter veya output signal'ı) abone olun.
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');Öznitelikleri ve Class'ları Doğrulama
Input'lara bağlı koşullu class'ları ve öznitelikleri doğrulayabilirsiniz.
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);Form Input'larını Güncelleme
Metin alanlarını test etmek için input değerini ayarlayın ve Angular binding'lerinin güncellenmesi amacıyla bir input olayı gönderin.
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');Her Değişiklikten Sonra detectChanges Neden Gerekir
Hem Zone tabanlı hem de zonesuz testlerde durumu değiştirdikten sonra açıkça detectChanges() çağırmak gerekir; çünkü test, Angular'ın otomatik tick işleminin dışında çalışır. Bunu unutmak, "doğrulamam güncel olmayan DOM'u görüyor" sorununun bir numaralı nedenidir.
İç Ayrıntıları Değil Davranışı Test Edin
Özel alanlar yerine görüntülenmiş çıktıyı ve yayımlanan olayları doğrulamayı tercih edin. Bu, testleri dayanıklı tutar: aynı kullanıcıya görünen davranışı sürdüren bir yeniden düzenleme testi bozmamalıdır.
Hızlı Kontrol
Hangi API size bir DebugElement sağlar?
Özet
Input'ları setInput ile yönettiniz, DOM'u querySelector ve By.css ile okudunuz, output'ları abone olarak yakaladınız ve tıklama/input olaylarını simüle ettiniz. Bir değişiklikten sonra her zaman detectChanges() çağırın ve kullanıcıya görünen davranışı doğrulayın.
Sıkça Sorulan Sorular
“Girdileri, Çıktıları ve DOM'yi Test Etme” dersi ücretsiz mi?
Evet — “Girdileri, Çıktıları ve DOM'yi 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.
“Girdileri, Çıktıları ve DOM'yi Test Etme” dersinde ne öğreneceğim?
Görüntülenen çıktıyı ve olayları doğrulayın 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 2. dersidir.
“Girdileri, Çıktıları ve DOM'yi 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