如何使用 sinonjs 和 jquery 监视窗口调整大小事件？

Question

我使用backbonejs，requirejs 来制作我的javascript 应用程序。

我也使用 jasmine、sinonjs 和 jasmine-sinon 插件来测试我的应用程序，但是使用 spy 时出现问题。

间谍方法调用得很好（我确定），但 jasmine 测试结果显示该方法未调用！

---

我有一个主干视图，它具有浏览器窗口调整大小事件的回调。

我要做的是测试在触发窗口调整大小事件时是否应该调用“windowResizeCallback”函数。

这是我的主干视图代码。

define([
    'jquery',
    'use!underscore',
    'use!backbone',
    // other dependencies..
], function (
    $,
    _,
    Backbone,
    // other dependencies..
) {

    var MyView = Backbone.View.extend({

        initialize: function () {
            // do initialization
            var self = this;
            $(window).resize($.proxy(self.windowResizeCallback, self));
        },

        windowResizeCallback: function () {
            // do my business..
            this.otherFunction();
        },

        otherFunction: function () {
            // function called by window resize callback
        }

        // other properties, functions, ..

    });

    return MyView;
});

这是我的测试代码。

<script type="text/javascript" src="path/to/jasmine.js"></script>
<script type="text/javascript" src="path/to/sinon.js"></script>
<script type="text/javascript" src="path/to/jasmine-sinon.js"></script>
<!-- other scripts.. -->
<script type="text/javascript>
define([
    'view/myView'
], function (
    MyView
) {

    describe('view.MyView', function () {

        beforeEach(function () {
            this.view = new MyView();
            sinon.spy(this.view, 'windowResizeCallback');
        });

        afterEach(function () {
            this.view.windowResizeCallback.restore();
        });

        describe('MyView.windowResizeCallback', function () {

            beforeEach(function () {
                this.view.windowResizeCallback.reset();
            });

            it('callback should be called when window resize event fired', function () {
                $(window).trigger('resize');
                expect(this.view.windowResizeCallback).toHaveBeenCalled();
                // above test fails !!!!
            });

        });
    });

});
</script>

我认为测试代码应该通过但它失败并出现错误

Expected Function to have been called.

当我在 'windowResizeCallback' 方法中插入警报代码时，警报会很好地显示，因此我相信在触发浏览器窗口大小调整事件时回调会被很好地调用。

我不明白为什么。我的代码有什么问题吗？

提前致谢。

Answer 1

问题是事件监听器使用原始函数。首先初始化视图，事件监听器绑定到原来的函数，然后替换视图中的windowResizeCallback函数，但是绑定到事件监听器的函数还是原来的函数。

监视/子/模拟您要测试的对象的功能也不是一个好主意。更好地测试windowResizeCallback 函数的结果。