Wie man tatsächlich ein Klickereignis auslöst und das Ergebnis in Angular2 überprüft

Question

Ich möchte tatsächlich überprüfen, dass das ausgewählte Attribut mit einem true statt einem undefined gerendert wurde.

Mein Arbeits (manuell getestet) Komponente Funktionalität:

export class PlayerSelectorComponent implements OnInit { 

    players: any = [] 

    ... 

    toggleSelectPlayer(player: any) { 
     if (player.selected) { 
      player.selected = false 
     } 
     else { 
      player.selected = true 
     } 
    } 

} 

Hier ist die Vorlage:

<ul class="list-group"> 
    <player-row *ngFor="let player of players" 
       [player]="player" 
       [selected]="player.selected" 
       (click) = "toggleSelectPlayer(player)"> 
    </player-row> 
</ul> 

Hier ist der Testcode:

it('should render a player as selected after a user clicks on the player row', fakeAsync(() => { 
    let player = fixture.debugElement.query(By.css('.player-row')) 
    expect(player.attributes.selected).toBe(undefined) 
    player.triggerEventHandler('click', null) 
    tick() 
    fixture.detectChanges() 
    player = fixture.debugElement.query(By.css('.player-row')) 
    expect(player.attributes.selected).toBeTruthy() // Expected undefined to be truthy 
})) 

In der letzten Zeile von dem code kannst du sehen, dass meine tests das player.attrib nicht erkennen utes.selected wird nach dem Klick tatsächlich geändert. Es bleibt zu undefined ..

Answer 1

Das Problem ist, dass Sie css abfragen, aber nicht wirklich manipulieren css in allem, was Sie gepostet. Sie möchten die Komponentenvariable als true testen.

Nach Ihnen fixture.detectChanges() werden Sie wollen expect(component.player.selected).toBeTruthy(). Dies setzt voraus, dass Sie einen TestBed zum Testen haben.

Wenn Sie den Status "aktiviert" (nicht ausgewählt) in Ihrer Bootstrap-Formulargruppe überprüfen möchten, müssen Sie Ihre [ngClass]="{'selected':player.selected}" in Ihrer * ngFor-Schleife anwenden.