0Pricing
Angular Academy · Ders

Hizmetleri ve Bağımlılıkları Taklit Etme

DI aracılığıyla test taklitleri sağlayın

Hizmetleri ve Bağımlılıkları Taklit Etme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Bağımlılıkları Neden Taklit Etmeli

Bir component testi, component'i yalıtmalıdır. Component bir HttpClient tabanlı servis enjekte ediyorsa gerçek ağ çağrıları yapmak istemezsiniz. Bunun yerine bir test ikamesi sağlayın: testlerin hızlı ve belirlenebilir olması için kontrollü veriler döndüren sahte bir nesne.

useValue ile Sahte Sağlama

En basit ikame, useValue ile sağlanan düz bir nesnedir. Bunu component'in istediği aynı enjeksiyon belirteci altında sağlayın.

const fakeApi = { getUser: () => of({ name: 'Ada' }) };
TestBed.configureTestingModule({
  imports: [ProfileComponent],
  providers: [{ provide: UserApi, useValue: fakeApi }],
});

Jasmine Spy'ları

jasmine.createSpyObj, hem döndürülen değerleri taklit edebilmeniz hem de çağrıları doğrulayabilmeniz için spy method'larına sahip sahte bir nesne oluşturur.

const apiSpy = jasmine.createSpyObj<UserApi>('UserApi', ['getUser']);
apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useValue: apiSpy }],
});

Servisin Çağrıldığını Doğrulama

Component üzerinde işlem yaptıktan sonra spy'ın beklenen bağımsız değişkenleri aldığını doğrulayın.

fixture.componentInstance.load(7);
fixture.detectChanges();
expect(apiSpy.getUser).toHaveBeenCalledWith(7);
expect(apiSpy.getUser).toHaveBeenCalledTimes(1);

Taklitlerden Observable Döndürme

Servisler çoğu zaman Observable döndürür. Başarı ve hata durumlarının her ikisini de test edebilmek için eşzamanlı başarıda RxJS of(), hatalarda throwError() kullanın.

import { of, throwError } from 'rxjs';

apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));     // success
apiSpy.getUser.and.returnValue(throwError(() => new Error('boom'))); // error

Yeniden Kullanılabilir Sahte Nesneler için useClass

Bir sahte nesne birçok test senaryosunda yeniden kullanılacaksa bir class tanımlayın ve bunu useClass ile bağlayın.

class FakeUserApi {
  getUser() { return of({ name: 'Test' }); }
}
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useClass: FakeUserApi }],
});

HttpTestingController ile HttpClient'ı Taklit Etme

Hizmetin tamamını sahteleştirmeden HTTP çağrıları yapan hizmetleri test etmek için provideHttpClientTesting() içe aktarın ve istekleri HttpTestingController aracılığıyla tamamlayın.

import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';

TestBed.configureTestingModule({
  providers: [provideHttpClient(), provideHttpClientTesting()],
});

HTTP İsteğini Tamamlama

Bir istek bekleyin, sahte verilerle yanıtlayın, ardından beklenmeyen çağrı kalmadığını doğrulayın.

const http = TestBed.inject(HttpTestingController);
service.load();
const req = http.expectOne('/api/users/7');
expect(req.request.method).toBe('GET');
req.flush({ name: 'Ada' });
http.verify();

Her Spesifikasyon İçin Bir Sağlayıcıyı Geçersiz Kılma

Bazen tek bir testin farklı bir sahte uygulamaya ihtiyacı olur. createComponent çağrısından önce TestBed.overrideProvider() kullanın.

TestBed.overrideProvider(UserApi, {
  useValue: { getUser: () => throwError(() => new Error('fail')) },
});
const fixture = TestBed.createComponent(ProfileComponent);

Yalnızca Gerektiği Kadarını Taklit Edin

İyi bir test dublörü, yalnızca bileşenin gerçekten kullandığı yöntemleri uygular. Gereğinden fazla taklit etmek testinizi iç ayrıntılara bağımlı hâle getirir; yetersiz taklit ise gerçek yan etkilerin sızmasına neden olur. Bileşenin bağlı olduğu herkese açık sözleşmeyle eşleşin.

Gerçek Hizmet Yöntemlerini İzleme

Ayrıca gerçek bir hizmeti koruyup spyOn(instance, 'method') ile tek bir yöntemi izleyebilirsiniz. Bu, hizmetin çoğu zararsız olduğunda ancak belirli bir çağrının araya girilerek ele alınması gerektiğinde kullanışlıdır.

const svc = TestBed.inject(AnalyticsService);
spyOn(svc, 'track');
fixture.componentInstance.onClick();
expect(svc.track).toHaveBeenCalledWith('click');

Hızlı Kontrol

Bir sahte uygulamanın çağrıları doğrulamasını VE dönüş değerlerini denetlemesini nasıl sağlarsınız?

Özet

Gerçek bağımlılıkları useValue, useClass ve Jasmine casuslarıyla test dublörleriyle değiştirdiniz; of/throwError ile Observable'lar döndürdünüz; HTTP'yi HttpTestingController aracılığıyla test ettiniz ve sağlayıcıları her spesifikasyon için geçersiz kıldınız. Yalnızca bileşenin kullandığı sözleşmeyi taklit edin.

Sıkça Sorulan Sorular

“Hizmetleri ve Bağımlılıkları Taklit Etme” dersi ücretsiz mi?

Evet — “Hizmetleri ve Bağımlılıkları Taklit 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.

“Hizmetleri ve Bağımlılıkları Taklit Etme” dersinde ne öğreneceğim?

DI aracılığıyla test taklitleri sağlayı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 3. dersidir.

“Hizmetleri ve Bağımlılıkları Taklit 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

  1. TestBed ve Bileşen Tesisleri
  2. Girdileri, Çıktıları ve DOM'yi Test Etme
  3. Hizmetleri ve Bağımlılıkları Taklit Etme
  4. Sinyalleri ve Eş Zamanlı Olmayan Kodu Test Etme
← Angular Academy Sayfasına Dön