使用 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);