Angular Academy · Pelajaran

Menyimulasikan Layanan dan Dependensi

Sediakan pengganti pengujian melalui DI.

Menyimulasikan Layanan dan Dependensi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengapa Menirukan Dependensi

Pengujian komponen harus mengisolasi komponen tersebut. Jika komponen menginjeksi layanan berbasis HttpClient, Anda tentu tidak ingin melakukan panggilan jaringan nyata. Sebagai gantinya, sediakan pengganti pengujian: objek tiruan yang mengembalikan data terkontrol agar pengujian cepat dan deterministik.

Menyediakan Tiruan melalui useValue

Pengganti paling sederhana adalah objek biasa yang disediakan dengan useValue. Sediakan objek tersebut menggunakan token injeksi yang sama dengan yang diminta komponen.

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

Spy Jasmine

jasmine.createSpyObj membuat tiruan dengan metode spy sehingga Anda dapat membuat nilai yang dikembalikan sekaligus memastikan pemanggilan.

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

Memastikan Layanan Dipanggil

Setelah menjalankan tindakan pada komponen, pastikan spy menerima argumen yang diharapkan.

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

Mengembalikan Observable dari Tiruan

Layanan sering mengembalikan Observable. Gunakan RxJS of() untuk keberhasilan sinkron dan throwError() untuk kegagalan, sehingga Anda dapat menguji kedua cabang.

import { of, throwError } from 'rxjs';

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

useClass untuk Tiruan yang Dapat Digunakan Kembali

Saat tiruan digunakan kembali di banyak spesifikasi, definisikan sebuah class dan hubungkan dengan useClass.

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

Menirukan HttpClient dengan HttpTestingController

Untuk menguji layanan yang memanggil HTTP tanpa memalsukan seluruh layanan, impor provideHttpClientTesting() dan kirimkan respons ke permintaan melalui HttpTestingController.

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

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

Mengirimkan Respons ke Permintaan HTTP

Harapkan sebuah permintaan, berikan respons berupa data tiruan, lalu pastikan tidak ada panggilan tak terduga yang tersisa.

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();

Mengganti Provider per Spesifikasi

Terkadang satu pengujian memerlukan tiruan yang berbeda. Gunakan TestBed.overrideProvider() sebelum createComponent.

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

Buat Tiruan Secukupnya

Objek pengganti yang baik hanya mengimplementasikan metode yang benar-benar digunakan komponen. Terlalu banyak pemalsuan membuat pengujian Anda bergantung pada detail internal; terlalu sedikit pemalsuan memungkinkan efek samping nyata muncul. Sesuaikan dengan kontrak publik yang menjadi dependensi komponen.

Pantau Metode Layanan Nyata

Anda juga dapat mempertahankan layanan nyata, tetapi memantau satu metode menggunakan spyOn(instance, 'method'). Ini berguna saat sebagian besar layanan tidak berbahaya, tetapi satu panggilan harus dicegat.

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

Pemeriksaan Cepat

Bagaimana cara membuat tiruan yang dapat memeriksa panggilan DAN mengendalikan nilai yang dikembalikan?

Ringkasan

Anda mengganti dependensi nyata dengan objek pengganti menggunakan useValue, useClass, dan mata-mata Jasmine; mengembalikan Observable dengan of/throwError; menguji HTTP melalui HttpTestingController; serta mengganti provider per spesifikasi. Tirukan hanya kontrak yang digunakan komponen.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyimulasikan Layanan dan Dependensi” gratis?

Ya — teks lengkap “Menyimulasikan Layanan dan Dependensi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyimulasikan Layanan dan Dependensi”?

Sediakan pengganti pengujian melalui DI. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Menyimulasikan Layanan dan Dependensi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy