2016-02-10 8 views
18

私が持つEventEmitterを使用して、ページ上の誰かがクリックされたときに持つEventEmitterが使用されているコンポーネントを持っています。私はユニットテスト中に持つEventEmitterを観察し、EventEmitter.next()メソッドをトリガー要素をクリックして、送信されたかを確認するTestComponentBuilderを使用することができます方法はありますか?Angular2でEventEmitterをテストする方法はありますか?

+0

は、あなたがしようとしているかを示しplunkerを提供することができます... emitがオフに解雇されているかどうかを確認するために簡単にスパイを使用する方法ですが、私は欠けている部分を追加するための外観を持つことができます。 –

答えて

48

あなたのテストは次のようになります。

it('should emit on click', inject([],() => { 
    tcb.createAsync(MyComponent) 
     .then((fixture) => { 
     // spy on event emitter 
     let component = fixture.componentInstance; 
     spyOn(component.myEventEmitter, 'emit'); 

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

     fixture.detectChanges(); 

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

コンポーネントがあるとき:

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

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

ボタンの代わりにクリックしているアンカーであれば、クエリセレクタはボタンの代わりになりますか?私はそのコンポーネントとまったく同じものを使用していますが、 'expect(value).toBe(' hello ');'決して走らない。私はそれがアンカーであるからだと思います。 – tallkid24

+0

実際のエミッタの代わりにスパイを使用して、より洗練された方法で自分の答えを更新しました。これは動作するはずです(実際に電子ブックのサンプルに対して行っています)。 – cexbrayat

+0

これは大変感謝しています!私はフロントエンドの開発、特にそれをユニットテストするのが初めてです。これは大いに役立ちます。私はspyOn関数が存在することさえ知りませんでした。 – tallkid24

1

あなたがエミッタに加入したり、それに結合し、それが@Output()であれば、親テンプレートにし、バインディングが更新された場合、親コンポーネントで確認することができます。 clickイベントを送出して、サブスクリプションを起動することもできます。

+0

だから emitter.subscribeようなかった場合(データ=> { })。 どうすればnext()出力が得られますか? – tallkid24

+0

正確に。または 'TestComponent'が持つ'でテンプレート<私の成分(someEmitter)= "値= $イベントは"> '' TextComponent'の後、[値]プロパティ(ここで、 'someEmitter'は' @output() 'です)送信されたイベントで更新する必要があります。 –

4

はあなたが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(); 
}); 

代わりに、あなたはスパイを使用することができますが、あなたのスタイルに依存します。ここで

it('should emit on click', fakeAsync(() => { 
    spyOn(component.eventEmitter, 'emit'); 
    component.buttonClick(); 
    tick(1); 
    expect(component.eventEmitter.emit).toHaveBeenCalled(); 
    expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar'); 
})); 
関連する問題