使用特定的 keyCode 在 Jasmine 中测试 keydown 事件 [英] testing keydown events in Jasmine with specific keyCode

查看：23 发布时间：2021/11/9 3:28:52 javascript angularjs unit-testing jasmine karma-runner

本文介绍了使用特定的 keyCode 在 Jasmine 中测试 keydown 事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为 AngularJS 指令编写测试，该指令在按下某些键时会触发 </code> 事件.根据我的手动测试，一切正常.我也想变得优秀并拥有一个完整的单元测试套件，但我遇到了一个我无法自己解决的问题:<em class="showen"></em></p> <p class="en">I am writing tests for an AngularJS directive which fires events of a <code><textarea></code> 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:</p> <p class="cn">我想在我的测试中的 <code>triggerHandler()</code> 调用中发送一个特定的 <code>keyCode</code>，但我找不到指定密钥的方法<strong>确实有效</strong>.我知道有很多关于使用特定数据构建和发送事件的问题和答案，但没有一个适用于我的设置:<em class="showen"></em></p> <p class="en">I want to send a specific <code>keyCode</code> in my <code>triggerHandler()</code> call in my test, but I can't find a way to specify the key <strong>that actually works</strong>. I am aware of a <em>lot</em> of questions and answers on the topic of building and sending events with specific data, but none of them work on my setup:</p> <ul class="cn"><li>Karma 测试运行器 </li><li>运行测试的 PhantomJS 浏览器(但也尝试了 Firefox 和 Chrome 没有成功)</li><li>我没有使用 jQuery，我希望有一个常规的 JS 解决方案.一定有！</li></ul> <pre><code><code>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 </code></code></pre> <p class="cn">奇怪的是，我可以在 Chrome 的控制台中输入前 3 行，然后看到正在创建事件，<em></em> <code>keyCode</code> 属性设置为 40.所以看起来它应该工作.<em class="showen"></em></p> <p class="en">The strange thing is, I can type the first 3 lines into the console in Chrome and see that the event is being created <em>with</em> the <code>keyCode</code> property set to 40. So it seems like it should work. </p> <p class="cn">此外，当我像这样调用最后一行 <code>textarea.triggerHandler("keydown");</code> 时，它可以工作并触发事件处理程序.但是，没有 <code>keyCode</code> 可以使用，因此毫无意义.<em class="showen"></em></p> <p class="en">Also, when I call the last line like this <code>textarea.triggerHandler("keydown");</code> it works and the event handler is triggered. However, there is no <code>keyCode</code> to work with, so it is pointless.</p> <p class="cn">我怀疑这可能与针对 DOM 运行的测试的性质有关，该 DOM 与在浏览器中运行的常规页面不同.但我想不通！<em class="showen"></em></p> <p class="en">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!</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">我已经使用以下解决方案对其进行了测试，并基于此 <a href="https://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key/12522769#12522769">SO 答案</a>.它在 Safari 中不起作用 - 尝试了数百万个其他解决方案但没有任何成功......<em class="showen"></em></p> <p class="en">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...</p> <pre><code><code>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); </code></code></pre> <p class="cn">希望能帮到你</p> <p class="cn">今天我发现并测试了这个解决方案，它提供了更广泛的浏览器覆盖范围(启用旧版支持):<em class="showen"></em></p> <p class="en">Today I've found and tested this solution which is offers a much wider coverage of browsers (enabling the legacy support):</p> <p class="cn"><a href="https://gist.github.com/termi/4654819" rel="nofollow noreferrer">https://gist.github.com/termi/4654819</a></p> <p class="cn">所有功劳都归功于此 GIST 的作者.该代码确实支持 Safari、PhantomJS 和 IE9 - 针对前 2 个进行了测试.<em class="showen"></em></p> <p class="en">All the credit goes to the author of this GIST. The code does support Safari, PhantomJS and IE9 - tested for the first 2.</p> <p>这篇关于使用特定的 keyCode 在 Jasmine 中测试 keydown 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2522690');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="是否可以忽略keyCode = 229的keydown事件？" href="/592933.html"> 是否可以忽略keyCode = 229的keydown事件？; </a> </li> <li> <a target="_blank" title="使用keyCode = 229忽略keydown事件可以吗？" href="/692176.html"> 使用keyCode = 229忽略keydown事件可以吗？; </a> </li> <li> <a target="_blank" title="在KeyDown事件上筛选KeyCode的更有效方法" href="/2068220.html"> 在KeyDown事件上筛选KeyCode的更有效方法; </a> </li> <li> <a target="_blank" title="测试KEYDOWN事件茉莉花与特定键code" href="/196150.html"> 测试KEYDOWN事件茉莉花与特定键code; </a> </li> <li> <a target="_blank" title="在 TextBox 的 KeyDown 处理程序下更改 KeyCode" href="/2464006.html"> 在 TextBox 的 KeyDown 处理程序下更改 KeyCode; </a> </li> <li> <a target="_blank" title="如何在Jasmine测试中测试$ scope。$ on事件？" href="/954076.html"> 如何在Jasmine测试中测试$ scope。$ on事件？; </a> </li> <li> <a target="_blank" title="特定键的keydown + keyup事件" href="/1015326.html"> 特定键的keydown + keyup事件; </a> </li> <li> <a target="_blank" title="在KeyPress事件中获取KeyCode值" href="/1529217.html"> 在KeyPress事件中获取KeyCode值; </a> </li> <li> <a target="_blank" title="在 Jasmine 测试中测试 DOM 操作" href="/2802413.html"> 在 Jasmine 测试中测试 DOM 操作; </a> </li> <li> <a target="_blank" title="在Jasmine测试中测试DOM操作" href="/953871.html"> 在Jasmine测试中测试DOM操作; </a> </li> <li> <a target="_blank" title="在Angular + Jasmine中测试事件链和module.run()" href="/2144874.html"> 在Angular + Jasmine中测试事件链和module.run(); </a> </li> <li> <a target="_blank" title="Jasmine测试模拟选项卡keydown并检测新聚焦的元素" href="/954242.html"> Jasmine测试模拟选项卡keydown并检测新聚焦的元素; </a> </li> <li> <a target="_blank" title="如何使用特定的window.location.href在Jasmine中测试window.load（）？" href="/954286.html"> 如何使用特定的window.location.href在Jasmine中测试window.load（）？; </a> </li> <li> <a target="_blank" title="在Chrome中模拟keydown事件" href="/819245.html"> 在Chrome中模拟keydown事件; </a> </li> <li> <a target="_blank" title="Jasmine：在测试中添加Lodash" href="/954328.html"> Jasmine：在测试中添加Lodash; </a> </li> <li> <a target="_blank" title="Mdiform中的Keydown事件" href="/1378536.html"> Mdiform中的Keydown事件; </a> </li> <li> <a target="_blank" title="表单中的KeyDown事件" href="/2162960.html"> 表单中的KeyDown事件; </a> </li> <li> <a target="_blank" title="如何调用特定按钮单击上的keydown事件" href="/1437816.html"> 如何调用特定按钮单击上的keydown事件; </a> </li> <li> <a target="_blank" title="无法在 Angular 2 单元测试(Jasmine)中模拟按键事件" href="/2802522.html"> 无法在 Angular 2 单元测试(Jasmine)中模拟按键事件; </a> </li> <li> <a target="_blank" title="无法在Angular 2单元测试（Jasmine）中模拟按键事件" href="/953985.html"> 无法在Angular 2单元测试（Jasmine）中模拟按键事件; </a> </li> <li> <a target="_blank" title="事件keyCode的数值不同" href="/1493965.html"> 事件keyCode的数值不同; </a> </li> <li> <a target="_blank" title="如何使用Jasmine在Angular中测试路线的存在?" href="/2144870.html"> 如何使用Jasmine在Angular中测试路线的存在?; </a> </li> <li> <a target="_blank" title="在PhantomJS中使用Jasmine测试$ interval" href="/954070.html"> 在PhantomJS中使用Jasmine测试$ interval; </a> </li> <li> <a target="_blank" title="我如何引发的keyup / keydown事件在angularjs单元测试？" href="/194522.html"> 我如何引发的keyup / keydown事件在angularjs单元测试？; </a> </li> <li> <a target="_blank" title="在Panel中创建KeyDown事件的麻烦" href="/691022.html"> 在Panel中创建KeyDown事件的麻烦; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '使用,特定,的,keycode,在,jasmine,中,测试,keydown,事件'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>