2016-12-29 11 views
0

子コンポーネントが1つあるコンポーネントがあります。このような何か:角2 - 子コンポーネント内のイベントへのコールバック

<custom-component (customEvent)="foo()"></custom-component> 

FOOは、単純なインクリメントであると仮定し、ものを行う機能です。

カスタムイベントが発生した後に実際に増分が発生することを保証する単体テストを作成したいと思います。これは現在動作しません

let oldValue = component.variableThatShouldBeIncremented; 
childComponent.onCustomEvent.emit(); 
expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue); 

:私はテストで現在実行しようとしました何

はこのようなものです。しかし、もし私がsetTimeoutにexpectをラップするなら、それはします。イベントが非同期であるため、これは意味があります。

私はsetTimeoutを取り除きたいです。 「イベントコールバックが完了するまで待つ」という方法がありますか?

私は例を調べようとしましたが、特定のイベントを発行した結果をチェックするのではなく、特定のイベントが発行されたことを確認するテストしか見つかりませんでした。

EDIT:

私が正しいのためyurzui答えを取っています。コードが機能するはずです。私は実際に問題を引き起こしていたコード、すなわちfoo関数を省略して、Qのコードを単純化して間違いを犯しました。

この関数はサービスから関数を呼び出していましたが、単純なインクリメントではありませんでした。

私の実際の問題は、サービスの模擬バージョン用に作成されたスパイが、イベントハンドラ内の関数呼び出しを登録していないということでした。テストでは

:問題は今、あなたは非同期と利用ダニを使用する必要があるだろう

+0

なぜ

@Output('customEvent') onCustomEvent = new EventEmitter(); 

をし、最終的にあなたのテストが渡されます:あなたは

<custom-component (customEvent)="foo()"></custom-component> 

次のテンプレートを持っている場合たとえば、あなたの出力イベントは次のようになります。 '(customEvent)=" foo() "'の代わりに '(customEvent)=" foo "'を書くのですか? – yurzui

+0

申し訳ありませんが、それはタイプミスでした。私は質問を編集しました:) –

答えて

1

正常に動作するはずです。変数の正しい名前を使用してもよろしいですか? Plunker Example

it('should work',() => { 
    let oldValue = component.variableThatShouldBeIncremented; 
    childComponent.onCustomEvent.emit(); 
    expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue); 
}); 
+0

私はこの男たちがどこかでonCustomEventを購読していると思いますし、コールバックではvariableThatShouldBeIncrementedが増えており、このようにサブスクリプションをテストしようとしています。 – Milad

+0

@yurzuiが正しいです。私は実際に問題を抽象化したミスをしました。 "foo"関数で実際にやっていることは、(注入された)サービスを呼び出すことです。私はこのサービスの模擬バージョンでスパイしようとしていたが、うまくいかなかった。 私は最初に問題が同期に関するものだと思ったので、実際の問題は関数の呼び出しを登録しなかったスパイに関するものでした。 –

+0

ボトムライン - 問題は別の場所にあり、コードが機能するはずです。私はyurzui答えを正しいものとしてマークし、質問を編集するので、このQにつまずく他の訪問者は誤解を招くことはありません。 –

0

を解決している

it('should work', fakeAsync(() => { 

     let oldValue = component.variableThatShouldBeIncremented; 
     childComponent.onCustomEvent.emit(); 
     tick(10); // fast forward 10 milliseconds considering that emit would take 10 milliseconds 

      expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue); 
    })); 

任意の方法によって、私はあなたがいることをやっていると仮定しますインクリメントとか、あなたが加入している場合だけで見ることが取り組んでいる、その場合には、これを処理するよりよい方法がある:

it('should work', fakeAsync(() => { 

    childComponent.customEvent.subscribe((data)=>{ 
     expect(data).toBe('what ever you expect to be emitted'); 
    }); 
    childComponent.onCustomEvent.emit(); 

})); 

ない場合これを無視してください。

+0

こんにちはMilad、あなたの答えに感謝します。私の問題は実際には異なっていて、関数fooが実際に何をしているか(サービスを呼び出すのであってインクリメントではない)に関係していることがわかりました。問題を抽象化することで、私は本当の問題を隠しました。 –

関連する問題