测试 Jasmine 中自定义事件的处理

Question

我想确保在触发自定义 jQuery 事件时，对象的方法作为事件处理程序被调用；但单元测试似乎返回了一个假阴性，因为我的实现运行良好。

（这是使用 Twitter Flight 和 Flight Jasmine extensions 的测试套件的一部分，但这只是一个普通的 Jasmine 间谍。）

describe('listening for uiNeedsPlan event', function() {

var spy;
beforeEach(function() {
  spy = spyOn(this.component, 'getPlan');
  $(document).trigger('uiNeedsPlan');
});

it('gets the current plan', function() {
  expect(spy).toHaveBeenCalled();
});

});

这导致规范失败：

Expected spy getPlan to have been called.

这是我的 Flight 组件的代码实现中的一个 sn-p（成功运行）：

this.after('initialize', function () {
  this.on(document, 'uiNeedsPlan', this.getPlan);
});

Answer 1

在详细说明为什么这不起作用之前，我首先要指出的是，测试此方法是否已执行是一种不好的做法。您应该测试组件的接口——它的输入和输出以及它对 DOM 的影响。它如何做它所做的事情（它调用了哪些内部方法，它的内部状态）是无关紧要的。

至于为什么它不起作用：当您创建间谍时，您正在监视组件方法的未绑定版本。当组件被实例化时，方法被绑定到实例并分配给回调。组件实例化后，无法访问这些绑定方法（afaik）。

相反，您需要在组件实例附加到 DOM 之前监视原型。另外，您似乎根本没有调用 setupComponent，所以 this.component 无论如何都不存在。

var spy;

beforeEach(function () {
    spy = spyOn(this.Component, 'getPlan');
    setupComponent();
    $(document).trigger('uiNeedsPlan');
});
it('executes getPlan', function() {
    expect(spy).toHaveBeenCalled();
});