如何在Angular2中實際觸發點擊事件並檢查結果

Question

我想實際檢查一下， 所選屬性是用true而不是undefined呈現的。

我的工作（手動測試）組件功能：

export class PlayerSelectorComponent implements OnInit {

    players: any = []

    ...

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

}

這是模板：

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

這是測試代碼：

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

在代碼的最后一行中，您可以看到，我的測試未檢測到單擊后實際上更改了player.attributes.selected。 它仍然是不確定的。

Answer 1

問題是您正在查詢CSS，但實際上沒有在發布的任何內容中操縱CSS。 您要測試component變量是否為true 。

你之后fixture.detectChanges()你要去想expect( component.player.selected ).toBeTruthy() 這是假設您有用於測試的TestBed。

如果您要實際檢查引導表單組上的“已激活”狀態（未選中），則需要在*中應用[ngClass]="{'selected':player.selected}" ngFor循環。