有没有办法进行单元测试unobstrusive jQuery的场景

我想如果某些的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的功能或黄瓜，但是否有任何更具体的框架这样的测试？任何帮助，将不胜感激。

来源

2014-09-28 installero

至少有两种解决方案。

首先是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"]') 
}); 

来源

2014-09-28 17:58:37 petRUShka

有没有办法进行单元测试unobstrusive jQuery的场景

回答

相关问题