模拟茉莉花中的假按键

Question

我正在尝试模拟Jasmine中的按键(测试浏览器是PhantomJS),因此我可以对使用按键的一些功能进行单元测试.不幸的是,我无法使用Jasmine正确测试它,因为我遇到了错误.

这是我要测试的代码:

function Controls() {
  'use strict';
  this.codes = {
    37: 'left',
    39: 'right',
    38: 'forward',
    40: 'backward'
  };
  this.states = {
    'left': false,
    'right': false,
    'forward': false,
    'backward': false
  };
  document.addEventListener('keydown', function() { this.onKey.bind(this, true); }, false);
  document.addEventListener('keyup', function() { this.onKey.bind(this, false); }, false);
}

Controls.prototype.onKey = function(val, e) {
  var state = this.codes[e.keyCode];

  if (typeof state === 'undefined') return false;

  this.states[state] = val;

  // Stop the key press from repeating
  e.preventDefault();
  e.stopPropagation();

  return true;
};

controls = new Controls();

(注意:上面的代码使用匿名函数包装addEventListener中的函数,以便Jasmine实际上会尝试运行我的测试.如果没有匿名换行,这会导致另一个错误:TypeError: 'undefined' is not a function (evaulating 'this.onKey.bind(this, true)'解决这个问题也很好.)

这是我尝试测试:

function keyPress(key) {
  var pressEvent = document.createEvent('KeyboardEvent');
  pressEvent.initKeyEvent('keydown', true, true, window,
                            false, false, false, false,
                            0, key);
  document.dispatchEvent(pressEvent);
}

describe("Controls", function() {
  var controls;

  it("should initialize properly", function() {
    controls = new Controls();
    expect(controls).not.toBe(null);
  });

  it("should reflect changes in state when arrow keys are used", function() {
    keyPress(37);
    expect(controls.states[state]).toBe(37);
  });
});

这会导致Jasmine出错:

TypeError: 'undefined' is not a function (evaluating 'pressEvent.initKeyEvent('keydown', true, true, window, false, false, false, false, 0, key)')

我仍然是Jasmine的新手(就此而言,Javascript),所以任何帮助一般都会受到赞赏.

Answer 1

看起来您的问题在于如何创建活动.

下面的示例代码显示了如何创建,触发和拦截事件.

var keyPressed = null;

function keyPress(key) {
  var event = document.createEvent('Event');
  event.keyCode = key; // Deprecated, prefer .key instead.
  event.key = key;
  event.initEvent('keydown');
  document.dispatchEvent(event);
}

document.addEventListener('keydown', function(e){
   keyPressed = e.key;
});

keyPress(37)
alert(keyPressed);

这里也是一个吸烟者:http://plnkr.co/edit/TxGXcT0DnPa44C0PkHkN？p =preview

如评论所示,请参阅此处了解有关.keyCode弃用的信息.