Menguji Signal dan Kod Tak Segerak
Uji tingkah laku reaktif dan tak segerak.
Menguji Signal dan Kod Tak Segerak ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Asinkron ialah Bahagian Sukar dalam Pengujian
Komponen sebenar menjalankan kerja asinkron: pemasa, promise, HTTP dan input yang dinyahpantulkan. Ujian mesti mengawal masa supaya penegasan dijalankan selepas kerja asinkron selesai. Angular menyediakan fakeAsync, tick dan flush untuk kawalan masa yang deterministik.
Menguji Signal
Signal dibaca seperti fungsi. Mengujinya mudah: panggil signal dan tegaskan nilainya; kemas kini signal itu dan tegaskan sekali 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);
});Signal Computed Dikemas Kini Secara Automatik
computed dikira semula apabila kebergantungannya berubah. Dalam ujian, ubah signal sumber, kemudian baca computed itu; pengiraan semula secara manual tidak diperlukan.
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 dipaparkan dalam templat, panggil detectChanges() selepas mengemas kininya, sama seperti keadaan lain.
c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');Memperkenalkan fakeAsync
Bungkus satu ujian dalam fakeAsync untuk memasuki zon masa palsu. Pemasa dan tugasan mikro beratur tanpa dijalankan, lalu anda memajukannya secara manual. Ini menjadikan ujian asinkron berjalan secara segerak dan boleh dipercayai.
import { fakeAsync, tick } from '@angular/core/testing';
it('loads after delay', fakeAsync(() => {
// timers are now under your control
}));Memajukan Masa dengan tick
tick(ms) memajukan jam maya dan menjalankan sebarang pemasa yang dijadualkan dalam tempoh 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 Pemasa yang Menunggu
Apabila anda tidak mengetahui kelewatan yang tepat, flush() mengosongkan setiap tugas makro yang menunggu sehingga baris gilir 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 tugasan mikro. Dalam fakeAsync, panggil flushMicrotasks() (atau tick()) untuk menyelesaikannya sebelum membuat penegasan.
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 ujian yang perlu menunggu kerja asinkron sebenar tanpa mengawal masa, bungkus isi ujian dalam 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 selepas signal yang dibacanya berubah. Untuk memerhatikan hasilnya, jalankan pengesanan perubahan (atau flush) supaya effect dilaksanakan, kemudian tegaskan kesan sampingan tersebut.
c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);Perangkap Lazim: Pemasa yang Tertinggal
Jika ujian fakeAsync tamat ketika masih ada pemasa dalam baris gilir, Angular akan melontarkan ralat. Sentiasa jalankan tick/flush untuk mengosongkannya, atau kosongkan selang masa dalam ngOnDestroy, supaya jam maya kosong apabila ujian selesai.
Semakan Pantas
Pilih alat yang sesuai untuk kelewatan yang diketahui.
Ulang Kaji
Signal diuji seperti fungsi mudah (panggil untuk membaca, set untuk mengemas kini, detectChanges untuk DOM). Bagi kerja asinkron, fakeAsync menyediakan jam maya yang anda majukan dengan tick, kosongkan dengan flush, dan gunakan flushMicrotasks untuk menyelesaikan promise. Jangan biarkan pemasa menunggu.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Menguji Signal dan Kod Tak Segerak” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Menguji Signal dan Kod Tak Segerak”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menguji Signal dan Kod Tak Segerak”?
Uji tingkah laku reaktif dan tak segerak. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Menguji Signal dan Kod Tak Segerak” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- TestBed dan Lekapan Komponen
- Menguji Input, Output dan DOM
- Memalsukan Perkhidmatan dan Kebergantungan
- Menguji Signal dan Kod Tak Segerak