如何在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循环。