Rumah >hujung hadapan web >tutorial js >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:
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 meUjian unit
beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); component = fixture.componentInstance; fixture.detectChanges(); });Ujian Fungsi
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
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
#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
Ketuk pada papan hitam
Jika anda bercadang untuk melakukan ujian unit dan kaedah ujian mengikut kaedah, maka sila gunakan public dengan sewajarnya --- Kesukaran*
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
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
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!