backbone.jsでイベントの単体テストを書く方法

私はユニットテストを書くことで冒険を始めますので、気楽にしてください。私のアプリでは、jQuery、backbone.js、underscore.js、そしてmocha.jsとchai.jsのテストに使用しています。このツールを使ってイベントをテストする方法がわからないので問題があります。 Foxの例入力の値を変更する関数を持っています。変更後のチェックボックスの値を呼び出します。backbone.jsでイベントの単体テストを書く方法

test.htmlというファイル：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Backbone.js Tests</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="stylesheet" href="js/lib/mocha.css" /> 
    <script src="js/lib/mocha.js"></script> 
    <script src="js/lib/chai.js"></script> 
    <!-- <script src="js/lib/sinon.js"></script> --> 
    <script> 
     // Setup 
     var expect = chai.expect; 
     mocha.setup('bdd'); 

     // Run tests on window load event. 
     window.onload = function() { 
      (window.mochaPhantomJS || mocha).run(); 
     }; 
    </script> 

    <!-- App code --> 
    <script src="../public/static/js/libs/jquery-2.1.4.min.js"></script> 
    <script src="../public/static/js/libs/js.cookie-2.1.0.min.js"></script> 
    <script src="../public/static/js/libs/bootstrap.min.js"></script> 
    <script src="../public/static/js/libs/underscore-min.js"></script> 
    <script src="../public/static/js/libs/backbone-min.js"></script> 
    <script src="../public/static/js/libs/backbone-relational.min.js"></script> 
    <script src="../public/static/js/libs/backbone-super.min.js"></script> 
    <script src="../public/static/js/libs/handlebars-v4.0.5.min.js"></script> 
    <script src="../public/static/js/application.js"></script> 
    <script src="../public/static/js/main.js"></script> 
    <script src="../public/static/js/views/register.js"></script> 
    <script src="../public/static/js/views/modals/sign-in-modal.js"></script> 
    <script src="../public/static/js/views/modals/sign-up-modal.js"></script> 
    <script src="../public/static/js/helpers/forms.js"></script> 
    <script src="../public/static/js/helpers/alerts.js"></script> 
    <script src="../public/static/js/helpers/inpage-alerts.js"></script> 
    <script src="../public/static/js/collections.js"></script> 
    <script src="../public/static/js/models.js"></script> 
    <script src="../public/static/js/kodilla.lib.js"></script> 
    <script src="../public/static/js/views/knowledge-base.js"></script> 
    <script src="../public/static/js/libs/tether.min.js"></script> 

    <!-- Tests --> 
    <script src="js/spec/register.spec.js"></script> 

</head> 
<body> 
    <div id="mocha"></div> 
</body> 
</html>

register.jsファイル：

App.Views.Register = Backbone.View.extend({ 
    events: { 
     'click input[name="terms"]' : 'changeTermsConfirmation', 
     'click [type=submit]': 'onSubmitForm' 
    }, 
    initialize: function(options) { 
     this.$termsConfirmedAtHidden = this.$('input[name="terms_confirmed_at"]'); 
    }, 
    changeTermsConfirmation: function(e) { 
     if ($(e.currentTarget).is(":checked")) { 
      this.$termsConfirmedAtHidden.val(Math.floor(Date.now()/1000)); 
     } else { 
      this.$termsConfirmedAtHidden.val(''); 
     } 
    }, 
    onSubmitForm: function() { 
     if (!this.$el.find('input[name="terms"]').is(':checked')) { 
      analytics.track('auth_register_not_checked_terms'); 
     } 
    } 
});

register.spec.jsファイル：

$(document).ready(function() { 

    describe('Register Form', function() { 

     App.registerView = new App.Views.Register(); 

     describe('initialize() function', function() { 
      it('Should initialize this.$termsConfirmedAtHidden variable by HTML object', function() { 
       expect(App.registerView.$termsConfirmedAtHidden).to.be.a('object'); 
      }); 
     }); 

     describe('changeTermsConfirmation() function', function() { 
      it('Should set value of $termsConfirmedAtHidden element', function() { 
       //how to test this function 
      }); 
     }); 

    }); 

});

私の質問は、 "changeTermsConfirmation（）"関数の合理的な単体テストを書く方法です。私は、他のノート、使い方のヒントに感謝します。

出典

2016-10-12 Dominik Krzywiecki

多分私は、あなたが始めるかもしれない情報のいくつかのビットであなたを助けることができます。

モカ/チャイはモジュラーなので、まずモック/スパイのライブラリをプロジェクトに組み込む必要があります。ほとんどの人のデフォルトの選択肢はSinon（Sinon-Chai）です。

次にあなたが調べて、ユニットあなたのイベントハンドラをテストすることができます。

は、テスト用のビューインスタンスを作成します。
は、あなたのメソッドが呼び出された回数を確認することができ、あなたのビュー・インスタンス上
あなたの期待をtriggerを呼び出すことによって、あなたは（あなたのケースでchangeTermsConfirmationを）
トリガイベントをテストしたいビュー方式のスパイを設定し、引数とその戻り値は何であったのでしょうか。

気にしなくてもビューの状態の変更をテストしたい場合は、スパイは必要ありません（また、Sinonのようなライブラリを含める必要はありません）。ビューインスタンスを作成し、triggerと呼び出して、結果を調べてください。

出典

2016-10-12 12:50:52 hashchange

ありがとうございました！インスタンスのビューを作成する方法についてもっと教えてください。あなたはsepareted HTMLマークアップを作成する必要がありますか？この場合、1ページまたは端末からすべてのテストを呼び出す方法はありますか？ –

あなたが持っているHTML文書を使うことができます。 'body'をつかみ、' div'を追加し、 'div'の中にあなたのビューを作り、' div'をきれいにします。ブラウザでテストを実行すると、 'body'はテスト（結果）ページに属します - それを使用する上で問題はありません。コマンドラインからテストを実行する場合、[PhantomJS]（http://phantomjs.org/）のような（ヘッドレス）ブラウザを使うことができます。そして、 'body'はそのブラウザのデフォルトドキュメントに属します。 – hashchange

ありがとうございます。私はこれが動作することを知っているが、それは良い練習（私はいくつかの 'div 'を現在のhtmlページの本文に追加することを意味する）ですか？申し訳ありませんが多分愚かな質問が、私は実際にこの件名の初心者です;） –

backbone.jsでイベントの単体テストを書く方法

答えて

関連する問題