Menguji Input, Output dan DOM
Sahkan output yang dipaparkan dan peristiwa.
Menguji Input, Output dan DOM ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 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.
Menguji Kontrak Komponen
Komponen berkomunikasi melalui input (data masuk), output (peristiwa keluar) dan DOM yang dipaparkan. Ujian komponen yang baik memacu ketiga-tiga permukaan ini dan mengesahkan hasil yang kelihatan, bukannya butiran pelaksanaan dalaman.
Menetapkan Input
Tetapkan sifat input pada tika komponen, kemudian panggil detectChanges() untuk memaparkan semula. Dengan input isyarat, tetapkannya melalui fixture.componentRef.setInput().
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();Membaca DOM dengan querySelector
Gunakan fixture.nativeElement.querySelector() untuk mencari elemen yang dipaparkan dan menegaskan teks atau atributnya.
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement dan By.css
fixture.debugElement.query(By.css(...)) mengembalikan pembalut DebugElement. .nativeElement ialah nod DOM, dan anda mendapat pertanyaan yang lebih kaya serta berfungsi merentas platform.
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');queryAll untuk Senarai
Untuk elemen berulang (contohnya gelung @for), gunakan queryAll untuk mendapatkan semua padanan dan menyemak bilangannya.
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');Mensimulasikan Klik
Cetuskan peristiwa DOM untuk menguji interaksi. Gunakan triggerEventHandler pada DebugElement atau panggil native .click(), kemudian detectChanges().
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);Menguji Peristiwa Output
Langgan output komponen (EventEmitter atau isyarat output) sebelum mencetuskan tindakan yang sepatutnya menghantarnya.
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');Menegaskan Atribut dan Kelas
Anda boleh mengesahkan kelas dan atribut bersyarat yang bergantung pada input.
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);Mengemas Kini Input Borang
Untuk menguji medan teks, tetapkan nilai input dan hantar peristiwa input supaya pengikatan Angular dikemas kini.
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');Mengapa detectChanges Selepas Setiap Perubahan
Ujian berasaskan Zone dan tanpa Zone kedua-duanya memerlukan detectChanges() yang jelas selepas anda mengubah keadaan, kerana ujian dijalankan di luar detik automatik Angular. Terlupa melakukannya ialah punca nombor satu bagi "penegasan saya melihat DOM yang lapuk".
Uji Tingkah Laku, Bukan Dalaman
Utamakan penegasan pada output yang dipaparkan dan peristiwa yang dihantar berbanding medan persendirian. Ini menjadikan ujian lebih tahan perubahan: pemfaktoran semula dalaman tidak sepatutnya mematahkan ujian yang masih menghasilkan tingkah laku sama yang dilihat pengguna.
Semakan Pantas
API manakah yang memberikan anda DebugElement?
Imbas Kembali
Anda memacu input melalui setInput, membaca DOM dengan querySelector dan By.css, mendapatkan output dengan melanggan, serta mensimulasikan peristiwa klik/input. Sentiasa panggil detectChanges() selepas perubahan dan buat penegasan pada tingkah laku yang dilihat pengguna.
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 Input, Output dan DOM” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Menguji Input, Output dan DOM”, 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 Input, Output dan DOM”?
Sahkan output yang dipaparkan dan peristiwa. 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 2 daripada 4.
Berapa lamakah pelajaran “Menguji Input, Output dan DOM” 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