Angular Academy · Ders

TestBed ve Bileşen Tesisleri

Testlerde bileşenleri yapılandırıp oluşturun

TestBed ve Bileşen Tesisleri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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.

TestBed Neden Var

Angular component'leri framework'e bağımlıdır: bağımlılık enjeksiyonu, değişiklik algılama ve şablon derleyicisi. Bunları yalıtılmış biçimde test etmek için küçük bir Angular ortamına ihtiyacınız vardır. TestBed, her test için bu ortamı oluşturan Angular'ın temel test aracıdır.

Geçici bir NgModule yapılandırır, component'inizi derler ve onunla etkileşim kurmanız için bir başvuru sağlar.

configureTestingModule

TestBed.configureTestingModule(), testinizin gereksinimlerini bildirir: test edilen component'i, sağlayıcılarını ve gerekli import'ları. Standalone component'lerde component'in kendisini imports içine koyarsınız.

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [CounterComponent],
  });
});

Component Fixture Oluşturma

TestBed.createComponent(CounterComponent) bir ComponentFixture döndürür. Fixture sizin uzaktan kumandanızdır: component örneğini, yerel DOM öğesini ve değişiklik algılama mekanizmasını kapsar.

import { ComponentFixture, TestBed } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(CounterComponent);
});

Component Örneğine Erişme

fixture.componentInstance, gerçek class örneğidir. Tıpkı normal TypeScript'te olduğu gibi method'larını doğrudan çağırabilir ve özelliklerini okuyabilirsiniz.

it('creates the component', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();
  expect(component.count).toBe(0);
});

detectChanges Görüntülemeyi Tetikler

Yeni oluşturulmuş bir fixture henüz görüntülenmemiştir. Değişiklik algılamayı ve component'in ngOnInit işlevini çalıştırıp verileri DOM'a bağlamak için fixture.detectChanges() çağırın.

it('renders initial value', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  fixture.detectChanges(); // now bindings are applied
  const el = fixture.nativeElement as HTMLElement;
  expect(el.textContent).toContain('0');
});

nativeElement ve debugElement

fixture.nativeElement, ham DOM düğümüdür (bir HTMLElement). fixture.debugElement ise yönergeye göre sorgulama yapmanızı, enjekte edilmiş servisleri okumanızı ve binding'leri incelemenizi sağlayan, Angular'ın daha kapsamlı sarmalayıcısıdır.

const native = fixture.nativeElement;       // HTMLElement
const debug = fixture.debugElement;         // DebugElement
console.log(debug.componentInstance === fixture.componentInstance); // true

Test Modülündeki Sağlayıcılar

Component servis enjekte ediyorsa bunları providers üzerinden sağlayın. Gerçek servisleri veya test ikamelerini kullanabilirsiniz. Burada basit bir durum için gerçek bir servis sağlıyoruz.

TestBed.configureTestingModule({
  imports: [CounterComponent],
  providers: [
    { provide: LoggerService, useValue: { log: () => {} } },
  ],
});

Harici Şablonlar için compileComponents

Angular CLI test kurulumu olmadan satır içi olmayan templateUrl/styleUrls kullanıldığında şablonlar asenkron olarak derlenmelidir. await TestBed.compileComponents() çağırın. CLI ile bu işlem genellikle otomatiktir.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProfileComponent],
  }).compileComponents();
});

Eksiksiz Bir Minimal Test

Hepsini bir araya getirin: yapılandırın, oluşturun, değişiklikleri algılatın, doğrulayın. Bu, neredeyse her Angular component testinin standart biçimidir.

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] });
    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('starts at zero', () => {
    expect(fixture.componentInstance.count).toBe(0);
  });
});

Servisler için TestBed.inject

Yapılandırılmış bir sağlayıcıyı almak için TestBed.inject(Token) kullanın. Bu, kullanımdan kaldırılmış TestBed.get() işlevinin modern karşılığıdır.

const logger = TestBed.inject(LoggerService);
expect(logger).toBeDefined();

Testler Arasında Sıfırlama

TestBed, her testten önce modülünü otomatik olarak sıfırlar; böylece sağlayıcılar ve component durumu sızmaz. Bu nedenle yapılandırmayı genel olarak bir kez yapmak yerine beforeEach içinde yaparsınız.

Hızlı Kontrol

createComponent işleminden hemen sonra ne olduğunu test edin.

Özet

Testin temelini öğrendiniz: TestBed.configureTestingModule() ortamı oluşturur, createComponent() bir ComponentFixture döndürür ve detectChanges() onu görüntüler. Class için componentInstance, DOM için nativeElement/debugElement ve servisler için TestBed.inject() kullanın.

Sıkça Sorulan Sorular

“TestBed ve Bileşen Tesisleri” dersi ücretsiz mi?

Evet — “TestBed ve Bileşen Tesisleri” 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.

“TestBed ve Bileşen Tesisleri” dersinde ne öğreneceğim?

Testlerde bileşenleri yapılandırıp oluşturun 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 1. dersidir.

“TestBed ve Bileşen Tesisleri” 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

← Angular Academy Sayfasına Dön