angular2 单元测试：如何使用 triggerEventHandler 测试事件

Question

我正在尝试使用 angular2 rc1 为 click 事件编写单元测试。我的组件使用onClick() 方法处理点击事件，并将name 字段从bar 更改为foo。看到这个plunker。

现在我想触发一个click 事件来测试name 的值是否为bar。请参阅 plunker 上的 unit-testing.spec.ts 文件。

it('should change name from foo to bar on click event', inject([], () => {
return builder.createAsync(UnitTestingComponentTestController)
  .then((fixture: ComponentFixture<any>) => {
    let query = fixture.debugElement.query(By.directive(UnitTestingComponent));
    expect(query).toBeTruthy();
    expect(query.componentInstance).toBeTruthy();

    // fixture.detectChanges();
    expect(query.componentInstance.name).toBe('foo');
    query.triggerEventHandler('click',{});
    expect(query.componentInstance.name).toBe('bar');
    // fixture.detectChanges();
  });
}));

这里是UnitTestingComponentTestController

@Component({
selector: 'test',
template: `
<app-unit-testing></app-unit-testing>
`,
directives: [UnitTestingComponent]
})
class UnitTestingComponentTestController {
}

此测试失败并显示以下消息：

Expected 'foo' to be 'bar'.

这是triggerEventHandler()的方法签名

triggerEventHandler(eventName: string, eventObj: any): void;

我的问题是如何触发事件并使用 angular2 对其进行测试。

一种解决方案可能是在componentInstance 上调用onClick() 方法，但在这种情况下，我们只测试类的内部，而不是组件行为

Answer 1

阅读this 文章后，现在我可以在我的测试中触发点击事件。这种方法不使用triggerEventHandler。如果你的模板是这样的：

<div class="my-class" (click)="onClick()">
  <ul id="my-id">
    <li></li>
    <li></li>
  </ul>
</div>

您可以使用fixture.nativeElement.querySelector(<your selector>).click() 触发选定元素的点击事件。这种方法调用 javascript click() 函数（见this）

您可以根据其id、class 或路径（xpath？）来选择元素。例如：

fixture.nativeElement.querySelector('.my-class').click()

或

fixture.nativeElement.querySelector('#my-id').click()

或

fixture.nativeElement.querySelector('div>ul>li').click()