模拟TDD JavaScript的用户输入

Question

我发现使用jQuery或本机元素触发器函数模拟实际用户事件越来越困难。例如，如果您有文本输入并且不希望用户能够添加字符，则可以使用e.preventDefault()事件上的jQuery规范化事件对象调用keydown。但是，无法以编程方式验证此测试方案。

即使没有调用preventDefault，以下测试也会通过，因为jQuery keydown触发器不是“真实”事件。

input.val('test').trigger(jQuery.Event({
    which: 68
});
expect(input).toHaveValue('test');

如果没有正确的代码，此测试应该失败，因为输入的值应为'testd'（68是'd'的字符代码）。

有没有人知道任何方法或库来模拟真正的浏览器UI事件？

Answer 1

模拟真实事件非常复杂。您必须首先确定所需的事件类型，然后使用document.createEvent创建它。然后调用不同的init*Event来初始化事件对象。最后，使用element.dispatchEvent将事件分派给目标对象。

Answer 2

您可能想尝试使用Selenium：http://seleniumhq.org/

这是一个不错的概述：http://blog.frontendforce.com/2010/05/unit-testing-in-javascript-selenium/

Answer 3

我相信YUI有一些代码可以做到这一点。下载他们的代码并看一看。我相信它被称为simulate.js或类似的东西。或者你可以看看硒是如何做到的。

Answer 4

这是一个似乎保持最新状态的回购：https://github.com/mmonteleone/jquery.autotype