在 jasmine 中嘲笑 angular $element

Question

我需要测试一个包含 $element 的指令控制器。所以我有一个像这样的功能：

function func($event) {
        $element.find('#la-la-la').focus();
}

并在测试中渲染它：

template = $compile(element)($scope);
$scope.$apply();

controller = element.controller('myDirective');

我想要做的是在该指令的控制器中测试这个函数。

describe('func method', function testFunc() {
    it('should focus on element', function checkFocusing() {
        controller.func();
        expect(focusSpy).toHaveBeenCalled();
    });
});

其中 "focusSpy" 是模拟 $element 服务中的间谍。但似乎如果我使用 $provide.service('$element', ...) 测试找不到它。在编译之前将其注入 $scope.$element 也不起作用。谢谢！

Answer 1

好的，我找到了可行的解决方案。您不能模拟 $element，因为它是指令控制器的私有变量，但由于它是一个 jQuery 元素，您可以像这样监视 jQuery 本身：

describe('func method', function testFunc() {
    it('should focus on element', function checkFocusing() {
        spyOn($.fn, 'find').and.callThrough();
        spyOn($.fn, 'focus').and.callThrough();

        controller.func();

        expect($.fn.find).toHaveBeenCalledWith('#la-la-la');
        expect($.fn.focus).toHaveBeenCalled();
    });
});

在 jasmine 中嘲笑 angular $element

mocking angular $element in jasmine

javascript

unit-testing

jasmine

angularjs

karma-jasmine