AngularJS - Einheit Test-Richtlinie mit Jquery Funktion

Question

Ich habe eine Direktive, die wie folgt aussieht:

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

Ich habe versucht, Unit-Test mit, dies zu tun:

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

Wenn ich die Richtlinie normal laufen, Ich bekomme den Ausgang newDirective Content:abc. Aber wenn ich den Komponententest starte, bekomme ich die Logausgabe newDirective Content:undefined.

Wie kann ich die jquery Funktion im Unit Test arbeiten lassen?

Answer 1

Ich schlage vor, dass Sie (wenn Sie die Kontrolle haben), die Sie verwenden jQuery nicht die html erhalten innerhalb

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

und stattdessen jQlite verwenden, um den DOM zu suchen.

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

Sie können auch dann wünschen, dass Ihre spec erneut Faktor, so dass die Erstellung der HTML-Stelle außerhalb der Funktion es ist - dauert 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

Wenn wirklich jQuery-Funktion in der Richtlinie verwendet werden soll, ist dies, wie es in Unit-Test durchgeführt werden kann:

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

Durch das Hinzufügen element.appendTo(document.body); Sie jQuery-Funktion arbeiten in Unit-Test bekommen.

Answer 3

Sie das Element als zweites Argument übergeben können:

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

Oder Sie nur das Element als $() Argument übergeben können und andere Methoden verwenden:

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