Backbone 和 Require 如何添加 Qunit [英] Backbone and Require how to add Qunit

问题描述

我正在使用 Backbone 和 Require.js.一切都很好，但是，我想向我的应用程序添加一些单元测试.我决定使用 Qunit.js.

I'm using Backbone and Require.js. Everything works great but, I would like to add some unit tests to my application. I decided use Qunit.js.

在我的 ma​​in.js 文件中，我创建了新对象 EventsView:

In my main.js file I create new object 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 我渲染主视图

In eventsView.js initialize I render the main view

  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 中从此视图调用函数.我不能这样做，因为视图将再次呈现:

So now I need to call functions from this view in other file eventsView_test.js. I can't do it like this because the View will be rendered again:

  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" );
    });

我该怎么办?我需要某种单身人士还是其他什么?

What should I do? Do I need some kind of singleton or something else?

推荐答案

奇妙的问题，一个我一直看到的问题.

Fantastic question, and one that I see all the time.

我实际上是通过创建我称之为引导程序"范例来解决这个问题的，但不管你怎么称呼它.关键是 Backbone 视图不会渲染自己，而是由使用它的人负责.您会遇到 fetch() 之类的问题，幸好这也解决了这个问题.

I actually solved this by creating what I dubbed a "bootstrap" paradigm, but call it whatever you want. The key is that the Backbone view does not render itself, but instead whomever consumes it is responsible for that. You'll run into issues with fetch() and the like, so thankfully this solves that too.

目标:不要对渲染进行单元测试，而是一起跳过它！

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 非常棒，尤其是 Backbone 实现，因为它具有强大的模拟功能，可用于阻止渲染和服务器调用(fetch、save 等)实际命中服务器，同时仍然允许您断言他们被调用了.

Use SinonJS

I strongly recommend checking out SinonJS. It's amazing for unit testing JavaScript, particularly Backbone implementations due to its powerful mocking which can be used from preventing the rendering and server calls (fetch, save, etc) from actually hitting the server while still allowing you to assert they got called.

这篇关于Backbone 和 Require 如何添加 Qunit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！