2014-09-28 189 views
2

我想如果某些的javascript(使用jQuery或任何其他框架)来测试应用到一定HTML代码将在页面上创建某些行为。例如:有没有办法进行单元测试unobstrusive jQuery的场景

如果我有HTML(写在一个测试为Stub)

<div class="order"> 
    <div class="id">15</div> 
    <div class="client">John</div> 
</div> 

而且我已经包括JS文件(写在测试中也):

jquery.js 
orders.js (the one I want to test) 

测试的主要部分(语法想象的)

part 1: 

    'client'.is 'hidden' 

part 2: 

    'order'.click 
    'client'.should_be visible 

我想测试通过才orders.js有这样的代码:

$(function(){ 
    $('.client').hide(); 
    $('.order').click(function(){ 
    $(this).children('.client').show(); 
    }); 
}); 

我想,我可以做这样的事情与rspec的功能或黄瓜,但是否有任何更具体的框架这样的测试?任何帮助,将不胜感激。

回答

1

至少有两种解决方案。

首先是jasmine-jquery HTML fixtures。引用:

jasmine-jquery的Fixture模块允许您加载HTML内容 以供您的测试使用。整体工作流程如下:

在myfixture.html文件:

<div id="my-fixture">some complex content here</div> 

内部测试:

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

而且,对于一个辅助方法为您的测试创建HTML元素是 提供的:

sandbox([{attributeName: value[, attributeName: value, ...]}])

它创建了一个默认id="sandbox"空DIV元素。如果提供了 属性的散列,则会为此DIV标记设置它们。如果属性的散列 包含id属性,则它将覆盖默认的 值。自定义属性也可以设置。

而且还有jasmine-fixtures库。引文:

比方说,你想要写一些代码,需要 中选择元素,从使用jQuery的DOM茉莉花规格:

$('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]') 

...

茉莉花灯具的词缀方法可以代替:

beforeEach(function(){ 
    affix('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]') 
}); 
相关问题