角度測試點擊事件

Question

目前我想了解更多關於在Angular（v2 +）中測試的內容，但是我一直在測試* ngFor循環中的單擊事件。

這是HTML代碼：

<div *ngIf="selectedHero">...</div> 
<ul class="heroes"> 
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero"> 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
    </li> 
</ul> 

這是onSelect事件：

onSelect(hero:Hero):void{ 
    this.selectedHero = hero; 
} 

我有兩個問題：

1. 如何寫一個測試，檢查是否點擊事件的作品？
2. 如何編寫一個測試，使變量selectedHero被設置時div元素可見？

在此先感謝！

更新 我寫了下面的測試來檢查點擊事件：

it('should trigger a click event',() => { 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
    let comp = fixture.componentInstance; 
    spyOn(comp, 'onSelect'); 

    let el = fixture.debugElement.query(By.css('li')).nativeElement.click(); 
    expect(comp.onSelect).toHaveBeenCalled(); 
    }); 
}); 

Answer 1

首先，按照this guide對角測試，以瞭解什麼comp，fixture和el變量。

如何編寫一個檢查點擊事件是否有效的測試？

你需要刺探onSelect方法，並確保它被觸發：

it('should test click',() => { 
    spyOn(comp, 'onSelect'); 
    el = fixture.debugElement.query(By.css('li')).nativeElement.click(); 
    expect(comp.onSelect).toHaveBeenCalled(); 
}); 

如何寫一個測試，使div元素時可見 變量selectedHero設置？

你需要測試的類用於元素：

it('should test selected',() => { 
    el = fixture.debugElement.query(By.css('li')).nativeElement; 
    expect(el.classList.has('selected')).toBe(false); 

    comp.onSelect(heroes[0]); 
    expect(el.classList.has('selected')).toBe(true); 
});