在Qunit测试中触发JavaScript事件

Question

I am trying to test that when a user clicks in my form the existing error message will go away. 我正在尝试测试，当用户单击我的表单时，现有的错误消息将消失。 For some reason the last test is failing and i'm not sure why. 由于某种原因，最后一次测试失败了，我不确定为什么。 I'm fairly new to jQuery and Qunit. 我是jQuery和Qunit的新手。

test.html 的test.html

<!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>

list.js list.js

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

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

     });
 })

Answer 1

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

http://jsfiddle.net/u3v08v1e/13/ http://jsfiddle.net/u3v08v1e/13/

Answer 2

This is how I got this working. 这就是我的工作方式。

 /* ./inventory.js */ var hide_error = function () { $('input').on("keypress", function() { $( ".has-error" ).hide(); }); } /* ./tess.js */ QUnit.module( "module A ", { before: hide_error }); QUnit.test("errors not be hidden unless keypresses", function ( assert ) { assert.equal( $('.has-error').is(':visible'), true, "Not Hidden" ); }); QUnit.test("errors should be hidden on keypresses", function ( assert ) { $('input').trigger("keypress"); assert.equal( $(".has-error").is(':visible'), false, "Hidden" ); });

 <link href="https://code.jquery.com/qunit/qunit-2.0.0.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script> <div id="qunit"></div> <div id="qunit-fixture"> <form> <input name="text"> <div class="has-error">Error Text</div> </form> </div> <script src="./inventory.js"></script> <script src="./tests.js"></script>

在Qunit测试中触发JavaScript事件

问题描述

test.html 的test.html

list.js list.js

2 个解决方案

解决方案1
2 已采纳 2015-04-26 04:44:56

解决方案2
0 2016-07-18 04:55:39

在Qunit测试中触发JavaScript事件

问题描述

test.html 的test.html

list.js list.js

2 个解决方案

解决方案1 2 已采纳 2015-04-26 04:44:56

解决方案2 0 2016-07-18 04:55:39

解决方案1
2 已采纳 2015-04-26 04:44:56

解决方案2
0 2016-07-18 04:55:39