2016-08-25 13 views
1

Qunitの新機能で、質問をしたいと思います。Qunitでjquery-ui datepickerをテストする方法

以下のようにdatepickerを使用するためのJavaScriptファイルを作成し、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"); 
 
});

答えて

0

ああ、私は答えを見つけたと思います。 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 }); 
関連する問題