无法测试去抖动的 Backbone 视图事件答案

【问题标题】：Unable to test debounced Backbone view event无法测试去抖动的 Backbone 视图事件
【发布时间】：2014-02-04 15:09:42
【问题描述】：

当我不限制/去抖动测试通过的功能时。

但是，当我对事件进行去抖动以防止服务器泛滥时，测试不再通过。摩卡输出AssertionError: expected execute to have been called at least once, but it was never called

应该注意，去抖动调用在实时代码中没有错误。这就是为什么我对测试失败的原因感到非常困惑。

测试：

describe('When information is entered into the search fields', function () {
    it('vents up the search:for:churches command', function () {
        var executeStub = sinon.stub(App, 'execute');

        view = new SearchForm()
        view.render();

        view.$el.find('input[name=church_name]').val('baptist')
        view.$el.find('input[name=zip]').val('61615')

        view.$el.find('input[name=zip]').trigger($.Event('keypress'))

        expect(executeStub).to.have.been.called

        view.close();
        PEP.execute.restore()
    });
});

无节流：

var SearchForm = Backbone.Marionette.ItemView.extend({

    template: 'search_form',
    events: {
        'keypress [data-search-field]' : 'searchForChurches'
    },

    searchForChurches: function() {
        console.log('not debounced')
        var searchData = Backbone.Syphon.serialize(this);
        App.execute("search:for:churches", searchData);
    }

});

节流：

var SearchForm = Backbone.Marionette.ItemView.extend({

    template: 'search_form',
    events: {
        'keypress [data-search-field]' : 'searchForChurches'
    },

    searchForChurches: _.debounce(function() {
        console.log('debounced')
        var searchData = Backbone.Syphon.serialize(this);
        App.execute("search:for:churches", searchData);
    }, 200)

});

编辑： 我也发了一个相关的后续问题：https://stackoverflow.com/questions/21167488/how-to-test-a-debounced-throttled-backbone-view-event-with-mocha-to-ensure-its-a

【问题讨论】：

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

【解决方案1】：

有一个问题，当使用 UnderscoreJS 和 SinonJS。

UnderscoreJS 中的 debounce 函数使用 _.now。
SinonJS 覆盖了 Date 对象，但不覆盖 _.now。

出于测试目的，我在测试的引导文件中替换了 _.now：

_.now = function() {
  return new Date().getTime();
};

【讨论】：

【解决方案2】：

Simon 的方法在大多数情况下都非常有效，但我不断遇到导致更多错误的不同情况。在花费更多时间并查看 sinon 的文档之后，我认为我有更好的方法。

诗乃的Fake Timers 来救援。

describe('When information is entered into the search fields', function () {
    it('vents up the search:for:churches command', function () {
        var clock = sinon.useFakeTimers();
        var executeStub = sinon.stub(App, 'execute');

        view = new SearchForm()
        view.render();

        view.$el.find('input[name=church_name]').val('baptist')
        view.$el.find('input[name=zip]').val('61615')

        view.$el.find('input[name=zip]').trigger($.Event('keypress'))
        clock.tick(200)

        expect(executeStub).to.have.been.called

        view.close();
        PEP.execute.restore()
        clock.restore()    
    });
});

【讨论】：

【解决方案3】：

限制任何事情意味着执行将是异步的。这就是它在你的测试中失败的原因，因为 App.execute 方法没有被立即调用，所以当你断言它已经被调用时，它还没有被调用。

在这种情况下，不要使用诗乃。只需手动存根您的方法：

describe('When information is entered into the search fields', function () {
    it('vents up the search:for:churches command', function (done) {
        var originalMethod = App.prototype.execute;

        App.prototype.execute = function () {
            App.prototype.execute = originalMethod;
            done(); // calling done will pass the test, otherwise it'll fail with a timeout
        };

        view = new SearchForm()
        view.render();

        view.$el.find('input[name=church_name]').val('baptist')
        view.$el.find('input[name=zip]').val('61615')

        view.$el.find('input[name=zip]').trigger($.Event('keypress'))

        view.close();
    });
});

【讨论】：