[解決済み] Angular2でEventEmitterをテストする方法は？

質問

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