测试 Backbone.js 视图

Question

我目前正在使用 Jasmine 测试主干视图，但遇到了一些问题。我试图将视图与所有其他元素（实例化的其他视图，集合）隔离开来，但这几乎是不可能的。

initialize: function(options) {
    if(options.return) {return;}
    var view = this;
    var name = options.name;
    var localizedElements = app.helpers.Locale.l().modules.case[name];
    var swap, notification;
    this.name = name.capitalizeFirstLetter();
    this.collection.on('sort', this.refreshGui, this);
    return this.render('/case/' + name + '/' + this.name + 'Box.txt', localizedElements, this.$el).done(function() {
        new app.views.Buttons({el: view.$el.find('.Buttons')});
        _.each(view.collection.models, function(model) {
            new app.views['Folded' + this.name]({model: model, el: this.$('table')});
        }, view);
        if(!view.collection.findWhere({isPreferred: true}) || !view.collection.findWhere({isPrescribedForms: true})) {
            if(!view.collection.findWhere({isPreferred: true})) {
                swap = {entity: 'address', preferenceType: 'preferred'};
                notification = app.helpers.Locale.l().generic.warningMessages.missingPreference.swap(swap);
                var preferredNotification = [notification];
                app.helpers.Notification.addNotifications('warnings', {missingPreferred: preferredNotification});
            }
            if(!view.collection.findWhere({isPrescribedForms: true})) {
                swap = {entity: 'address', preferenceType: 'prescribed forms'};
                notification = app.helpers.Locale.l().generic.warningMessages.missingPreference.swap(swap);
                var prescribedFormsNotification = [notification];
                app.helpers.Notification.addNotifications('warnings', {missingPrescribedForms: prescribedFormsNotification});
            }
        }
    });
},

例如，如果有两个“if”，则视图正在与集合和一个助手对话：“通知助手”。如果我嘲笑集合和通知助手，我应该如何测试这部分代码？我的意思是我正在测试 VIEW，但现在看来我必须在我的视图中测试我的应用程序的其他元素......

Answer 1

我正在尝试将视图与所有其他元素隔离开来

我不确定这是否对您有帮助，但我制定了自己的策略来解决这个问题。
Backbone 的问题通常是视图对象变得杂乱无章。
就个人而言，我喜欢我的视图来处理 DOM 交互，监听 DOM 事件。
但是为了与后端执行业务逻辑/交互，我更喜欢将此功能委托给其他“外部”对象。

另一方面，模型“可能”处理基本数据验证，但除了在我的应用程序中与服务器进行 RESTful 交互外，什么也不做。

我解决问题的方法是实例化自定义 Javascript（“控制器”）对象，这些对象充当视图和模型之间的中介。
这个对象只不过是一个看起来大致像这样的对象：

var Some_controller = function(options){ 
    this.makeView(); 
}; 

Some_controller.prototype.makeView = function(){
    var someView = new Some_view({'controller': this}); 
    someView.render(); //Render, but can also take care of proper view cleanup to avoid zombie objects 
}; 

Some_controller.prototype.getModel = function(){ 
    var someModel = new Some_model(); 
    var promise = model.fetch(); 
    return promise; //Promise be called from the view, because the controller is passed via the options, when the view is instantiated.  
}; 

嗯，这就是我试图保持我的观点干净的方式。
以我的经验，很容易立即找到所有东西；请注意，您还可以使用辅助对象来隔离更具体的业务功能。
不确定其他人是否有更好的解决方案。