Question

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

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

Answer 1

您可以在茉莉花规格中加载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 test runner页面。

另一个解决方案是模拟你的视图DOM元素。您可以在new View({el: $($('myTemplate').html())})之类的构造函数中插入元素。这样做，你可以在测试中添加一个mock或spy元素，而不需要根据你的模板创建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比使用骨干更容易，因为我们处于JAVA世界，但原理是一样的。不要测试DOM，只测试你的业务逻辑。如果以这种方式完成我的私人骨干项目，它运作良好。

还要看看这个SO：Stub out a jQuery selector call?

茉莉和骨干和js模板

2 个答案: