5

Backbone と Require.js を使用しています。すべてがうまく機能しますが、アプリケーションにいくつかの単体テストを追加したいと思います。Qunit.js を使用することにしました。

main.jsファイルで、新しいオブジェクトを作成しますEventsView。

require.config({
  paths: {
    jquery:                 'libs/jquery',
    underscore:             'libs/underscore',
    backbone:               'libs/backbone',
    qunit:                  'test/libs/qunit-1.10.0
    }
 });
 require(['view/eventsView', 
          'test/eventsView_test', 
          'test/eventView_test' ], function(EventsView){
           var events = new EventsView; //here I create first object my View
 });

eventsView.jsでメイン ビューをレンダリングします initialize

  define(['jquery',
          'backbone',
          'underscore',
          'collection/eventC',
          'model/eventM',
          'view/eventView'], function($, Backbone,_,EventC,EventM, EventView,){

 var EventsView = Backbone.View.extend({
    el: $(".contener"),     
    initialize: function(){
        this.render();
     },
     ....//other functions
    });
     return EventsView;
 });

したがって、他のファイルeventsView_test.jsでこのビューから関数を呼び出す必要があります。ビューが再度レンダリングされるため、このようにすることはできません。

  define(['jquery','qunit','view/eventsView'], function($,qunit,EventsView){
    //var eventsView = new EventsView(); // I can't create object here 

    test( "first_test_func", function() {
        var result = eventsView.first_test_func(2,2);
        equal( result, 4, "2 square equals 4" );
    });

私は何をすべきか？ある種のシングルトンまたは何か他のものが必要ですか?

4

1 に答える 1

2

素晴らしい質問であり、私がいつも目にする質問です。

「ブートストラップ」パラダイムと呼んだものを作成することで実際にこれを解決しましたが、好きなように呼んでください。重要なのは、バックボーン ビューがそれ自体をレンダリングするのではなく、それを消費する人がその責任を負うということです。fetch() などで問題が発生するので、ありがたいことにこれも解決します。

目標: レンダリングの単体テストを行わず、すべてスキップしてください。

ビューは次のようになります。

require(function () {
    var view = Backbone.View.extend({
        // initialize is executed on new, just as you found
        initialize: function (options) {
            _.bindAll(this);

            // Create models, initialize properties, and bind to events here.
            // Basically only do __UNEXPENSIVE__, non-dom-changing things that
            // you don't care get executed a lot.                

            this.someCollection = new Backbone.Collection();
            this.someCollection.on('add', this.onSomeCollectionAdd);
        },

        // bootstrap is for server-side operations that you don't want executed
        // by every single test.
        bootstrap: function () {
            this.someCollection.fetch().done(this.render);
        },

        render: function () {
            this.$el.html(...);
        },

        first_test_func: function () {

        }
    });

    return view;
});

これがアプリでどのように消費されるか:

require(['viewpath'], function (myView) {
    var instance = new myView({ el: $('#something') });
    instance.bootstrap(); //triggers fetch, or if no fetch needed, just render
});

これで、心配することなく単体テストを行うことができます。

define(['jquery','qunit','view/eventsView'], function($,qunit,EventsView){

    test( "first_test_func", function() {
        // Now this line won't call the server, or render.
        // You can isolate/test what you want.
        var eventsView = new EventsView();
        var result = eventsView.first_test_func(2,2);
        equal( result, 4, "2 square equals 4" );
    });
});

SinonJS を使用する

SinonJSをチェックすることを強くお勧めします。JavaScript の単体テスト、特にバックボーン実装の強力なモックにより、レンダリングやサーバー呼び出し ( 、 など) が実際にサーバーにヒットするのを防ぎfetchながらsave、それらが呼び出されたことをアサートすることができます。

于 2013-02-09T01:58:45.893 に答える