Jasmine 测试使用预编译车把模板的主干视图答案

【问题标题】：Jasmine testing backbone views that use precompiled handlebars templatesJasmine 测试使用预编译车把模板的主干视图
【发布时间】：2013-12-06 06:01:50
【问题描述】：

我在这里不知所措。

我希望开始使用 jasmine 为我正在开发的网站添加测试。不过，我无法测试我的任何视图，因为在我的视图的初始化函数中定义的模板是保存在对象中的预编译车把模板。

我的设置是这样的：

index.jade 在我的节点服务器上预编译。这个玉文件有一堆

<script id="[name]" type="text/x-handlebars-template">

在其中，每个视图都有 sn-ps。索引页的底部是一个 jQuery $.each 调用：

  var templates = {};
  $("[type='text/x-handlebars-template']").each(function(index, div){
    templates[div.id] = Handlebars.compile(div.innerHTML);
  });

循环遍历所有这些脚本标签，编译它们，并将它们加载到模板对象中。然后我将此对象保存为我的主应用模型的属性，以便根据需要传递给视图。

这对网站本身很有效，但已被证明是一个测试障碍。当我尝试加载我的视图时，它们不会初始化，因为这样做需要主模型上的“模板”对象，并从索引中提取的脚本标签填充。但是我的 specRunner 中不存在 index.html，因为每次我进行更改时，我都将所有脚本标签复制/粘贴到 spec runner 中。

我不知道这里的解决方法是什么。我确定这很简单，而且我太密集了，看不到它，但我一直在尝试并在五个小时的大部分时间里寻找解决方案，但没有任何东西可以展示。

我知道我可以使用 grunt 将 .jade 文件编译为 .html，但过去我不确定如何将 html 文件中的信息获取到我的 SpecRunner。

【问题讨论】：

看起来 this.model 未定义。您可以检查为什么它没有正确设置。

标签： backbone.js handlebars.js jasmine

【解决方案1】：

所以这很复杂，但由于 grunt 的魔法，我得到了它的工作。

我将 grunt 设置为使用 grunt-contrib-jade 和 grunt-contrib-handlebars，它会自动将我的翡翠包含页面编译为 HBS，然后将这些 HBS 文件编译为 JS。

jade: {
  compile: {
    options: {
      pretty: true
    },
    files: [ {
      cwd: "views/templates",
      src: "**/*.jade",
      dest: "spec/hbs",
      expand: true,
      ext: ".hbs"
    } ]
  }
},

handlebars: {
  compile: {
    options: {
      namespace: "compTemplates",
    },
    files: [ {
      expand: true,
      cwd: 'spec/hbs',
      src: '**/*.hbs',
      dest: 'spec/helpers',
      ext: '.js'
    } ]
  }
},

这些 JS 文件中的每一个都会将它们的内容添加到 compTemplates 对象中。这些 JS 文件都是通过 Grunt 预加载到 Jasmine specRunner 中的，最后一个帮助程序（我称之为“z.js”以确保它最后加载）包括：

var templates = {};

for (var prop in window['compTemplates']) {
  var name = prop.split('/')[3];
  name = name.split('.')[0];
  templates[name] = window['compTemplates'][prop];
}

瞧！我有一个可供 Jasmine 使用的模板对象，其中包括准备加载到我的视图中的所有车把模板！

【讨论】：