it('should ...', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<any>) => {
fixture.detectChanges();
let com = fixture.componentInstance;
/* query your component to select element*/
let div:HTMLElement = fixture.nativeElement.querySelector('div');
/* If you want to test @output you can subscribe to its event*/
com.resizeTest.subscribe((x:any)=>{
expect(x).toBe('someValue');
});
/* If you want to test some component internal you can register an event listener*/
div.addEventListener('click',(x)=>{
expect(x).toBe('someOtherValue');
});
/* if you want to trigger an event on selected HTMLElement*/
div.dispatchEvent(new Event('mousedown'));
/* For click events you can use this short form*/
div.click();
fixture.detectChanges();
});
6条答案
按热度按时间ryevplcw1#
你需要以编程的方式创建一个事件并触发它。为此,包含jQuery进行单元测试是非常有用的。例如,你可以编写一个简单的实用程序,如下所示:
然后在单元测试中使用它,如下所示:
您可以在http://angular-ui.github.io/bootstrap/项目中看到此技术的实际应用:https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/test/typeahead.spec.js
免责声明:让我们在这里更精确:我并不提倡在AngularJS中使用jQuery!我只是说,它是一个有用的DOM操作工具,可以编写与DOM交互的测试。
要让上面的代码在 * 没有 * jQuery的情况下工作,请更改:
致:
watbbzwu2#
我对使用公认的答案有问题。我找到了其他的解决方案。
工作示例可以在here中找到
2ledvvac3#
我有个类似的东西。
gywdnpxw4#
如果你使用的是angular2,你可以通过调用
HTMLElement
示例上的dispatchEvent(new Event('mousedown'))
来触发任何事件。例如:使用angular 2.rc1测试qyyhg6bp5#
我最近想在一个组件(Angular 2)上测试这个HostListener:
经过一段时间的搜索,这是工作:
ht4b089n6#