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

【问题标题】：Is there a way to unit-test unobstrusive jQuery scenarios有没有办法对不显眼的 jQuery 场景进行单元测试
【发布时间】：2014-09-28 08:29:15
【问题描述】：

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

如果我有 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 特性或 cucumber 来做这些事情，但是有没有更具体的框架来进行这样的测试？任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery unit-testing

【解决方案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 标记设置。如果一个哈希 of attributes 包含 id 属性，它将覆盖默认值价值。也可以设置自定义属性。

还有jasmine-fixtures 库。引用：

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

jasmine-fixture 的 affix 方法让您可以这样做：
beforeEach(function(){
  affix('#toddler .hidden.toy input[name="toyName"][value="cuddle bunny"]')
});

【讨论】：