如何用Qunit测试jquery-ui datepicker
[英]how to test jquery-ui datepicker with Qunit
问题描述
I'm kind of new to Qunit, and would like to ask a question. 
我是Qunit的新手，想问一个问题。
I have created a JavaScript file to simply use datepicker like below, and created a test-code using Qunit. 我创建了一个JavaScript文件来简单地使用如下所示的datepicker，并使用Qunit创建了一个测试代码。 What I want to do is to show the calendar and select a date, and assert that date has been selected. 我想要做的是显示日历并选择一个日期，并断言已选择日期。 My problem here is that I was able to show the calendar, by .trigger("focus") but couldn't select anything. 我的问题是我能够通过.trigger("focus")显示日历，但无法选择任何内容。
Does anyone know how I can do this?? 有谁知道我怎么能这样做？
datepicker-basic.js 日期选择器，basic.js
$(function () { $('#jquery-ui-datepicker').datepicker(); });
test-datepicker.html 测试datepicker.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test datepicker.js</title> <link rel="stylesheet" href="jquery-ui/jquery-ui.css"> <link rel="stylesheet" href="qunit/qunit-2.0.1.css"> <script src="jquery/jquery-1.11.1.min.js"></script> <script src="jquery-ui/jquery-ui.min.js"></script> <script src="jquery-ui/i18n/datepicker-ja.js"></script> <script src="qunit/qunit-2.0.1.js"></script> <script src="../samples/jquery-ui/js/datepicker-basic.js"></script> <script src="jquery.simulate/jquery.simulate.js"></script> <script src="test-datepicker.js"></script> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <input type="text" id="jquery-ui-datepicker"> </body> </html>
test-datepicker.js 测试datepicker.js
QUnit.test( "basic", function( assert ) { // initiate input value $("#jquery-ui-datepicker").val(""); // focus on input-textbox and select date on calendar $("#jquery-ui-datepicker").trigger("focus"). simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); // get selected date from input-textbox var actual = document.getElementById("jquery-ui-datepicker").value; // create expected value var today = new Date(); var expected = formatDate(today); // assert assert.ok(actual === expected, "selected value from calendar correctly"); });
1 个解决方案
解决方案1
0 2016-08-29 02:40:34
Oh, I think I found the answer. 哦，我想我找到了答案。 I had to add a trigger.("focus") . 我不得不添加一个trigger.("focus") 。 Here's what I changed, and it worked. 这是我改变了，它起作用了。
before: 之前：
// focus on input-textbox and select date on calendar
$("#jquery-ui-datepicker").trigger("focus").
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
after: 后：
// focus on input-textbox
$("#jquery-ui-datepicker").trigger("focus");
// select date on calendar
$("#jquery-ui-datepicker").trigger("focus").
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.