javascript - QUnit 测试不一致/交替失败

Question

我有一个简化的 QUnit 测试，它由 2 个简单的测试组成，这些测试无缘无故地随机/交替地失败(它们都是原子的，这意味着一个测试不会改变另一个元素的任何内容)

请参阅 this jsFiddle 尝试多次运行

module("Basic actionBind");
//two simple tests
test("action1", function() {
    ok(ele2.trigger("click").hasClass("clicked"), "basic click action");
});

test("action2", function() {
    ok(ele1.click().hasClass("clicked"), "basic click action");
});

Answer 1

问题出在运行时在全局上下文中缓存 jQuery 对象。这是您的代码_{中的两个片段(来自您问题中的链接:http://jsfiddle.net/adardesign/aZRK7/12/):}

HTML:

<div id="qunit-fixture">
    <span id="ele1" class="action" data-action="action1"></span>
    <span id="ele2" class="action" data-action="action2" ></span>
</div>

JS:

// caching elements
var $ele1 = $('#ele1'),
    $ele2 = $('#ele2');

test('action1', function() {
    ok($ele2.trigger('click') ....


test('action2', function () {
    ok($ele1.trigger('click') ....

实际元素在 #qunit-fixture 中，它为每个测试重置和重新解析，因此您从测试内部触发的点击事件是在现在没有的元素上触发的在 document 中更长。相反，这些元素已被分离，并且 #qunit-fixture 已从原始 html 文本中重新解析，从而创建新的 DOM 元素。

我已经 fork 了你的 jsFiddle 并相应地修改了它:http://jsfiddle.net/aZRK7/15/

虽然我在注意到它之前清理了各个部分，但本质的变化是将对元素的查询移动到测试内部:

test('foo', function() {
    var $foo = $('#ele1');
    ok($foo.trigger('click') ....


test('bar', function () {
    var $bar = $('#bar');
    ok($bar.trigger('click') ....