web-dev-qa-db-ja.com

Angular2でEventEmitterをテストする方法はありますか？

EventEmitterを使用するコンポーネントがあり、ページ上の誰かがクリックされたときにEventEmitterが使用されます。単体テスト中にEventEmitterを観察し、TestComponentBuilderを使用してEventEmitter.next（）メソッドをトリガーする要素をクリックし、送信されたものを確認する方法はありますか？

unit-testingangular
46
tallkid24

テストは次のとおりです。

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

eventEmitterというイベントエミッターを起動するbuttonClick()というメソッドがあり、イベントにサブスクライブしてから、メソッドを呼び出してイベントが起動するかどうかを確認し、コールバックdone()するとき...

@Component({ ... })
class MyComponent {
    @Output() eventEmitter = new EventEmitter();

    buttonClick() {
      this.eventEmitter.emit('bar');
    }
}

そして、テストで...

it('should emit on click', (done) => {
    component.eventEmitter.subscribe(foo => {
        expect(foo).toEqual('bar');
        done();
    });
    component.buttonClick();
});

または、スタイルに応じて、スパイを使用することもできます。スパイを使用してemitが発射されるかどうかを簡単に確認する方法は次のとおりです...

it('should emit on click', () => {
    spyOn(component.eventEmitter, 'emit');
    component.buttonClick();
    expect(component.eventEmitter.emit).toHaveBeenCalled();
    expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar');
});
32
Joshua Michael Calafell

親テンプレートでエミッタを@Output()である場合はエミッタにサブスクライブまたはバインドし、バインディングが更新されたかどうかを親コンポーネントにチェックインできます。また、クリックイベントをディスパッチすると、サブスクリプションが発生します。

3
Günter Zöchbauer