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); 
    });