Question

我的控制器中有以下方法：

$scope.onWindowResize = function() {
    var dWidth= $('#div1').width();
    var left = $('#div1').position().left;
    $('.myClass1').css({'width':dWdth});
    $('.myClass2').css({'left': left});
}

我正在尝试使用以下代码测试onWindowResize（）上的方法。

it('onWindowResize()', inject(function () {
    scope.onWindowResize();
    scope.$apply();
}));

但我收到此错误消息：

"message": "'undefined' is not an object (evaluating '$('#div1').position().left')"

和

dWidth is null

我有sinon间谍，但不知道如何在这里使用它。我可以以某种方式使用它来监视它，还是有更好的方法来测试这种方法？我想我需要模仿“ $（'＃div1'）”，但不知道如何做到这一点。任何帮助都非常感谢。

Answer 1

首先，您的代码中存在拼写错误，您在css函数中使用dWidth错误，例如此adjWdth。您可以像这样在$ / jQuery函数上创建一个间谍，并为css函数监视间谍

var cssSpy = jasmine.createSpy('cssSpy');
$ = jasmine.createSpy().andCallFake(function(){
    return {
        width:function(){return 200;},
        position: function(){return{left:500};},
        css: cssSpy
    };
});
$scope.onWindowResize();
expect(cssSpy).toHaveBeenCalledWith({'width':200});
expect(cssSpy).toHaveBeenCalledWith({'left':500});

正如您所看到的，我覆盖了$ / jQuery函数本身并使用您在onWindowResize函数中使用的属性/方法返回一个对象。而且还是css功能的间谍。 andCallFake是茉莉花的旧版本，新版本为.and.callFake()。请确认它是否适合您并且好好学习。你可以在beforeEach块中执行它以便可重用并模拟在选择DOM元素时要返回的所有键;）。 顺便说一下，不建议在控制器内部使用DOM操作代码，它应该在指令的链接功能中。

包含jQuery的方法的Jasmine测试

1 个答案: