在 Qunit 测试中触发 JavaScript 个事件
Triggering JavaScript events in Qunit tests
我正在尝试测试当用户单击我的表单时,现有的错误消息将会消失。出于某种原因,最后一次测试失败了,我不确定为什么。我是 jQuery 和 Qunit 的新手。
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
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);
});
我就是这样工作的。
/* ./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>
我正在尝试测试当用户单击我的表单时,现有的错误消息将会消失。出于某种原因,最后一次测试失败了,我不确定为什么。我是 jQuery 和 Qunit 的新手。
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
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);
});
我就是这样工作的。
/* ./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>