How can I stub a jQuery method with Sinon?

Question

I have the following code in an Ember View:

  postRender: ->
    @_super()
    @$().tooltipster({
      content: @$().data('tooltip')
      contentAsHTML: true
    })

I'm trying to test that tooltipster() is called when postRender() executes but I'm having some trouble spying on tooltipster() with Sinon. Here's my spec so far:

  describe 'postRender', ->
    it 'initializes tooltips', ->
      spy = sinon.spy(view.$(), 'tooltipster')
      view.postRender()
      spy.should.be.calledOnce
      view.$().tooltipster.restore()

But that complains that view.$() is undefined.

Any ideas on how to make this work?

Thanks!

score 1 · Accepted Answer · answered May 28 '14 at 00:29

I'm pretty sure you're supposed to send in a function, not the response of the function to sinon's spy.

spy = sinon.spy(view.$, 'tooltipster')

That being said, it's unlikely the $ method will be defined on the view not following the proper conventions. And you aren't really testing Ember's ability to set up the $ method, so you can set it all up on your own if needs be. Something like this:

var test = false;

view.$ = function(){
  return {
    data: function(attr){
      return 'something';
    },
    tooltipster: function(hash){
      test = true;
    }
  };
}
view.postRender();
assert(test, 'tooltipster should have been called, and test is true');

score 0 · Answer 2 · answered May 30 '14 at 17:44

The jQuery object gets methods like $().css() from the $.fn object. jQuery plugins like tooltipster are registered there, too. Spying on $.fn.tooltipster is what you want to do:

spy = sinon.spy view.$.fn, 'tooltipster'
view.postRender()
spy.should.be.calledOnce
spy.restore() # or view.$.fn.tooltipster.restore()

How can I stub a jQuery method with Sinon?

2 Answers2