如何实际触发点击事件并检查 Angular2 中的结果

Question

我想实际检查一下，selected 属性是否已使用 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。您要测试组件变量为 true.

在 fixture.detectChanges() 之后，您会想要 expect( component.player.selected ).toBeTruthy()。这是假设您有一个用于测试的 TestBed。

如果您要实际检查 bootstrap 表单组中的 "activated" 状态（未选中），则需要在您的 [ngClass]="{'selected':player.selected}" 中应用*ngFor 循环。

如何实际触发点击事件并检查 Angular2 中的结果

How to actually trigger a click event and check the outcome in Angular2

angular

angular2-testing