QUnit 2.0.1 + jQuery.trigger

时间:2016-08-21 12:33:00

标签: javascript jquery qunit

我想在用户开始输入输入字段时隐藏错误消息。代码很简单,但我想用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>

1 个答案:

答案 0 :(得分:0)

似乎这两个函数无法识别<div id="qunit-fixture"></div>内的代码。 所以你可以做的一件事就是搬家

    <input id="id_text" name="text"/>
    <div id="id_error">Error text</div>
<{1>}中的

。 这可行,但您可能想要记住为每个测试初始化​​输入字段,因为它超出了fixture的范围。

另一种方法是将这两个函数移动到这样的<div id="qunit-fixture"></div>

QUnit.test(){}