4 tips untuk menulis tes unit Angular, datang dan lihat!

Ide pengujian:

• 1. Jika pengujian unit memungkinkan, cobalah untuk memberikan prioritas pada pengujian unit.
• 2. Jika pengujian unit tidak memungkinkan, pengujian melalui lapisan kemasan pengujian integrasi
• 3. Pengujian integrasi
• 4. Pengujian E2E

Kesulitan tes juga meningkat secara bertahap, dan semakin lama waktu yang dibutuhkan. Jika Anda ingin membuat pengujian menjadi sederhana, maka selama pengembangan, Anda harus secara sadar memperjelas ide Anda dan menulis kode yang sederhana dan efisien~.

Tumpukan teknologi pengujian yang digunakan dalam artikel ini: Angular12 + Jasmine. Meskipun sintaksis teknologi pengujian lainnya berbeda, gagasan keseluruhannya serupa. [Rekomendasi tutorial terkait: "tutorial sudut"]

Tips: Penentuan kasus uji melati, apa saja metodenya, Anda dapat menemukannya di sini, klik komponen di

unit test

, defaultnya adalah instance objek yang akan diuji dibuat oleh Angular menggunakan sintaks berikut

beforeEach(() => { 
  perlengkapan = TestBed.createComponent(BannerComponent); 
  komponen = perlengkapan.componentInstance; 
  perlengkapan.detectChanges(); 
});

Uji fungsi

1. Pemanggilan fungsi tanpa nilai kembalian

uji fungsi(indeks:angka,fn:Fungsi){
 jika(fn){
     fn(indeks);
 }
}

Bagaimana cara mengujinya?

Contoh tandingan: Menguji secara langsung nilai kembalian yang tidak terdefinisi

const res = komponen.test(1,() => {}));
  mengharapkan(res).tobeUndefinisi();

Praktek yang disarankan:

# Gunakan Jasmine
 it('harus mendapatkan data yang benar saat panggilan tes',() =>{
     parameter konstan = {
       fn: () => {}
    }
   memata-matai(param,'fn')
   komponen.test(1,param.fn);
   mengharapkan(param.fn).toHaveBeenCalled();
 })

Instruksi struktur HostListener menguji

instruksi struktur. Kata-kata yang umum digunakan adalah menyembunyikan, menampilkan, dan loop untuk menampilkan

# kode
 @Directive({ pemilih: '[ImageURlError]' })
kelas ekspor ImageUrlErrorDirective mengimplementasikan OnChanges {
  konstruktor(file pribadi: ElementRef) {}
  
  @HostListener('kesalahan')
  kesalahan publik() { 
      this.el.nativeElement.style.display = 'tidak ada';
  } 
}

Bagaimana cara mengujinya?

Ide pengujian:

• Gambar tidak terpicu sampai ada kesalahan dalam memuat gambar. Kemudian temukan cara untuk memicu kesalahan tersebut.
• Perintah tersebut umumnya dilampirkan pada komponen. Pada elemen gambar komponen, cukup gunakan errorEvent di bawah

dispath . Tambahkan komponen khusus dan tambahkan direktif Kustom @Component({
  templat: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
kelas TestHostComponent {

}

#2. Buat instance tampilan komponen khusus dan kirim errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        deklarasi: [
            Komponen TestHost,
            GambarURlError
        ]
    });
}));

sebelumSetiap(() => { 
 perlengkapan = TestBed.createComponent(TestHostComponent); 
 komponen = perlengkapan.componentInstance; 
 perlengkapan.detectChanges();
});
  
it('harus memperbolehkan angka saja', () => {
    const event = new ErrorEvent('error', {} apa pun);
    const image = perlengkapan.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //Kirim saja acaranya, dan metode error() akan dieksekusi saat ini});

Manfaatkan pengubah publik, pribadi, dan dilindungi

dalam spesifikasi sudut .ts dapat Mengakses; tetapi modifikasi pribadi yang dilindungi tidak diperbolehkan;

ketuk papan tulis

• jika Anda berencana melakukan pengujian unit dan menguji setiap metode, silakan gunakan publik dengan tepat --- Kesulitan *
• Jika Anda tidak berencana untuk menguji setiap metode, kemudian Anda dapat meneruskan Atur data, memanggil pintu masuk, dan lulus uji kesulitan integrasi ***

uji

peristiwa klik. Pemicu peristiwa klik dapat mencakup panggilan js langsung, atau meniru mouse untuk memicu peristiwa klik.

#xx.component.ts
@Komponen({
 selecotr: 'daftar-pahlawan-dasbor'
})
kelas DashBoardHeroComponent {
    kartu umum = [{
        klik: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [kartu]="kartu" kelas="kartu">
</dashboard-hero-list>`

Bagaimana cara mengujinya?

Ide pengujian:

• uji komponen secara langsung, jangan gunakan
• kumpulan objek yang berisi peristiwa klik yang dikembalikan oleh Host, dan panggil klik satu per satu, sehingga cakupan kode akan ditingkatkan

('harus mendapatkan data yang benar saat memanggil klik', () => {
    kartu const = komponen.kartu;
    kartu?.forEach(kartu => {
        if(card.klik){
            card.click(Acara baru('klik'));
        }
    });
    mengharapkan(kartu?.panjang).menjadi(1);
});

Ide referensi klik lainnya:

Ide 1:

• Gunakan TestHostComponent untuk membungkus komponen yang perlu diuji
• dan kemudian gunakan perlengkapan.nativeElement.querySelector('.card') untuk menemukan elemen klik yang terikat pada komponen
• ; memicu pengirimanEvent, itu saja.

Ide 2:

• Uji komponen secara langsung, tanpa menggunakan Host

• dan kemudian gunakan perlengkapan.nativeElement.querySelector('.card') untuk menemukan elemen klik terikat

• ;