javascript - 如何使用 sinonjs 和 jquery 监 window 口调整大小事件？

Question

我使用 backbonejs、requirejs 来制作我的 javascript 应用。

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

spy 方法调用得很好(我敢肯定)，但 Jasmine 测试结果表明该方法未被调用!

---

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

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

这是我的主干 View 代码。

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

问题是事件监听器使用了原来的函数。首先初始化 View ，事件监听器绑定(bind)到原始函数，然后替换 View 中的 windowResizeCallback 函数，但绑定(bind)到事件监听器的函数仍然是原始函数。

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