Angular Academy · Pelajaran

Menguji Input, Output, dan DOM

Pastikan output yang dirender dan peristiwa sesuai harapan.

Menguji Input, Output, dan DOM adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Menguji Kontrak Komponen

Komponen berkomunikasi melalui input (data masuk), output (peristiwa keluar), dan DOM yang dirender. Pengujian komponen yang baik menggerakkan ketiga permukaan ini dan memverifikasi hasil yang terlihat, bukan detail implementasi internal.

Mengatur Input

Tetapkan nilai ke properti input pada instance komponen, lalu panggil detectChanges() untuk merender ulang. Dengan input signal, tetapkan nilainya 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 menemukan elemen yang dirender dan memastikan 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 pembungkus DebugElement. .nativeElement miliknya adalah simpul DOM, dan Anda mendapatkan pencarian yang lebih kaya serta tetap berfungsi di berbagai platform.

import { By } from '@angular/platform-browser';

const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');

queryAll untuk Daftar

Untuk elemen berulang (misalnya loop @for), gunakan queryAll untuk mendapatkan semua kecocokan dan memeriksa jumlahnya.

const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');

Menyimulasikan Klik

Picu peristiwa DOM untuk menguji interaksi. Gunakan triggerEventHandler pada DebugElement, atau panggil .click() bawaan, lalu detectChanges().

const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);

Menguji Peristiwa Output

Berlangganan ke output komponen (EventEmitter atau output signal) sebelum memicu tindakan yang seharusnya mengirimkannya.

let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');

Memastikan Atribut dan Class

Anda dapat memverifikasi class dan atribut kondisional yang bergantung pada input.

fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);

Memperbarui Input Formulir

Untuk menguji bidang teks, tetapkan nilai input dan kirim peristiwa input agar binding Angular diperbarui.

const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');

Mengapa detectChanges Setelah Setiap Perubahan

Pengujian berbasis Zone maupun tanpa Zone sama-sama memerlukan detectChanges() eksplisit setelah Anda mengubah status, karena pengujian berjalan di luar tick otomatis Angular. Lupa memanggilnya adalah penyebab nomor satu dari "penegasan saya melihat DOM yang sudah usang".

Uji Perilaku, Bukan Internal

Utamakan penegasan pada output yang dirender dan peristiwa yang dikirim daripada field privat. Dengan begitu, pengujian tetap tahan perubahan: refaktor internal tidak akan merusak pengujian yang masih menghasilkan perilaku yang sama bagi pengguna.

Pemeriksaan Singkat

API mana yang memberi Anda DebugElement?

Ringkasan

Anda mengatur input melalui setInput, membaca DOM dengan querySelector dan By.css, menangkap output dengan berlangganan, serta menyimulasikan peristiwa klik/input. Selalu panggil detectChanges() setelah perubahan, dan lakukan penegasan pada perilaku yang terlihat oleh pengguna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menguji Input, Output, dan DOM” gratis?

Ya — teks lengkap “Menguji Input, Output, dan DOM” 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 Input, Output, dan DOM”?

Pastikan output yang dirender dan peristiwa sesuai harapan. 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 2 dari 4.

Berapa lama pelajaran “Menguji Input, Output, dan DOM” 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