Question

我的指令看起来像这样：

angular.directive('newDirective', ['$compile', function($compile){
    return {
        link: function(scope, element, attr, controller) {
            console.log("newDirective Content:"+$("#sub").html());
        }
    };
}]);

我试着用这个进行单元测试：

describe('newDirective Test',function(){
    beforeEach(module('app'));

    it('Temporary test jquery function', inject(function($compile,$rootScope) {
        var element = $compile('<div new-directive><div id="sub">abc</div></div>')($rootScope);
    }));
});

当我正常运行指令时，我得到输出newDirective Content:abc。但是当我运行单元测试时，我得到了日志输出newDirective Content:undefined。

如何让jquery函数在单元测试中工作？

Answer 1

如果真的想在指令中使用jQuery函数，可以在单元测试中完成它：

var scope = $rootScope.$new();
var element = angular.element('<div new-directive><div id="sub">abc</div></div>');
element.appendTo(document.body);
element = $compile(element)(scope);

通过添加element.appendTo(document.body);，您将在单元测试中获得jQuery函数。

Answer 2

我建议你（如果你有控制权）你不使用jQuery获取

中的html

<div id="sub">abc</div>

而是使用jQlite来搜索DOM。

testApp.directive('newDirective', ['$compile', function($compile){
    return {
        link: function(scope, element, attr, controller) {
            console.log("newDirective Content:"+element.find('#sub').html());
        }
    };
}]);

您也可能希望重新考虑您的规范，以便html的编译发生在它的函数之外 - jsfiddle demo。

describe('newDirective Test',function(){
    beforeEach(module('testApp'));

    var element, scope;

    beforeEach(inject(function($rootScope, $compile) {
        element = angular.element('<div new-directive><div id="sub">abc</div></div>');
        scope = $rootScope;
        $compile(element)(scope);
        scope.$digest();
    }));

    it("should contain a div tag", function() {
        expect(element.find('div').length).toEqual(1);
    });

});

Answer 3

您可以将元素作为第二个参数传递：

$('#your-id', element);

或者您可以将元素作为$()参数传递并使用其他方法：

$(element).find('#your-id');

AngularJS - 带有jquery函数的单元测试指令

3 个答案: