AngularJS - Direttiva Unit Test con funzione di jQuery

Question

Ho una direttiva che assomiglia a questo:

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

ho cercato di fare test di unità con questo:

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); 
    })); 
}); 

Quando eseguo la direttiva normalmente, Ottengo l'output newDirective Content:abc. Ma quando eseguo il test unitario, ottengo l'output del registro newDirective Content:undefined.

Come è possibile ottenere la funzione jquery per il test dell'unità?

Answer 1

vi suggerisco (se si ha il controllo) che non si utilizza jQuery ottenere il codice html all'interno di

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

e di utilizzare invece jQlite per cercare il DOM.

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

È inoltre può quindi desiderare di ri-factor vostra spec in modo che la compilazione del codice HTML avviene al di fuori della funzione di esso - 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

Se davvero si vuole utilizzare la funzione jQuery nella direttiva, questo è come si può fare in unit test:

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); 

Aggiungendo element.appendTo(document.body);, si otterrà la funzione jQuery lavoro in unit test.

Answer 3

È possibile passare l'elemento come secondo argomento:

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

Oppure si può semplicemente passare l'elemento come argomento $() e utilizzare altri metodi:

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