在单独运行时触发事件的Qunit asyncTest，但在另一个测试后运行时不通过。

Question

我一直试图使用qunit来运行一些测试，这些测试需要触发单击，然后根据附加在单独js文件中的单击事件的jQuery函数，测试是否设置了一个值或使div可见。在设置该程序时，我发现在另一个测试之后运行的任何异步测试都会失败，但在单独运行(或第一次运行)时会通过。

下面的代码用于底部链接的简化测试用例。on('click')外部的test()模拟响应单击的函数，然后更改值。通过删除第一个test()块，asyncTest()每次都会通过，并且通过在asyncTest()块中移动on('click')，测试也将每次沿着第一个test()块通过，因此从test()块内部触发外部jQuery事件似乎是不对的，在重新设置qunit-fixture div中的测试代码时可能会感到困惑。

在寻找答案时，我已经看到过这类问题的几个例子(交替通过和失败)，但似乎没有什么能解释这个特定问题。有人能解释一下为什么会发生这种情况吗?如果有可能的话，也许可以提出一个修复方案，使功能保持在这里。

任何帮助都将不胜感激。

HTML

<div id="qunit"></div>
<div id="qunit-fixture">

    <input id="type" type="hidden" value="1" />
    <a id="click">click</a>
</div>

JS

jQuery('#click').on('click', function(){

    jQuery('#type').val(2);
});

test("works", 1, function(){

    ok(jQuery('#type').val() == 1);
});

asyncTest("async", 1, function(){  

    setTimeout(function(){

        equal(jQuery('#type').val(), "2");
        start();
    }, 1000);

    jQuery('#click').trigger('click');
});

JS Fiddle

http://jsfiddle.net/andyface/rFpxL/

更新：

重新讨论这个问题，并发现通过将我的.on('click')处理程序设置为委托，它可以在重新设置测试时工作，我认为这是更多的问题，请参阅下面的更新小提琴。

jQuery('body').on('click', '#click', function(){

    jQuery('#type').val(2);

});

http://jsfiddle.net/andyface/rFpxL/4/

更新2：

我有一种感觉，我在这里试图做的事情实际上超出了单元测试的范围，理想情况下不应该使用qUnit进行测试，而应该使用其他工具进行集成测试.或者类似的东西。

Answer 1

在我的特定测试用例中，我可以通过让事件处理程序使用委托来使其工作。

jQuery('body').on('click', '#click', function(){

    jQuery('#type').val(2);

});

我认为这是因为当测试重置时，如果不作为委托完成事件绑定就会丢失，这对于jQuery事件处理程序的工作方式来说是有意义的。

我不完全确定如何在使用现有代码运行的实际测试中使用它，我不希望将这些代码更改为仅用于测试的委托，但我至少更好地理解了测试失败的原因。

Answer 2

发生了什么：

• setTimeout和trigger调用都是异步的。
• 测试完成后，不会重置qunit-fixture。
• test正在同步进行，并阻塞了asyncTest

Answer 3

我在这个问题上做了很多研究，因为我有同样的问题，并在这里找到了一个解决办法：QUnit how to test events?。

Woogy设法绕过jquery在不委托时删除事件处理程序的行为，方法是在qunit的夹具之外修复HTML。我不知道这在你的情况下有多可行，或者你是否还在乎，但这对我来说效果很好。