Javascript 使用特定的keyCode测试Jasmine中的keydown事件

我正在为AngularJS指令编写测试，该指令在按下某些键时触发

事件。根据我的手动测试，一切正常。我想做一个优秀的人，拥有一套完整的单元测试套件，但我遇到了一个自己无法解决的问题：

我想在测试中的

triggerHandler（）

调用中发送一个特定的

keyCode

，但我找不到一种方法来指定实际有效的键。我知道有很多关于构建和发送带有特定数据的事件的问题和答案，但没有一个适用于我的设置：

我的设置

• 卡玛测试跑步者
• 运行测试的PhantomJS浏览器（但也尝试了Firefox和Chrome，但没有成功）
• 我没有使用jQuery，我希望有一个常规的JS解决方案。一定有

测试代码 奇怪的是，我可以在Chrome中的控制台中键入前3行，看到事件是在

keyCode

属性设置为40的情况下创建的。 因此，它似乎应该起作用

另外，当我像这样调用最后一行

textarea.triggerHandler（“keydown”）它工作并触发事件处理程序。但是，没有可使用的
keyCode
，因此它毫无意义

我怀疑这可能与针对DOM运行的测试的性质有关，该测试不同于在浏览器中运行的常规页面。但我想不出来
 我使用了以下解决方案来测试它，并基于此在Chrome、FF、PhantomJS和IE9+中运行。
它在Safari中不起作用-尝试了数百万其他解决方案，但没有任何成功

function jsKeydown(code){
  var oEvent = document.createEvent('KeyboardEvent');

  // Chromium Hack: filter this otherwise Safari will complain
  if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ){
    Object.defineProperty(oEvent, 'keyCode', {
      get : function() {
        return this.keyCodeVal;
      }
    });     
    Object.defineProperty(oEvent, 'which', {
      get : function() {
        return this.keyCodeVal;
      }
    });
  }

  if (oEvent.initKeyboardEvent) {
    oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, code, code);
  } else {
    oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, code, 0);
  }

  oEvent.keyCodeVal = code;

  if (oEvent.keyCode !== code) {
    console.log("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ") -> "+ code);
  }

  document.getElementById("idToUseHere").dispatchEvent(oEvent);
}

// press DEL key
jsKeydown(46);

希望能有帮助

更新
今天，我发现并测试了这个解决方案，它提供了更广泛的浏览器覆盖范围（支持遗留支持）：


所有这些都归功于这一要点的作者。
代码确实支持Safari、PhantomJS和IE9——在前2个版本中进行了测试。
除了@MarcoL answer之外，我还想指出，未来可能会遇到这个问题的读者，这些方法
initKeyboardEvent
和
initKeyEvent
都是不推荐使用的方法，不应该再使用。见和

相反，正如MDN文档所建议的那样，事件应该通过各自的构造函数创建。
这是您显然需要的，您好，讨论的是关于jQuery的，我没有使用它。我希望我不需要为了这个而在单元测试中包含jQuery。我想我已经为纯JS回答了这个问题，但显然这个问题已经被删除了。您应该能够找到有关MDN的更多信息。在其他[thread][1]中，我添加了答案，并描述了如何测试keydown。[1] ：太好了，非常感谢！我稍微修改了它以返回事件对象，然后将其放入Angular
元素中。triggerHandler（）
方法中，效果很好。我已经放弃了这一点；我现在正忙着完成我的测试套件@你在用幻影？我一直收到一个错误，钥匙码不匹配。这里也一样。这个问题是怎么解决的？只是更新了一个更好的解决方案，涵盖了Safari和PhantomJS。链接的代码在PhantomJS 1.9.8中不起作用<代码>类型错误：“未定义”不是函数（评估“function.prototype.call.bind（Object.prototype.hasOwnProperty）”）

function jsKeydown(code){
  var oEvent = document.createEvent('KeyboardEvent');

  // Chromium Hack: filter this otherwise Safari will complain
  if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ){
    Object.defineProperty(oEvent, 'keyCode', {
      get : function() {
        return this.keyCodeVal;
      }
    });     
    Object.defineProperty(oEvent, 'which', {
      get : function() {
        return this.keyCodeVal;
      }
    });
  }

  if (oEvent.initKeyboardEvent) {
    oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, code, code);
  } else {
    oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, code, 0);
  }

  oEvent.keyCodeVal = code;

  if (oEvent.keyCode !== code) {
    console.log("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ") -> "+ code);
  }

  document.getElementById("idToUseHere").dispatchEvent(oEvent);
}

// press DEL key
jsKeydown(46);