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

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

现在我想触发一个click事件来测试名称值是否为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()方法,但在这种情况下我们只测试类的内部而不是组件行为

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

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

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

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