Winkeltest Klickereignis

Question

Im Moment versuche ich mehr über Tests in Angular (v2 +) zu lernen, aber ich bin beim Testen von Klickereignissen in einer * ngFor-Schleife fest.

Dies ist der HTML-Code:

<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> 

Dies ist onSelect Ereignis:

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

ich zwei Fragen:

1. Wie man einen Test schreiben, wenn überprüft Das Klickereignis funktioniert?
2. Wie schreibe ich einen Test, der das div-Element sichtbar macht, wenn die Variable selectedHero gesetzt ist?

Vielen Dank im Voraus!

aktualisieren Ich schrieb den folgenden Test das Click-Ereignis zu überprüfen:

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

Zuerst folgen this guide auf Angular Prüfung zu lernen, was comp, fixture und el Variablen sind.

Wie schreibe ich einen Test, der prüft, ob das Klickereignis funktioniert?

Sie müssen sich auf onSelect Methode auszuspionieren und sicherzustellen, dass es ausgelöst wurde:

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

Wie man einen Test schreiben, die das div-Element sichtbar macht, wenn die Variable selectedHero gesetzt?

Sie müssen überprüfen, ob die Klasse auf das Element angewendet wird:

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); 
});