Tuesday, April 23, 2013

Jasmine spying on jQuery selectors

Quick blog post about how to spy for jQuery selectors. Say I want to write something like the following:
var $element = $('div.my-element');
How would you write a Jasmine specification to drive this line of code in a Backbone.View function? Here it is:
it("find the element using a jQuery selector", function() {
   var spy = spyOn(jQuery.fn, 'find');
   this.view.doSomething();
   expect(spy).toHaveBeenCalledWith('div.my-element');
});
The reason you can do this is that $(selector, context) becomes $(context).find(selector). By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function (from http://api.jquery.com/jQuery/#jQuery1). Had to write this down in a blog so I remember it again some day. Cheers!