如何用Qunit测试jquery-ui datepicker

我对Qunit很陌生，想问一个问题。如何用Qunit测试jquery-ui datepicker

我创建了一个JavaScript文件来简单地使用下面的datepicker，并使用Qunit创建了一个测试代码。我想要做的是显示日历并选择一个日期，并声明该日期已被选中。我在这里的问题是，我能够显示日历，由.trigger("focus")但无法选择任何东西。

有谁知道我该怎么做？

日期选择器-basic.js

$(function() { 
 
    $('#jquery-ui-datepicker').datepicker(); 
 
});

测试datepicker.html

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width"> 
 
\t <title>test datepicker.js</title> 
 
\t <link rel="stylesheet" href="jquery-ui/jquery-ui.css"> 
 
\t <link rel="stylesheet" href="qunit/qunit-2.0.1.css"> 
 

 
\t <script src="jquery/jquery-1.11.1.min.js"></script> 
 
\t <script src="jquery-ui/jquery-ui.min.js"></script> 
 
\t <script src="jquery-ui/i18n/datepicker-ja.js"></script> 
 

 
\t <script src="qunit/qunit-2.0.1.js"></script> 
 

 
\t <script src="../samples/jquery-ui/js/datepicker-basic.js"></script> 
 
\t <script src="jquery.simulate/jquery.simulate.js"></script> 
 
\t <script src="test-datepicker.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t <div id="qunit"></div> 
 
\t <div id="qunit-fixture"></div> 
 

 
\t <input type="text" id="jquery-ui-datepicker"> 
 
\t </body> 
 
</html>

测试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"). 
 
\t 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"); 
 
});

来源

2016-08-25 guchuan

哦，我想我找到了答案。我不得不添加trigger.("focus")。这是我改变了，它的工作。

前：

// focus on input-textbox and select date on calendar 
    $("#jquery-ui-datepicker").trigger("focus"). 
     simulate("keydown", { keyCode: $.ui.keyCode.ENTER });

后：

// focus on input-textbox 
    $("#jquery-ui-datepicker").trigger("focus"); 
    // select date on calendar 
    $("#jquery-ui-datepicker").trigger("focus"). 
     simulate("keydown", { keyCode: $.ui.keyCode.ENTER });

来源

2016-08-29 02:40:34 guchuan

如何用Qunit测试jquery-ui datepicker

回答

相关问题