QUnit没有运行外部JavaScript文件

Question

我试图修改教程here以使用QUnit v2.x，但它似乎没有找到我想测试的JavaScript文件。

的test.html

<div id="qunit"></div> 
<div id="qunit-fixture"> 
    <form> 
    <input name="text" /> 
    <div class="has-error">Error text</div> 
    </form> 
</div> 

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="qunit.js"></script> 
<script src="../list.js"></script> 
<script> 

    QUnit.test("errors should be hidden on keypress", function (assert) { 
     $('input').trigger('keypress'); 
     assert.equal($('.has-error').is(':visible'), false); 
    }); 

</script> 

list.js

jQuery(document).ready(function ($) { 
    $('input').on('keypress', function() { 
     $('.has-error').hide(); 
    }); 
}); 

试验失败的真正

结果本教程中提供的代码工作正常QUnit 1.23

<script> 

/*global $, test, equal */ 

test("errors should be hidden on keypress", function() { 
    $('input').trigger('keypress'); 
    equal($('.has-error').is(':visible'), false); 
}); 

test("errors not be hidden unless there is a keypress", function() { 
    equal($('.has-error').is(':visible'), true); 
}); 

</script> 

编辑：使用QUnit v1.23这两个版本的测试工作！

Answer 1

所以，这个问题已经出现在SO上的multiple other places。基本上发生的事情是QUnit 2以不同的方式处理灯具。您的代码将一个事件处理程序添加到原始HTML中，但随后QUnit杀死该HTML并重建它，从而删除您的处理程序。解决办法是在内部执行绑定的事件，而不是页面加载。这里是a fiddle一起玩，但代码如下：

function init() { 
    $('.username').on('keypress', function() { 
     console.log('hiding error!'); 
     $('.has-error').hide(); 
    }); 
    } 

    QUnit.test("errors should be hidden on keypress", function(assert) { 
    init(); 
    $('.username').trigger('keypress'); 
    assert.strictEqual($('.has-error').is(':visible'), false); 
    }); 

    QUnit.test("errors not be hidden unless there is a keypress", function(assert) { 
    init(); 
    assert.strictEqual($('.has-error').is(':visible'), true); 
    });