如何使用 Mocha & Sinon 测试 document.addEventListener('keydown', cb)？

Question

I'm trying to figure out the best way for testing this method:

document.addEventListener("keydown", function (event) {
    var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
                    event.shiftKey;
    var mapped    = map[event.which];

    if (!modifiers) {
      if (mapped !== undefined) {
        event.preventDefault();
        self.emit("move", mapped);
      }
    }
  });

I'd like to ensure that if the keys are modifiers or if the keys are not mapped, nothing happens, however, if they are, to spy on the self.emit function.

Answer 1

I could do it with sinon. Here is my solution:

it('adds listener events', function() {
  sinon.spy(document, 'addEventListener')
  sinon.spy(window, 'addEventListener')

  expect(document.addEventListener.calledOnce).not.to.be.true
  expect(window.addEventListener.calledOnce).not.to.be.true

  subject.myFunc()

  expect(document.addEventListener.calledOnce).to.be.true
  expect(window.addEventListener.calledOnce).to.be.true
})

In my case I had to test window focus and document click for example.

Hope it helps

Answer 2

Try this.

before(function() {
  // Create stubs to spy on calls without executing the native code
  global.document= {addEventListener: sinon.stub()};
  global.self = {emit: sinon.stub()};

  // Execute the function under test
  subject.myFunc();

  // Save the callback function
  this.callback = document.addEventListener.getCalls()[0].args[1];
  this.eventType = document.addEventListener.getCalls()[0].args[0];
});

it('should use appropriate arguments', function() {
  this.eventType.should.eql("keydown");
  this.callback.should.be.a("function");
});

it('should use a callback that does nothing without a modifier key', function() {
  const eventProxy = {
    which: 97, // "A"
    preventDefault: sinon.stub()
  };

  this.callback(eventProxy);

  eventProxy.preventDefault.should.not.be.called;
  global.self.emit.should.not.be.called;
});

it('should use a callback that prevents default with a modifier key', function() {
  const eventProxy = {
    which: 97, // "A"
    shiftKey: true,
    preventDefault: sinon.stub()
  };

  this.callback(eventProxy);

  eventProxy.preventDefault.should.be.calledOnce.and.calledWith();
  global.self.emit.should.be.calledOnce.and.calledWith('move');
});