测试KEYDOWN事件茉莉花与特定键code [英] testing keydown events in Jasmine with specific keyCode

问题描述

我写一个AngularJS指令，它会激发一个＆LT事件试验; textarea的＆GT; 当某些键是pressed。它所有的工作按我的手动测试的罚款。我想是好的，有一个完整的单元测试套件太多，但我遇到了，我不能在我自己解决一个问题：

I am writing tests for an AngularJS directive which fires events of a <textarea> when certain keys are pressed. It all works fine per my manual testing. I want to be good and have a full unit-test suite too, but I have run into a problem I can't solve on my own:

我想给一个特定的键code 在我的 triggerHandler（）电话在我的测试，但我不能找到一种方法来指定密钥的实际工作。我知道一个的很多的对建筑的专题问题和答案，并与特定的数据发送事件，但没有人对我的工作设置：

I want to send a specific keyCode in my triggerHandler() call in my test, but I can't find a way to specify the key that actually works. I am aware of a lot of questions and answers on the topic of building and sending events with specific data, but none of them work on my setup:

• 噶测试运行


• PhantomJS浏览器中运行测试（但也尝试Firefox和Chrome都没有成功）


• 我没有使用jQuery的，我希望有一个常规的JS解决方案。必须有！

var event = document.createEvent("Events");
event.initEvent("keydown", true, true);
event.keyCode = 40; // in debugging the test in Firefox, the event object can be seen to have no "keyCode" property even after this step
textarea.triggerHandler(event); // my keydown handler does not fire

但奇怪的是，我可以键入第3行到Chrome浏览器的控制台，看到正在创建的与的的键code事件属性设置为40。
 所以它看起来像它应该工作。

The strange thing is, I can type the first 3 lines into the console in Chrome and see that the event is being created with the keyCode property set to 40. So it seems like it should work.

此外，当我这样调用的最后一行 textarea.triggerHandler（的keydown）; 它的工作原理和事件处理程序被触发。然而，没有键code 的工作，所以它是没有意义的。

Also, when I call the last line like this textarea.triggerHandler("keydown"); it works and the event handler is triggered. However, there is no keyCode to work with, so it is pointless.

我怀疑它可能是与对一个DOM是在浏览器中正常的网页运行的不同运行测试的性质。但我不能看着办吧！

I suspect it may be something to do with the nature of the test running against a DOM that is different to a regular page running in the browser. But I can't figure it out!

推荐答案

我用以下解决方案来测试它，并让它在Chrome，FF，PhantomJS和IE9 +工作在此基础上<一个href=\"http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key/12522769#12522769\">SO回答。
它不会在Safari工作 - 尝试数以百万计的其他解决方案，没有任何成功...

I've used the following solution to test it and having it working in Chrome, FF, PhantomJS and IE9+ based on this SO answer. It doesn't work in Safari - tried millions of other solution without any success...

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

希望它能帮助

今天，我发现并测试该解决方案是浏览器提供了更广阔的覆盖范围（启用传统支持）：

Today I've found and tested this solution which is offers a much wider coverage of browsers (enabling the legacy support):

https://gist.github.com/termi/4654819

全部归功于此GIST的作者。
在code不支持Safari浏览器，PhantomJS和IE9 - 为第2测试

All the credit goes to the author of this GIST. The code does support Safari, PhantomJS and IE9 - tested for the first 2.

这篇关于测试KEYDOWN事件茉莉花与特定键code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！