茉莉花和主干和js模板

Question

你好，我正在尝试使用 jasmine headless webkit： http://johnbintz.github.com/ jasmine-headless-webkit/

我一直在我的应用程序的主 HTML 文件中嵌入 js 模板。我的应用程序开始变得相当复杂，我想我可以使用 jasmine 来给它更多的测试覆盖率。由于我的视图引用了主 HTML 文件中的 javascript 模板，因此我的视图将出错。有什么办法可以解决这个问题吗？我可以以某种方式重现我的应用程序的 HTML 文件的状态吗？即，加载其所有 js 模板，并在头部以正确的顺序加载供应商 javascript？

Answer 1

您可以在 jasmine 规范中加载 html 固定装置。请参阅： https://github.com/velesin/jasmine-jquery

loadFixtures('myfixture.html');
$('#my-fixture').myTestedPlugin();
expect($('#my-fixture')).to...;

无论如何，你可以检查我的示例使用backbone.js和jasmine的项目： https://github.com/lucassus/tdd-with-backbonejs 并检查我如何在现实生活中使用这种技术。
另外，我将写一篇关于用 jasmine 测试骨干观点的博客文章： http://blog.bandzarewicz.com

Answer 2

当然，您可以将模板文件添加到 jasmine 测试运行器页面。

另一个解决方案是模拟视图 DOM 元素。您可以在构造函数中插入元素，例如 new View({el: $($('myTemplate').html())})。这样做，您可以在测试中添加元素模拟或间谍，而无需基于模板创建 DOM 元素：

beforeEach(function() {
    el = {bind: function(){}};
    spyOn(el, 'bind');
    var OrderListView = new OrderSumView({el: el, model: model});
});

it('it should render the sum after firing the remove event', function() {

    //test that bind('click', someFunction) was called to your element
    expect(el.bind).toHaveBeenCalledWith('click', model.bind.argsForCall[0][1]);

    // fire up the function that was bind to the click event
    el.bind.argsForCall[0][1]() 
})

使用此解决方案，您可以在大多数情况下完全模拟 html。这是我们测试大型 GWT 应用程序的方式。使用GWT 比使用backbone 容易得多，因为我们处于JAVA 世界，但原理是相同的。不要测试 DOM，只需测试您的业务逻辑。如果对我的私人骨干项目这样做的话，效果会很好。

另请看一下这个SO： 存根 jQuery 选择器调用？