如何使用sinonjs和jquery间谍窗口调整大小事件?

时间:2013-04-08 09:01:44

标签: javascript jquery unit-testing jasmine sinon

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

此外,我使用jasmine,sinonjs和jasmine-sinon插件来测试我的应用程序,但使用间谍时存在问题。

调用spied方法(我很确定),但jasmine测试结果表明该方法 NOT 被调用!


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

我想要做的是测试在触发window resize事件时应该调用'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'方法中插入警报代码时,警报显示良好,所以我相信在触发浏览器窗口调整大小事件时调用回调。

我无法理解为什么。我的代码有什么问题吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

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

对于你想要测试的对象的间谍/子/模拟函数也不是一个好主意。更好地测试windowResizeCallback函数的结果。