AngularJS - Unit Test Directive with jquery function

Question

I have a directive that looks like this:

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

I tried to do unit test with 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 I run the directive normally, I get the output newDirective Content:abc. But when I run unit test, I get log output newDirective Content:undefined.

How can I get jquery function to work in unit test?

Do anyone knows how to get this done? This is very important for me to continue with unit test. TQ. — user1995781
– user1995781, Commented Apr 9, 2015 at 1:53

user1995781 · Accepted Answer · 2015-04-13 15:07:12Z

8

If really want to use jQuery function in directive, this is how it can be done 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);

By adding element.appendTo(document.body);, you will get jQuery function work in unit test.

answered Apr 13, 2015 at 15:07

user1995781

19.5k45 gold badges140 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Rogers Over a year ago

Very clever. Nice job.

Nicholas Murray · Accepted Answer · 2015-04-13 14:35:17Z

I suggest that you (if you have control) that you don't use jQuery get the html within

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

and instead use jQlite to search the DOM.

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

You also may then wish to re-factor your spec so that the compilation of the html takes place outside the it 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 a div tag", function() {
        expect(element.find('div').length).toEqual(1);
    });

});

Kukic Vladimir · Accepted Answer · 2017-08-08 19:33:13Z

0

You can pass the element as the second argument:

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

Or you can just pass the element as the $() argument and use other methods:

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

edited Aug 8, 2017 at 19:33

Kukic Vladimir

1,0064 gold badges15 silver badges23 bronze badges

answered Aug 8, 2017 at 19:03

Rhino

465 bronze badges

Collectives™ on Stack Overflow

AngularJS - Unit Test Directive with jquery function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related