如何使用 Qunit 测试 jquery-ui datepicker答案

【问题标题】：how to test jquery-ui datepicker with Qunit如何使用 Qunit 测试 jquery-ui datepicker
【发布时间】：2017-01-01 09:52:48
【问题描述】：

我是 Qunit 的新手，想问一个问题。

我创建了一个 JavaScript 文件来简单地使用如下所示的 datepicker，并使用 Qunit 创建了一个测试代码。我想要做的是显示日历并选择一个日期，并断言该日期已被选择。我的问题是我可以通过.trigger("focus") 显示日历，但无法选择任何内容。

有人知道我该怎么做吗？？

datepicker-basic.js

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

test-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

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");
});

【问题讨论】：

标签： javascript jquery jquery-ui datepicker qunit

【解决方案1】：

哦，我想我找到了答案。我必须添加一个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 } );

【讨论】：