使用 KeyboardEvent 模拟按键进行测试

Question

我想编写一个 Javascript 测试来模拟右箭头键上的按键。这是我创建keydown 事件的尝试：

var data = {
   key: 'ArrowRight'
};
var ev = new KeyboardEvent('keydown', data);
console.log(ev);

http://jsfiddle.net/lsiden/6e7duck6/

当我在开发者控制台中检查输出时，我希望在其中一个事件字段中看到值 39，但它似乎仍未初始化。

KeyboardEvent {which: 0, keyCode: 0, charCode: 0, repeat: false, metaKey: false…}
altKey: false
bubbles: false
cancelBubble: false
cancelable: false
charCode: 0
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
keyCode: 0
keyIdentifier: ""
keyLocation: 0
layerX: 0
layerY: 0
location: 0
metaKey: false
pageX: 0
pageY: 0
path: Array[0]
repeat: false
returnValue: true
shiftKey: false
srcElement: null
target: null
timeStamp: 1430931169397
type: "keydown"
view: null
which: 0
__proto__: KeyboardEvent
.

我尝试关注文档：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

以前有人做过吗？

Answer 1

我不会撒谎，这似乎很奇怪。听起来您需要将该按键事件的所有功能包装到一个功能中，然后测试该功能。

如果您已经这样做了，并且需要测试您的函数是否正在寻找某个 keyCode 或其他内容，那么您可以使用纯 javascript 对象并将其传递给您正在测试的函数。

例如

如果你的函数看起来像这样。

function myFunc(evt) {
  if (evt.keyCode === 39) {
    doThis();
  } else {
    doThat();
  }
}

然后要测试你的函数，你只需要一个 keyCode 等于 39 的对象。你的函数不应该关心它是由一个 KeyBoardEvent 对象触发的，该对象附加了一堆其他东西你不需要。

所以你的测试看起来像这样。

var keyboardEvent = {keyCode: 39};
myFunc(keyboardEvent);
// Make sure that doThis() was called and not doThat()

我认为这会解决您的问题并使事情变得更简单。

Answer 2

我遇到了同样的问题，并意识到它在 Firefox 中有效，但在 Chrome 中无效。 Chrome 似乎没有在 KeyboardEvent 中使用“key”属性。你必须使用'keyIdentifier'。要在两种浏览器中进行测试，您可以这样做：

var data = {
       key: 'ArrowRight',
       keyIdentifier:'ArrowRight'
    };
var ev = new KeyboardEvent('keydown', data);
console.log(ev);