AngularJS - Директива Unit Test с функцией Jquery

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. Но когда я запускаю модульный тест, я получаю log-выход newDirective Content:undefined.

Как я могу получить функцию jquery для работы в модульном тесте?

Answer 1

Я предлагаю вам (если у вас есть контроль), что вы не используете 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 2

Если действительно хотите использовать функцию 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 3

Вы можете передать элемент в качестве второго аргумента:

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

Или вы можете просто передать элемент в качестве $() аргумента и использовать другие методы:

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