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

时间:2013-12-06 06:01:50

标签: backbone.js handlebars.js jasmine

我在这里不知所措。

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

我的设置是这样的:

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

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

,其中包含每个视图的片段。在索引页面的底部是一个jQuery $ .each调用:

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

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

这适用于网站本身,但已经证明是一个测试阻止程序。当我尝试加载我的视图时,它们不会初始化,因为这样做需要主模型上的“模板”对象,而是从索引中提取的脚本标记填充。但是我的specRunner中不存在index.html,因为每次我做出更改时,我都不会将所有脚本标签复制/粘贴到规范运行器中。

我不知道这里的解决方法是什么。我确信它很简单,而且我看起来太密集了,但是我一直在努力寻找解决方案,并且在五个小时的大部分时间内找到解决方案,而且没有什么可以表现出来的。

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

1 个答案:

答案 0 :(得分:3)

所以这很复杂,但是由于咕噜咕噜的魔力,我得到了它。

我设置了grunt来使用grunt-contrib-jade和grunt-contrib-handlebars,它会将我的jade include页面自动编译为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的模板对象,其中包含所有可以加载到我的视图中的把手模板!