Backbone.js and Jasmine Spys not getting a call

Question

I am trying to verify that when an element is clicked, a function call is made. That would be simple enough, but I have to miss something stupid, because I cannot get this simple example to work.

Here is my look

(function($) { window.LaserMonitor = { Views: {} }; window.LaserMonitor.Views.WorkstationSummary = Backbone.View.extend({ tagName: 'li', className: 'StationItem', initialize: function() { _.bindAll(this, 'showDetails'); this.template = _.template($("#WorkstationSummary").html()); }, events: { 'click h3' : 'showDetails' }, showDetails: function() { }, render: function() { var renderedTmpl = this.template(this.model.toJSON()); $(this.el).append(renderedTmpl); return this; } }); })(jQuery); 

and here is my jasmine test:

 describe('WorkstationSummary Item', function() { beforeEach(function() { _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g }; loadFixtures('LaserMonitorFixture.html'); this.model = new Backbone.Model({ id: 1, name: 'D8', assigned: 1900, inProgress: 4, completed: 5 }); this.view = new window.LaserMonitor.Views.WorkstationSummary({model: this.model}); }); describe('Events', function() { beforeEach(function() { this.view.render(); }); it('should trigger click event', function() { this.header = this.view.$('h3'); spyOn(this.view, 'showDetails'); this.header.click(); expect(this.view.showDetails).toHaveBeenCalled(); }); }); }); 

The result of this run is:

Error: expected showDetails call spy. on the new (http: // localhost: 57708 / JobMgr2 / test-js / lib / jasmine-1.0.2 / jasmine.js: 102: 32) in [object Object] .toHaveBeenCalled (http: // localhost: 57708 / JobMgr2 /test-js/lib/jasmine-1.0.2/jasmine.js: 1171: 29) in the Object. (HTTP: // local: 57708 / JobMgr2 / test-JS / specs / LaserMonitorSpec.js: 33: 34) in [object Object] .execute (http: // localhost: 57708 / JobMgr2 / test-js / lib / jasmine -1.0.2 / jasmine.js: 1001: 15) in [object Object] .next_ (http: // localhost: 57708 / JobMgr2 / test-js / lib / jasmine-1.0.2 / jasmine.js: 1790: 31 ) at http: // localhost: 57708 / JobMgr2 / test-js / lib / jasmine-1.0.2 / jasmine.js: 1780: 18

EDIT: Add Instrument Template for completeness:

 <script type="text/template" id="WorkstationSummary"> <h3>{{ name }} ({{ assigned }}/{{ inProgress }}/{{ completed }})</h3> <ul> </ul> </script> 

Answer 1

If you create a spy for a method, while running the test, instead of calling the actual method called by spy. A spy is a wrapper around a method. But the problem here is that you created the view before you created the spy. Thus, the actual method gets a call instead of a spy. What you need to do is create a spy before creating the view object. I used sinon.js to spy on methods. And you should use the prototype of the view to search by the method of that view:

 var workStationSpy = sinon.spy(window.LaserMonitor.Views.WorkstationSummary.prototype, "showDetails"); this.view = new window.LaserMonitor.Views.WorkstationSummary({model: this.model}); this.view.render(); expect(workStationSpy).toHaveBeenCalled(); workStationSpy.restore(); 

Answer 2

I would change it to the following and try:

 it('should trigger click event', function() { var viewToTest = this.view; this.header = viewToTest.$('h3'); spyOn(viewToTest, 'showDetails'); this.header.click(); expect(viewToTest.showDetails).toHaveBeenCalled(); }); 

My concern about calling this.view may cause problems. Its a wild hunch that I have not tested, but I think it's worth a try. Good luck