当前位置: 首页 > 面试题库 >

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

陈瀚玥
2023-03-14
问题内容

我正在为AngularJS指令编写测试,该指令会<textarea>在按下某些键时触发a事件。按照我的手动测试,一切正常。我想成为一个好人,也有完整的单元测试套件,但是遇到了一个我自己无法解决的问题:

我想送一个特定的keyCode在我的triggerHandler()电话在我的测试,但我不能找到一种方法来指定键 ,实际工作
。我知道关于使用特定数据构建和发送事件的 许多 问题和解答,但是在我的设置中没有一个起作用:

我的设定

  • 业力测试选手
  • 运行测试的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

奇怪的是,我可以在Chrome的控制台中输入前三行,然后看到该事件是在属性设置为40的情况下创建的 keyCode因此,似乎应该可以使用。

另外,当我像这样调用最后一行时,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);

希望能帮助到你

更新资料

今天,我已经找到并测试了此解决方案,该解决方案提供了更广泛的浏览器覆盖范围(启用了传统支持):

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

所有的功劳归功于该GIST的作者。该代码确实支持Safari,PhantomJS和IE9-已针对前2个进行了测试。



 类似资料:
  • 问题 假如你正在使用 CoffeeScript 写一个简单地计算器,并且想要验证其功能是否与预期一致。可以使用 Jasmine 测试框架。 讨论 在使用 Jasmine 测试框架时,你要在一个参数(spec)文档中写测试,文档描述的是代码需要测试的预期功能。 例如,我们希望计算器可以实现加法和减法的功能,并且可以正确进行正数和负数的运算。我们的 spec 文档如下列所示。 # calculator

  • 问题内容: 我想对一个模拟占位符的指令进行单元测试,其中仅在键入/按下事件时才清除输入值。 问题答案: 您需要以编程方式创建一个事件并触发它。为此,将jQuery用于单元测试非常有用。例如,您可以编写一个简单的实用程序,如下所示: 然后在您的单元测试中使用它,如下所示: 您可以在http://angular-ui.github.io/bootstrap/项目中查看此技术的实际应用:https :

  • 我想在我的项目中测试特定的测试类,因为有很多测试类失败,我只想一次测试一个类。 我在以下文件夹中创建了测试类: 因此,我尝试了以下命令,但均无效: = 有什么帮助吗?谢谢

  • 问题内容: 我正在尝试获取手机号码文本框的值,以使用angular.js验证其输入值。我是使用angular.js的新手,但不确定如何实现这些事件,并在我的html代码上放了一些JavaScript来验证或操作表单输入。 这是我的HTML: 而我的控制器: 我不确定如何在angular.js中使用keydown事件,我也搜索了如何正确使用它。我可以验证我对指令的输入吗?还是我应该像使用控制器那样使

  • 我试图用Jasmine为Angularjs编写单元测试。这是我的控制器: 和测试 测试失败,即使我试图测试期望(true). toBe(true); 茉莉花,因果报应,棱角分明的嘲弄都在我的索引里。jasmine调试页面中的html,还有测试脚本。 我发现如果删除beforeach()块,expect(true)。托比(真的)通过了。 下面是一个错误:

  • 问题内容: 我一直在努力围绕Jasmine 2.0和AngularJS的承诺。我知道: 茉莉花2.0引入的功能,以取代旧的和功能 在触发摘要循环之前,AngularJS Promise 不会解析 如何在Jasmine 2.0中使用新的异步语法测试AngularJS Promise? 问题答案: 致电后: 致电。这将强制进行摘要循环并传播承诺解决方案 致电。告诉Jasmine异步测试已经完成 这是一