用 Mocha、Chai、Sinon 模拟和测试按键事件？答案

【问题标题】：Simulate and test a keypress event with Mocha, Chai, Sinon?用 Mocha、Chai、Sinon 模拟和测试按键事件？
【发布时间】：2017-03-25 20:02:32
【问题描述】：

我有一个 Backbone 视图，其中包含 keyup 和 keydown 事件的自定义事件。

events: {
    "keyup .search-box": "changeTextTimer",
    "keydown .search-box": "cancelTextTimer"
},

我正在编写单元测试来检查这些回调是否在 keyup 或 keydown 之后被调用。我使用jQuery来触发按键事件。

it("should call cancelTextTimer", function() {
    var searchBox = new SearchBoxView({el: $(HTML),}).render();

    var e = $.Event("keydown");
    e.which = 65;
    searchBox.$(".search-box").trigger(e);

    var changeTextTimer = sinon.spy(searchBox, "cancelTextTimer");
    _.defer(changeTextTimer.restore);

    changeTextTimer.should.have.been.calledOnce;

});

但是，我收到了一个

AssertionError: expected cancelTextTimer to have been called exactly once, but 
it was called 0 times: Got value cancelTextTimer but expected a value undefined undefined

【问题讨论】：

您在触发点击后设置了您的间谍，当您将其移动到测试函数的第二行时会发生什么？
@HenrikAndersson 这是答案材料。
@HenrikAnderson 嗯，它仍然给我同样的错误
searchBox.$(".search-box") 能找到元素吗？我注意到您正在传递 HTML (el: $(HTML)) - 这可能是错误的来源
@mikeapr4 它确实找到了元素。在我的视图类中，我将.search-box 附加到$el。我将 $(HTML) 作为 el 传递，在我的测试中，我有一个名为 HTML 的变量，它有一个空的 div。我不确定是否需要它，但无论哪种方式我都会遇到同样的错误。

标签： javascript backbone.js mocha.js sinon chai

【解决方案1】：

试试这个

it("should call cancelTextTimer", function(done) {
    var searchBox = new SearchBoxView({el: $(HTML),}).render();
    var changeTextTimer = sinon.spy(searchBox, "cancelTextTimer");
    _.defer(changeTextTimer.restore);

    var e = $.Event("keydown");
    e.which = 65;
    searchBox.$(".search-box").trigger(e);

    setTimeout(() => {
        changeTextTimer.should.have.been.calledOnce;
        done();
    }, 0);

});

【讨论】：