Emberコンポーネントテスト - 外部アクションを呼び出さない場合のユニットテストコンポーネントのアクション

Question

私はEmberにとって新しく、ページャーコンポーネントをテストしようとしています。簡体コンポーネントは次のようになります。

export default Ember.Component.extend({ 
    index: 0, 
    actions: { 
     next() { 
      this.incrementProperty('index'); 
     } 
    } 
}); 

私は予想通り次の（）アクションが実際にインデックスプロパティをインクリメントないことをテストしようとしています。私はこのようなユニットテストを書いた：

test('next should increment the index by 1', function (assert) { 
    const component = this.subject(); 

    assert.equal(component.get('index'), 0, 'Index should be 0'); 

    component.get('actions').next(); 
    assert.equal(component.get('index'), 1, 'index should be 1'); 
}); 

しかし、それは「this.incrementPropertyは関数ではありません」というエラーで失敗します。デバッグでは、next（）関数の中でテスト中の "this"はコンポーネントのコンテキストではなく、next（）を唯一のプロパティとして持つオブジェクトです。

これは、テストでnextPlaceアクションを呼び出す方法が原因であると思います。私は、このアクションを発生させるボタンをクリックし、UIを比較して変更を確認する統合テストを書くことができると知っていますが、テストしようとしているのは、関数自体が期待どおりに機能することです。このコンポーネント（クロージャアクション）に渡されたアクションであれば、統合テストでダミー関数を設定し、それをコンポーネントに渡して、それがどのように応答するかを確認できます。しかし、このアクションはそれに引き継がれたアクションを呼び出さない。

私がテストしている機能は本当に基本的なものだが、部分的には、外部（コンポーネント）アクションを呼び出さないコンポーネントでアクションをテストする方法を理解することです。

Answer 1

統合テストを書かないという動機を表明していない場合は、統合テストを書くことをお勧めします。 IMO、あなたの理由は有効です。私はあなたのケースのユニットテストを起動するための3つの提案をしました。

まず第一に：動作しないの理由はcomponent.get('actions').nextは任意の文脈なしnext関数への参照を取得する」であるので、thisは、その呼び出しでは有効ではありません、それが有効にするには、以下に示すようにちょうどそれにコンポーネントをバインドします。 ：

component.get('actions').next.bind(component)(); 

しかし、我々はnext関数はその中thisへの参照を持っていることを知っているので、私は、我々はこのbindことをやっている、それはその文脈からnextを抽出しているので、これを好むし、再びそれを結合しないでしょう。コード。

私の2番目の提案は「イベントを引き起こす方法」です。それをトリガするには、次のコードを見てください：

component.send('next'); 

IMO、これは良いです。私たちは「次のことが何をしているか」を知る必要はありません。私たちはちょうどイベントをトリガーしています。

しかし、これはemberコンポーネントのライフサイクルを処理しています。この状況を受け入れる：actionsと呼ばれる特定のハッシュがあり、sendでトリガーできます。 （これは完全に問題ありません）actionsを処理する代わりに、doing somethingをaction handlingから分離することができます。したがって、必要な処理を行う別の関数を定義して、単にアクションハンドラから呼び出すことができます。 （[OK]を、このケースでは、我々は再びアクションハンドラによって呼び出されるものの機能を知っている必要がありますが、これは私のために、より明確なようだ。。）以下に示すよう：

next(){ 
    this.incrementProperty('index'); 
}, 
actions:{ 
    next(){ 
    this.next(); 
    } 
} 

あなたはthis twiddleで、すべての3つの選択肢を見ることができます。