AngularJs / Using jquery selector in a jasmine test does not work

Question

Suppose a jasmine test exposing this code in the beforeEach block:

//....
element = $compile('<input class="form-control" class="email" name="email" id="email" type="email" ng-model="user.email" />')($rootScope);
$rootScope.$digest();
//.....

In some test, I put a simple:

console.log($('#email').name);

expecting thus the output of the value: email.

However, I get an undefined.

So my question is: Is jquery compatible by default (without jasmine-jquery plugin or anything else)? Of course, in my karma configuration, jquery is loaded before angularjs.

Of course, passing by the traditional element.find(...) works well (although does only work with tagnames) , but I would like to use Jquery selector instead.

tasseKATT · Accepted Answer · 2013-11-27 11:46:47Z

5

The jQuery id selector uses document.getElementById(). Your compiled element is not part of the DOM, which is why console.log($('#email').name); gives undefined.

If you have a single element like in your example you simple need to do this:

console.log(element.attr('name'));

And as long as you have jQuery loaded before AngularJS find will work with more than tag names. So if you have a nested element:

var nestedElement = $compile('<div><input class="form-control" class="email" name="email" id="email" type="email" ng-model="user.email" /></div>')($scope);

You can:

console.log(nestedElement.find('#email').attr('name'));

Working example: http://plnkr.co/edit/KRmoWRq8efvb4QhwDXAX?p=preview

answered Nov 27, 2013 at 11:46

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

AngularJs / Using jquery selector in a jasmine test does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related