4 petua untuk menulis ujian unit sudut, datang dan lihat!

SudutBagaimana untuk melaksanakan ujian unit? Artikel ini akan berkongsi dengan anda 4 kemahiran peringkat tinggi dalam penulisan ujian unit sudut Saya harap ia akan membantu anda!

Idea ujian:

• 1 Jika anda boleh ujian unit, cuba beri keutamaan kepada ujian unit
• 2 .Tidak boleh diuji dan diuji unit melalui lapisan enkapsulasi, seperti merangkum ujian ke dalam komponen, tetapi ia lebih lemah daripada ujian integrasi
• 3 4.E2E ujian

Kesukaran ujian secara beransur-ansur meningkat, dan semakin banyak masa yang diperlukan. Jika anda ingin membuat ujian mudah, maka semasa pembangunan, anda harus secara sedar menjelaskan idea anda dan menulis kod yang mudah dan cekap~.

Timbunan teknologi ujian yang digunakan dalam artikel ini:

Angular12

Jasmine Walaupun sintaks teknologi ujian lain adalah berbeza, idea keseluruhannya adalah serupa. [Cadangan tutorial berkaitan: "tutorial sudut"]

Petua: Penentuan kes ujian Jasmine, apakah kaedahnya, boleh didapati di sini,

Poke me

Ujian unit

Komponen, secara lalai, ialah contoh objek yang akan diuji dicipta oleh Angular menggunakan sintaks berikut

beforeEach(() => { 
  fixture = TestBed.createComponent(BannerComponent); 
  component = fixture.componentInstance; 
  fixture.detectChanges(); 
});

Ujian Fungsi

1. Panggilan fungsi tanpa nilai pulangan

Bagaimana untuk menguji?

function test(index:number ,fn:Function){
 if(fn){
     fn(index);
 }
}

Contoh kaunter: Uji terus nilai pulangan tidak ditentukan

  const res = component.test(1,() => {}）);
  expect(res).tobeUndefined();

Pendekatan yang disyorkan:

 # 利用Jasmine
 it('should get correct data when call test',() =>{
     const param = {
       fn：() => {}
    }
   spyOn(param,'fn')
   component.test(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

ujian struktur Arahan HostListener

arahan struktur, perkataan yang biasa digunakan sembunyikan, tunjukkan, untuk paparan gelung fungsi sedemikian

Bagaimana hendak menguji?

 # code
 @Directive({ selector: '[ImageURlError]' })
export class ImageUrlErrorDirective implements OnChanges {
  constructor(private el: ElementRef) {}
  
  @HostListener('error')
  public error() { 
      this.el.nativeElement.style.display = 'none';
  } 
}

Idea ujian:

Ralat memuatkan imej mencetuskan, kemudian cari cara untuk mencetuskan ralat

• Arahan biasanya dilampirkan pada Use pada komponen. Pada elemen imej komponen, hanya gunakan errorEvent di bawah dispath

#1.添加一个自定义组件, 并添加上自定义指令
@Component({
  template: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
class TestHostComponent {

}

#2.把自定义组件视图实例化，并派发errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        declarations: [
            TestHostComponent,
            ImageURlError
        ]
    });
}));

beforeEach(() => { 
 fixture = TestBed.createComponent(TestHostComponent); 
 component = fixture.componentInstance; 
 fixture.detectChanges();
});
  
it('should allow numbers only', () => {
    const event = new ErrorEvent('error', {} as any);
    const image = fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //派发事件即可，此时error()方法就会被执行到
});

Gunakan pengubah awam, peribadi, dilindungi

Spec.ts yang diubah suai oleh orang awam dalam sudut boleh diakses; tetapi diubah suai secara peribadi atau dilindungi, bukan

Ketuk pada papan hitam

Jika anda bercadang untuk melakukan ujian unit dan kaedah ujian mengikut kaedah, maka sila gunakan public dengan sewajarnya --- Kesukaran*

• Jika anda tidak bercadang untuk menguji kaedah mengikut kaedah, maka anda boleh menyusun data, panggil pintu masuk, dan letakkan kaedah Lulus ujian integrasi - Kesukaran ***

Acara klik ujian

Peristiwa klik mencetuskan, terdapat direct js calls to click, dan terdapat juga tiruan tetikus Trigger click event.

Bagaimana untuk menguji?

# xx.component.ts
@Component({
 selecotr: 'dashboard-hero-list'
})
class DashBoardHeroComponent {
    public cards = [{
        click: () => {
            .....
        }
    }]
}
# html
<dashboard-hero-list [cards]="cards"  class="card">
</dashboard-hero-list>`

Menguji idea:

Uji komponen secara langsung tanpa menggunakan Hos

• Gunakan koleksi objek yang mengandungi peristiwa klik yang dikembalikan oleh kod dan panggil mereka satu demi satu klik, supaya liputan kod akan dipertingkatkan

it('should get correct data when call click',() => {
    const cards = component.cards;
    cards?.forEach(card => {
        if(card.click){
            card.click(new Event('click'));
        }
    });
    expect(cards?.length).toBe(1);
});

Idea rujukan untuk klik lain:

Idea 1:

Gunakan TestHostComponent, bungkus komponen yang perlu diuji

• dan kemudian gunakan fixture.nativeElement.querySelector('.card') untuk mencari elemen klik yang terikat pada komponen pada
• elemen, trigger dispatchEvent, itu sahaja
• Idea 2:

Uji komponen secara langsung tanpa menggunakan Host
dan kemudian gunakan fixture.nativeElement.querySelector ('.card'), cari elemen klik terikat; ');
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
• Video Pengaturcaraan

  ! !

Atas ialah kandungan terperinci 4 petua untuk menulis ujian unit sudut, datang dan lihat!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!