AngularJS - Unit Test Directive with jquery function -

AngularJS - Unit Test Directive with jquery function -

i have directive looks this:

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

i tried unit test this:

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

when run directive normally, output newdirective content:abc. when run unit test, log output newdirective content:undefined.

how can jquery function work in unit test?

i suggest (if have control) don't utilize jquery html within

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

and instead utilize jqlite search dom.

testapp.directive('newdirective', ['$compile', function($compile){ homecoming { link: function(scope, element, attr, controller) { console.log("newdirective content:"+element.find('#sub').html()); } }; }]);

you may wish re-factor spec compilation of html takes place outside function - 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 div tag", function() { expect(element.find('div').length).toequal(1); }); });

jquery angularjs unit-testing jasmine karma-jasmine