Angular Academy · Pelajaran

TestBed dan Fixture Komponen

Konfigurasikan dan buat komponen dalam pengujian.

TestBed dan Fixture Komponen adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 TestBed Ada

Komponen Angular bergantung pada kerangka kerja: injeksi dependensi, deteksi perubahan, dan kompiler template. Untuk mengujinya secara terisolasi, Anda memerlukan lingkungan Angular kecil. TestBed adalah utilitas pengujian utama Angular yang membangun lingkungan ini untuk setiap pengujian.

Utilitas ini mengonfigurasi NgModule sementara, mengompilasi komponen Anda, dan memberi Anda pegangan untuk berinteraksi dengannya.

configureTestingModule

TestBed.configureTestingModule() mendeklarasikan kebutuhan pengujian Anda: komponen yang diuji, penyedianya, dan semua impor. Untuk komponen mandiri, masukkan komponen itu sendiri ke dalam imports.

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

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

Membuat Component Fixture

TestBed.createComponent(CounterComponent) mengembalikan ComponentFixture. Fixture adalah kendali jarak jauh Anda: fixture membungkus instance komponen, elemen DOM bawaannya, dan mekanisme deteksi perubahan.

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

let fixture: ComponentFixture<CounterComponent>;

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

Mengakses Instance Komponen

fixture.componentInstance adalah instance class yang sebenarnya. Anda dapat memanggil metodenya dan membaca propertinya secara langsung, seperti pada TypeScript biasa.

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

detectChanges Memicu Rendering

Fixture yang baru dibuat belum dirender. Panggil fixture.detectChanges() untuk menjalankan deteksi perubahan dan ngOnInit komponen, sehingga data diikat ke DOM.

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 vs debugElement

fixture.nativeElement adalah simpul DOM mentah (sebuah HTMLElement). fixture.debugElement adalah pembungkus Angular yang lebih kaya, yang memungkinkan Anda melakukan pencarian berdasarkan direktif, membaca layanan yang diinjeksi, dan memeriksa binding.

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

Penyedia dalam Modul Pengujian

Jika komponen menginjeksi layanan, sediakan layanan tersebut melalui providers. Anda dapat menggunakan layanan nyata atau pengganti untuk pengujian. Di sini kita menyediakan layanan nyata untuk kasus sederhana.

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

compileComponents untuk Template Eksternal

Saat menggunakan templateUrl/styleUrls non-inline tanpa konfigurasi pengujian Angular CLI, template harus dikompilasi secara asinkron. Panggil await TestBed.compileComponents(). Dengan CLI, proses ini biasanya berlangsung otomatis.

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

Pengujian Minimal yang Lengkap

Menyatukan semuanya: konfigurasi, pembuatan, deteksi, dan penegasan. Inilah bentuk umum hampir setiap pengujian komponen Angular.

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

TestBed.inject untuk Layanan

Untuk mengambil penyedia yang telah dikonfigurasi, gunakan TestBed.inject(Token). Ini adalah pengganti modern untuk TestBed.get() yang sudah tidak digunakan lagi.

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

Mengatur Ulang Antar-Pengujian

TestBed secara otomatis mengatur ulang modulnya sebelum setiap pengujian, sehingga penyedia dan status komponen tidak terbawa. Inilah alasan Anda mengonfigurasi di dalam beforeEach, bukan sekali secara global.

Pemeriksaan Singkat

Uji apa yang terjadi tepat setelah createComponent.

Ringkasan

Anda mempelajari inti pengujian: TestBed.configureTestingModule() membangun lingkungan, createComponent() mengembalikan ComponentFixture, dan detectChanges() merendernya. Gunakan componentInstance untuk class, nativeElement/debugElement untuk DOM, dan TestBed.inject() untuk layanan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “TestBed dan Fixture Komponen” gratis?

Ya — teks lengkap “TestBed dan Fixture Komponen” 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 “TestBed dan Fixture Komponen”?

Konfigurasikan dan buat komponen dalam pengujian. 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 1 dari 4.

Berapa lama pelajaran “TestBed dan Fixture Komponen” 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