javascript - 如何使用 Qunit 测试 jquery-ui datepicker

标签 javascript jquery jquery-ui datepicker qunit

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

我创建了一个 JavaScript 文件来简单地使用如下所示的日期选择器,并使用 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");
});

最佳答案

哦,我想我找到了答案。 我必须添加一个触发器。(“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 } );

关于javascript - 如何使用 Qunit 测试 jquery-ui datepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39137247/

相关文章:

javascript - 在 Ember Todo 示例中,我将如何切换而不是删除待办事项?

javascript - 如何在没有任何动画的情况下默认切换隐藏

jQuery UI 排序时的可排序性能

javascript - 尝试执行使用上下文传递给组件的函数

javascript - 在 Service worker 中使用 setInterval

javascript - 如何在 Chrome 自动完成时获取输入值

jqueryui 选项卡 (1.9.1) 在加载时激活

asp.net - 将 CSS 规则放在 ASCX 自定义控件中的什么位置?

jquery - 如何访问放入可排序的可拖动元素的ID

javascript - Stripe 似乎创建了弹出窗口,但在移动设备上将其关闭