Question

我正在尝试在单元测试中模拟keydown事件（angular2 / TypeScript）。我并不总是有可用的DebugElement，所以我试图在本机元素上发出事件。我遇到的问题是如何在创建KeyboardEvent时定义keyCode。 keyCode未定义为KeyboardEventInit定义的一部分，而在KeyboardEvent本身上，它仅作为只读属性公开。

只需添加一个keyCode属性（并将obj类型设置为）也不起作用。

    let elm = <HTMLElement>content.nativeElement;
    let ev = new KeyboardEvent('keydown', {
        code: '123',
        //keyCode: 345,
        key: 'a',
    });
    elm.dispatchEvent(ev);

有什么建议吗？

编辑：根据mdn链接，不推荐使用keyCode，不应使用，而应使用“code”。 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Answer 1

keyCode已过时，Angular本身使用key进行操作—我建议您也重写逻辑以使用它。请记住，它取决于浏览器-在IE空格栏中为Space，在其他浏览器中为。 Esc和Escape也不同。别忘了还有其他区别。

Answer 2

由于初始化语言LanguageEvent的存在，我仍然认为这是打字稿方面的错误。无论如何，一种解决方法是使用 Object.define 设置keyCode。

let arrowRight = new KeyboardEvent('keydown');
Object.defineProperty(arrowRight, 'keyCode', {
    get : () => 39
});
console.log(arrowRight.keyCode, arrowRight.key, arrowRight.code);

无论keyCode是否已弃用，这并不意味着初始化程序不应该支持它。最有力的论据是Internet Explorer 9和11依赖于此，并且它们不支持 code https://caniuse.com/#search=event.code 或完全支持密钥 https://caniuse.com/#search=event.key 因此，我认为 LanguageEvent 应该在其初始值设定项中允许使用keyCode。

let arrowRight = new KeyboardEvent('keydown', { keyCode: 39 });

Answer 3

如果使用的是angular，则可以设置键盘事件，然后键入HTML模板并绑定到您的方法。

请参见有关角度的文档：https://angular.io/guide/user-input#key-event-filtering-with-keyenter

由于您不需要测试angular API，因为它不是受测试的系统，因此您只需将模拟数据传递到已将键事件绑定到的方法中，即可编写单元测试。

如果您要进行UI /集成测试，那么所有这些都不会特别有用，因为上述内容仅对单元测试有效。

Answer 4

或例如，如果您想在用户按下CTRL + ALT + D时运行函数，则您的代码将类似于以下内容。

 window.addEventListener('keydown', (event: KeyboardEvent) => {
       // Fall back to event.which if event.keyCode is null
       const keycode = event.keyCode || event.which;
       if (keycode === 68 && event.ctrlKey && event.altKey) {
         // Do stuff here
       }
    });

Answer 5

看看：

<!DOCTYPE html>
<html>
<body>
  <script>
  function EventHandler(e) {
    e = e || window.event;
    var code = typeof e.which !== 'undefined' ? e.which : e.keyCode; 
    if(code == 112 || code == 113 
        || code == 114 || code == 115
        || code == 116 || code == 117
        || code == 118 || code == 119
        || code == 120 || code == 121
        || code == 122 || code == 123) {
      e.returnValue = false;
      var target2 = document.getElementById("iFrameId"); 
      var targetBody = target2.contentDocument.body; 
      var keyboardEvent = document.createEvent("KeyboardEvent");

      Object.defineProperty(keyboardEvent, 'keyCode', {
        get : function() {
          return this.keyCodeVal;
        }
      });

      Object.defineProperty(keyboardEvent, 'which', {
        get : function() {
          return this.keyCodeVal;
        }
      });

      var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

      keyboardEvent[initMethod](
         "keydown", // event type : keydown, keyup, keypress
         true, // bubbles
         true, // cancelable
         window, // viewArg: should be window
         false, // ctrlKeyArg
         false, // altKeyArg
         false, // shiftKeyArg
         false, // metaKeyArg
         code, // keyCodeArg : unsigned long the virtual key code, else 0
         0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
      );
      keyboardEvent.keyCodeVal = code;
      targetBody.dispatchEvent(keyboardEvent);        
    }
  }
  </script>

  <form>
    <input type="text" name="first" onkeydown="EventHandler()" > <br>
    <iframe id="iFrameId" src="frame.html" > </iframe>
  </form>
</body>
</html>

如何使用特定的keyCode创建KeyboardEvent

5 个答案: