单元测试 – angular2单元测试:如何使用triggerEventHandler测
发布时间:2020-12-17 06:53:25 所属栏目:安全 来源:网络整理
导读:我正在尝试使用angular2 rc1为click事件编写单元测试.我的组件使用onClick()方法处理click事件,并将name字段从bar更改为foo.看这 plunker. 现在我想触发一个click事件来测试名称值是否为bar.请参阅plunker上的unit-testing.spec.ts文件. it('should change n
我正在尝试使用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() (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |