使用模板进行 Jasmine 测试答案

【问题标题】：Jasmine testing with Templates使用模板进行 Jasmine 测试
【发布时间】：2011-10-24 13:37:52
【问题描述】：

我正在尝试使用 Jasmine（带有 yaml 配置的 gem）来测试 Backbone.js 应用程序。我正在使用像Todo example 这样的下划线模板。

template: _.template($('#item-template').html())

我的问题是我无法在模型/视图之前加载模板，因此模板调用会导致这些类在加载时出错。

我已经阅读了有关 jasmine-jquery 插件来做固定装置的信息，但问题是我的 src 文件（模型/视图）在我获得规范文件并能够设置所需的固定装置之前就被加载并失败了.

如何让模板足够早地加载，它们可以用于重置我的类？

【问题讨论】：

标签： templates backbone.js bdd jasmine jasmine-jquery

【解决方案1】：

你可以延迟 jQuery 选择器直到你需要它：

render: function(){
  var templateHtml = $(this.template).html();
  _.template(templateHtml);
}

或者您可以在视图初始化时运行选择器：

initialize: function(){
  this.template = _.template($(this.template).html());
}

或者，如果您真的想保留代码原样并在定义视图时让选择器评估，您可以将所有 Backbone 代码包装在一个函数中，当您想要初始化整个应用程序代码时调用该函数...例如真实 HTML 页面上的 jQuery $(function(){} 函数，或 Jasmine 测试中的 beforeEach 函数：

MyApp = (function(){
  var myApp = {};

myApp.MyView = Backbone.View.extend({
    template: _.template($("#item-template").html())
    // ...
  });

return myApp;
});

然后在您的应用程序中启动它：

$(function(){
  var myApp = MyApp();
  new myApp.MyView();
  // ...
});

在你的 Jasmine 测试中：

describe("how this thing works", function(){
  beforeEach(function(){
    var myApp = MyApp();
    this.view = new myApp.MyView();
    // ...
  });
});

一旦你有了这些解决方案之一，你就可以使用 Jasmine-jQuery 之类的东西来加载你的固定装置。

FWIW：我倾向于根据需要结合使用这些技术。

【讨论】：

...我的代码块和格式发生了一些奇怪的事情

【解决方案2】：

已接受答案的第一部分的一个问题是每次实例化视图时都会编译模板。一种替代方法是直接在视图的原型上设置模板：

app.TodoView = Backbone.View.extend({
    initialize: function(){
        if (!app.TodoView.prototype.template) {
            app.TodoView.prototype.template = _.template($("#item-template").html());
        }
    }            
});

这样，模板在TodoView 的第一个实例被实例化时编译一次。

【讨论】：