Question

我一直在尝试使用qunit来运行一些测试，这些测试需要触发一次点击，然后测试是否设置了值或者div是基于附加到单独的js文件中的click事件的jQuery函数可见的。在设置它时，我发现在另一个测试之后运行的任何异步测试都会失败，但是当单独运行（或第一次）时会通过。

下面的代码用于底部链接的jsfiddle简化测试用例。 on('click')之外的test()模仿了对点击作出反应然后更改值的函数。通过移除第一个test()阻止asyncTest()每次都会通过，并移动on('click')阻止asyncTest()阻止，每次都会在第一个test()旁边传递test() 1}}阻塞，所以从qunit-fixture块内部触发外部jQuery事件似乎有问题，并且在重置<div id="qunit"></div> <div id="qunit-fixture"> <input id="type" type="hidden" value="1" /> <a id="click">click</a> </div> div中的测试代码时会感到困惑。

我在搜索答案时看到过这种问题的几个实例（替代传递和失败），但似乎没有解释这个特定问题。任何人都可以解释为什么会发生这种情况，并且可能会提出一个修复方案，如果可能的话，可以保留这里的功能。

非常感谢任何帮助。

HTML

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

.on('click')

JS Fiddle

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

更新：

重新审视了这一点，发现通过将我的jQuery('body').on('click', '#click', function(){ jQuery('#type').val(2); });处理程序设置为委托，它可以在重置测试时起作用，我认为这更像是问题，请参阅下面的更新小提示。

{{1}}

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

更新2：

我有一种感觉，我在这里尝试做的事实上是在单元测试的范围之外，理想情况下不应该使用qUnit进行测试，而是应该使用其他工具进行集成测试......或者某事那样的。

Answer 1

发生了什么：

setTimeout和trigger调用都是异步的
测试完成后qunit-fixture未重置
test正在同步发生并阻止asyncTest

Answer 2

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

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

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

});

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

我不完全确定这可以用于我使用现有代码运行的实际测试，我不希望将其更改为仅用于测试，但我至少理解为什么测试更好失败了。

Answer 3

我对此问题进行了大量研究，因为我遇到了同样的问题，并在此处找到了解决方法：QUnit how to test events?

Woogy设法绕过jquery的行为，在没有通过修复qunit夹具之外的HTML进行委托时删除事件处理程序。我不知道这给你的情况多么可行，或者你甚至不在乎，但这对我很有用。

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

3 个答案: