Javascript 模拟茉莉花中的假按键

我试图在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();

（注意：上面的代码用anon函数包装addEventListener中的函数，以便Jasmine实际尝试运行我的测试。如果没有匿名包装，这将导致另一个错误：

TypeError:“undefined”不是函数（评估“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）还是一个新手，所以我非常感谢您的帮助。

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

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

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);

这里也有一个plunker：

---

如前所述，有关.keyCode弃用的信息，请参阅。

编辑：此问题应在PhantomJS 2之后解决。有关详细信息，请参阅下面的问题

那么原因是什么呢

this.onKey.bind(this, true)

返回错误的原因是，截至本文发布之日，PhantomJS还不支持绑定。您可以在此处找到更多相关信息：

ariya在这里给出了更详细的解释：

解决此问题的一种方法是按照creationix的建议创建多边形填充：

---

考虑到所有这些信息，知道我可以绕过原型问题，测试应该会更容易管理。感谢所有的帮助！

因为这解决了手头的实际问题，我接受了这个答案；谢谢Chris！但是，我最初的问题并不是我应该问的，所以我会给出更多细节您好，这是一篇老帖子，但知道

keyCode

现在已经被弃用可能很好。因此代码应该使用

key

或

code

，因此略有不同。我用新版

event.key

编辑了这个答案，而不是

event.keyCode