我正在尝试使用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()方法,但在这种情况下我们只测试类的内部而不是组件行为
解决方法
阅读
this文章后,现在我可以在我的测试中触发click事件.此方法不使用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,类或路径(xpath？)选择元素.例如：
fixture.nativeElement.querySelector('.my-class').click()
要么
fixture.nativeElement.querySelector('#my-id').click()
要么
fixture.nativeElement.querySelector('div>ul>li').click()
