私が持つEventEmitterを使用して、ページ上の誰かがクリックされたときに持つEventEmitterが使用されているコンポーネントを持っています。私はユニットテスト中に持つEventEmitterを観察し、EventEmitter.next()メソッドをトリガー要素をクリックして、送信されたかを確認するTestComponentBuilderを使用することができます方法はありますか?Angular2でEventEmitterをテストする方法はありますか?
答えて
あなたのテストは次のようになります。
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');
}
}
ボタンの代わりにクリックしているアンカーであれば、クエリセレクタはボタンの代わりになりますか?私はそのコンポーネントとまったく同じものを使用していますが、 'expect(value).toBe(' hello ');'決して走らない。私はそれがアンカーであるからだと思います。 – tallkid24
実際のエミッタの代わりにスパイを使用して、より洗練された方法で自分の答えを更新しました。これは動作するはずです(実際に電子ブックのサンプルに対して行っています)。 – cexbrayat
これは大変感謝しています!私はフロントエンドの開発、特にそれをユニットテストするのが初めてです。これは大いに役立ちます。私はspyOn関数が存在することさえ知りませんでした。 – tallkid24
あなたがエミッタに加入したり、それに結合し、それが@Output()
であれば、親テンプレートにし、バインディングが更新された場合、親コンポーネントで確認することができます。 clickイベントを送出して、サブスクリプションを起動することもできます。
だから emitter.subscribeようなかった場合(データ=> { })。 どうすればnext()出力が得られますか? – tallkid24
正確に。または 'TestComponent'が持つ'でテンプレート<私の成分(someEmitter)= "値= $イベントは"> '' TextComponent'の後、[値]プロパティ(ここで、 'someEmitter'は' @output() 'です)送信されたイベントで更新する必要があります。 –
はあなたが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');
}));
- 1. Angular2とEventEmitterをテストする
- 2. Angular2:EventEmitterが起動することがあります。
- 3. Angular2 ngOnInitエラーのEventEmitterサブスクリプションでモジュールをテストする
- 4. EventEmitterのAngular2ツリーチェックボックス
- 5. Clojureでマクロをテストする方法はありますか?
- 6. レスポンシブCSSをSeleniumでテストする方法はありますか?
- 7. gWidget:テストでユーザーアクションをエミュレートする方法はありますか?
- 8. `createReadStream`でEventEmitterをモックする方法は?
- 9. angular2 @Input EventEmitter update view
- 10. ScalaMockをテストに使用する方法はありますか?
- 11. SQLAlchemy Connectionをテストする方法はありますか?
- 12. 、特定のタグをテストする方法はありますか?
- 13. Angular2でwrapbootstrapテーマを使用する方法はありますか?
- 14. Angular2 EventEmitterが親コンポーネントに射影する
- 15. ifテストに合格する方法はありますか?
- 16. CSSをテストする方法はありますか?IEデベロッパーツールのホバーですか?
- 17. QuickCheckテストでパニックを静かにキャッチする方法はありますか?
- 18. Angular2、doeのEventEmitterにはzone.runが必要ですか?
- 19. Angular2には、ルータからルートリストを取得する方法がありますか?
- 20. RxJsのSubjectとAngular2のEventEmitter
- 21. DialogFlowの統合テストを書く方法はありますか?
- 22. Websphere LibertyでDatasourceをtradtionalとしてテストする方法はありますか?
- 23. Spring MVCテストでAssertJアサーションを使用する方法はありますか?
- 24. Chutzpahで1回のテストを実行する方法はありますか?
- 25. JUnitテストでJMSを使用する方法はありますか?
- 26. Rubyで親クラスをテストする良い方法はありますか?
- 27. rspecテストでgmaps4railsジオコード関数をスタブする方法はありますか?
- 28. EspressoでChromeのカスタムタブをテストする方法はありますか?
- 29. Arquillianテストで@DependsOnアノテーションを無効にする方法はありますか?
- 30. phpunitテスト間でインスタンス変数を保持する方法はありますか?
は、あなたがしようとしているかを示しplunkerを提供することができます...
emit
がオフに解雇されているかどうかを確認するために簡単にスパイを使用する方法ですが、私は欠けている部分を追加するための外観を持つことができます。 –