2016-08-21 32 views
0

我想在用戶開始在輸入字段中輸入時隱藏錯誤消息。代碼很簡單,但我想用QUnit 2.0.1 + jQuery.trigger方法來測試它。QUnit 2.0.1 + jQuery.trigger

QUnit測試未通過,但js腳本在我手動測試時正常工作。下面的代碼有什麼問題?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-git.css"> 
</head> 

<body> 
    <div id="qunit"></div> 
    <div id="qunit-fixture"> 
    <form> 
     <input id="id_text" name="text"/> 
     <div id="id_error">Error text</div> 
    </form> 
    </div> 

    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="https://code.jquery.com/qunit/qunit-git.js"></script> 
    <script> 
     $("#id_text").on('keypress', function() { 
      $('#id_error').hide(); 
     }); 

     $("#id_text").on("click", function() { 
      $("#id_error").hide(); 
     }); 

     QUnit.test("hide error on keypress", function (assert) { 
      $('#id_text').trigger('keypress'); 
      assert.equal($('#id_error').is(':visible'), false); 
     }); 
    </script> 

</body> 
</html> 

回答

0

看起來好像<div id="qunit-fixture"></div>裏面的代碼沒有被兩個函數識別。 這麼一件事,你可以做的是移動

<input id="id_text" name="text"/> 
    <div id="id_error">Error text</div> 

<div id="qunit-fixture"></div>。 這會起作用,但是您可能想要記住爲每個測試初始化​​輸入字段,因爲它不在固定器範圍內。

另一種方法是將這兩個函數移動到QUnit.test(){}這樣。

QUnit.test("hide error on keypress", function (assert) { 

    $("#id_text").on('keypress', function() { 
     $('#id_error').hide(); 
    }); 

    $("#id_text").on("click", function() { 
     $("#id_error").hide(); 
    }); 

    $("#id_text").trigger("click"); 
    assert.equal($('#id_error').is(':visible'), false); 
});