如何用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

回答

相關問題