有什么方法可以在Angular2中测试EventEmitter? [英] Any way to test EventEmitter in Angular2?

问题描述

我有一个使用EventEmitter的组件，当单击页面上的某人时，将使用EventEmitter.有什么方法可以在单元测试期间观察EventEmitter，并使用TestComponentBuilder单击触发EventEmitter.next()方法的元素，并查看发送了什么?

I have a component that uses an EventEmitter and the EventEmitter is used when someone on the page is clicked. Is there any way that I can observe the EventEmitter during a unit test, and use TestComponentBuilder to click the element that triggers the EventEmitter.next() method and see what was sent?

推荐答案

您的测试可能是:

it('should emit on click', () => {
   const fixture = TestBed.createComponent(MyComponent);
   // spy on event emitter
   const component = fixture.componentInstance; 
   spyOn(component.myEventEmitter, 'emit');

   // trigger the click
   const nativeElement = fixture.nativeElement;
   const button = nativeElement.querySelector('button');
   button.dispatchEvent(new Event('click'));

   fixture.detectChanges();

   expect(component.myEventEmitter.emit).toHaveBeenCalledWith('hello');
});

当您的组件是:

@Component({ ... })
class MyComponent {
  @Output myEventEmitter = new EventEmitter<string>();

  buttonClick() {
    this.myEventEmitter.emit('hello');
  }
}

这篇关于有什么方法可以在Angular2中测试EventEmitter?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！