在Qunit测试中触发JavaScript事件_Javascript_Jquery_Qunit

在Qunit测试中触发JavaScript事件

javascript jquery

在Qunit测试中触发JavaScript事件,javascript,jquery,qunit,Javascript,Jquery,Qunit,我试图测试，当用户在我的表单中单击时，现有的错误消息将消失。由于某种原因，最后一次测试失败了，我不知道为什么。我对jQuery和Qunit是相当陌生的 test.html 这就是我如何让它工作的 /*./inventory.js*/ var hide_error=函数（）{ $（'input'）。在（“按键”，函数（）上）{ $（“.has error”）.hide（）； }); } /*//苔丝.js*/ 质量模块（“模块A”{ before:隐藏错误 }); 测试（“除非按键，否则错误不会

我试图测试，当用户在我的表单中单击时，现有的错误消息将消失。由于某种原因，最后一次测试失败了，我不知道为什么。我对jQuery和Qunit是相当陌生的

test.html

这就是我如何让它工作的

/*./inventory.js*/
var hide_error=函数（）{
$（'input'）。在（“按键”，函数（）上）{
$（“.has error”）.hide（）；
});
}
/*//苔丝.js*/
质量模块（“模块A”{
before:隐藏错误
});
测试（“除非按键，否则错误不会隐藏”，函数（断言）{
assert.equal（$（'.has error'）.is（':visible'），true，“nothidden”）；
});
test（“错误应该隐藏在按键上”，函数（断言）{
$（'input'）。触发器（“按键”）；
assert.equal（$（“.has error”）.is（':visible'），false，“Hidden”）；
});

错误文本
您的测试似乎发生在list.js之前。如果将测试包装到jQuery（document）.ready（function（$）{}@SaidKholov前两次测试通过，但最后一次涉及点击的测试未通过。请尝试触发触摸事件well@SaidKholov当我一起运行所有测试时，最后一个测试失败。但是当我单独运行最后一个测试时，它通过了。这很有趣。如果你交换第三个和第二个测试，会有区别吗？这非常有效。这谢谢。你能解释一下模块的功能吗？我想测试会删除事件处理程序，模块挂钩会重新分配它。是的，这是基于文档的。再次感谢！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Javascript tests</title>
    <link rel="stylesheet" href="qunit.css">
</head>

<body>
<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 type="text/javascript">

 test("errors should be hidden on key press", function() {
     $('input[name="text"]').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);
 });

test("errors should be hidden on click", function() {
     $('input[name="text"]').click();
     equal($('.has-error').is(':visible'), false);
 });

</script>

</body>
</html>

 jQuery(document).ready(function ($) {
     $('input[name="text"]').on('keypress', function() {
         $('.has-error').hide();
     });

     $('input[name="text"]').on('click', function() {
         $('.has-error').hide();

     });
 })

function setupModule() {
    $('input[name="text"]').on('click', function() {
         $('.has-error').hide();
    })
    $('input[name="text"]').on('keypress', function() {
        $('.has-error').hide();
    });
}

module('tests', {setup:setupModule});

test("errors should be hidden on key press", function() {
     $('input[name="text"]').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);
 });


test("errors should be hidden on click", function() {
     $('input[name="text"]').click()
     equal($('.has-error').is(':visible'),false);
 });