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

Question

我想实际检查所选属性是否已使用 true 而不是未定义呈现。

我的工作(手动测试)组件功能：

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().这是假设你有一个用于测试的测试平台。

如果您希望实际检查引导表单组上的"已激活"状态(未选择)，则需要在 *ngFor 循环中应用[ngClass]="{'selected':player.selected}"。