有什么方法可以在 Angular2 中测试 EventEmitter

发布于02月10日

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

推荐答案

您的测试可能是:

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');
  }
}