Question

我想测试应用于某个 html 代码的某些 javascript （使用jQuery或任何其他框架）是否会创建某些行为在页面上。例如：

如果我有 html （在测试中写为存根）

<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功能或黄瓜做这些事情，但是有没有更具体的框架用于此类测试？任何帮助将不胜感激。

Answer 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库。引文：

我们假设您想为某些需要的代码编写Jasmine规范使用jQuery从DOM中选择元素：
$('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]')
...

jasmine-fixture的词缀方法允许你这样做：
beforeEach(function(){
  affix('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]')
});

有没有办法对不显眼的jQuery场景进行单元测试

1 个答案: