Angular Academy · Pelajaran

Menguji Signal dan Kode Asinkron

Uji perilaku reaktif dan asinkron.

Menguji Signal dan Kode Asinkron adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Asinkron adalah Bagian Tersulit dalam Pengujian

Komponen nyata melakukan pekerjaan asinkron: pengatur waktu, promise, HTTP, dan input dengan penundaan. Pengujian harus mengendalikan waktu agar pernyataan dijalankan setelah pekerjaan asinkron selesai. Angular menyediakan fakeAsync, tick, dan flush untuk mengendalikan waktu secara deterministik.

Menguji Signal

Signal dibaca seperti fungsi. Mengujinya mudah: panggil signal, periksa nilainya; perbarui signal tersebut, lalu periksa lagi.

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

Computed Signal Diperbarui Secara Otomatis

computed menghitung ulang saat dependensinya berubah. Dalam pengujian, ubah signal sumber, lalu baca computed; Anda tidak perlu menghitung ulang secara manual.

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

Signal dan DOM

Untuk melihat perubahan signal tercermin dalam templat, panggil detectChanges() setelah memperbaruinya, sama seperti state lainnya.

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

Memperkenalkan fakeAsync

Bungkus pengujian dengan fakeAsync untuk memasuki zona waktu tiruan. Pengatur waktu dan tugas mikro akan mengantre alih-alih langsung berjalan, lalu Anda memajukannya secara manual. Dengan demikian, pengujian asinkron menjadi sinkron dan andal.

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

Memajukan Waktu dengan tick

tick(ms) memajukan jam virtual, lalu menjalankan pengatur waktu yang dijadwalkan dalam rentang tersebut.

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

flush untuk Semua Pengatur Waktu yang Menunggu

Saat Anda tidak mengetahui jeda yang tepat, flush() mengosongkan setiap tugas makro yang menunggu hingga antrean kosong.

import { fakeAsync, flush } from '@angular/core/testing';

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

Menguji Promise dengan fakeAsync

Promise diselesaikan sebagai tugas mikro. Di dalam fakeAsync, panggil flushMicrotasks() (atau tick()) untuk menyelesaikannya sebelum melakukan pemeriksaan.

import { fakeAsync, flushMicrotasks } from '@angular/core/testing';

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

Pembantu async / waitForAsync

Untuk pengujian yang harus menunggu proses asinkron nyata tanpa mengendalikan waktu, bungkus isi pengujian dengan waitForAsync dan gunakan fixture.whenStable().

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

Menguji effect()

effect berjalan secara asinkron setelah signal yang dibacanya berubah. Untuk mengamati hasilnya, jalankan deteksi perubahan (atau lakukan flush) agar effect berjalan, lalu periksa efek sampingnya.

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

Kesalahan Umum: Pengatur Waktu yang Tersisa

Jika pengujian fakeAsync berakhir saat masih ada pengatur waktu dalam antrean, Angular akan melempar kesalahan. Selalu jalankan tick/flush untuk mengosongkannya, atau hapus interval dalam ngOnDestroy, agar jam virtual kosong saat pengujian selesai.

Pemeriksaan Cepat

Pilih alat yang tepat untuk jeda yang diketahui.

Ringkasan

Signal diuji seperti fungsi sederhana (panggil untuk membaca, set untuk memperbarui, detectChanges untuk DOM). Untuk proses asinkron, fakeAsync menyediakan jam virtual yang Anda majukan dengan tick, kosongkan dengan flush, dan gunakan untuk menyelesaikan promise dengan flushMicrotasks. Jangan pernah meninggalkan pengatur waktu yang masih menunggu.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menguji Signal dan Kode Asinkron” gratis?

Ya — teks lengkap “Menguji Signal dan Kode Asinkron” 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 “Menguji Signal dan Kode Asinkron”?

Uji perilaku reaktif dan asinkron. 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 4 dari 4.

Berapa lama pelajaran “Menguji Signal dan Kode Asinkron” 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