如何定义keyCode或键盘事件的哪个或键或代码属性

时间:2016-11-28 07:21:36

标签: javascript typescript jasmine phantomjs node-modules

根据我的要求,我们需要为热键编写测试规范(比如shift + 1 + L - 上传文件)。在我的方法中,我写了类似下面的内容

    public static SHIFTKEY      : number = 16;
    this.keys = {};

    document.addEventListener('keydown', (event: KeyboardEvent) => {
    var code = event.which ? event.which : event.keyCode;
    if (code === KeyCodeConst.SHIFTKEY || (this.keys[KeyCodeConst.SHIFTKEY] && trackedKeys[code])) {
    if (!this.keys[code]) {
    this.keys[code] = true;
    this.keysCount++;
    }
    if (this.keysCount === 3) {
        alert('call the method which is required');
    }
    }
    if (!trackedKeys[code]) {
    this.keysCount = 0;
    }
    });

现在在我的spec文件中,我正在尝试为此编写一个测试用例,如下所示

      describe('Add Event Listener', () => {
           beforeEach(() => {
               viewModel = new viewModel();
               spyOn(window, 'addEventListener').and.callThrough();
           });
           it('check the combination of keys are called', () => {
               keyPress(16);
               keyPress(49);
               keyPress(76);
               expect(viewModel.keys[KeyCodeConst.SHIFTKEY]).toBeTruthy();          
           });
           function keyPress(keyCodeVal) {
               var keyboardEvent = document.createEvent('KeyboardEvent');
               try {
                   Object.defineProperty(keyboardEvent, 'keyCode', {'value': keyCodeVal});
               } catch (err){
                   console.log(err);
               }
               keyboardEvent.initKeyboardEvent('keydown',true,false,window,'',0,'',false,'');
               document.body.dispatchEvent(keyboardEvent);
           }
       });

在运行构建时,我收到如下所示的错误,并且它会产生类似下面的构建错误

    Attempting to change value of a readonly property.
    at defineProperty (--some url--)
    at keyPress (--some url--)

除了keyCode之外,还有一种方法可以将按下的键值发送给方法。根据MDN指南,我观察到这些是只读属性。我尝试使用密钥,但它没有工作。

1 个答案:

答案 0 :(得分:0)

要在不实际触发keydown事件的情况下测试您的方法,您可能会分离从您的函数中取出按下的键的逻辑,并且在测试中只需使用您要测试的按下的键代码来提供它。

要实际测试keydown个事件,请尝试使用此功能将元素调度keydown事件并调整keyCode值(调整为幻影-js):

    function triggerKeyDown(element, value) {
        var e = document.createEvent('KeyboardEvent');
        e.initEvent('keydown', true, false);
        Object.defineProperty(e, 'keyCode', {'value': value});
        element.dispatchEvent(e);
    }