Backbone.js view tests using Sinon Spies in a browser - javascript

I'm writing a test for a Backbone View to test that the render function is being called after fetching the model. The test is:
beforeEach(function () {
$('body').append('<div class="sidebar"></div>');
profileView = new ProfileView();
});
it('should call the render function after the model has been fetched', function (done) {
profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'});
var spy = sinon.spy(profileView, 'render');
profileView.model.fetch({
success: function () {
sinon.assert.called(spy);
done();
}
});
});
I'm using Sinon Spies to attach a spy object to the render function of the profileView view object.
The view is:
var ProfileView = Backbone.View.extend({
el: '.sidebar'
, template: Hogan.compile(ProfileTemplate)
, model: new UserModel()
, initialize: function () {
this.model.bind('change', this.render, this);
this.model.fetch();
}
, render: function () {
$(this.el).html(this.template.render());
console.log("Profile Rendered");
return this;
}
});
After the fetch is called in the test, the change event is firing and the view's render function is getting called, but the Sinon Spy isn't detecting that render is being called and fails.
As an experiment, I tried calling the render function in the test to see if the Spy identified it:
it('should call the render function after the model has been fetched', function (done) {
profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'});
var spy = sinon.spy(profileView, 'render');
profileView.render();
profileView.model.fetch({
success: function () {
sinon.assert.called(spy);
done();
}
});
});
The Spy detected the called was made in the case above.
Does anyone know why the Spy isn't identifying the render call in my initial test?

The problem is that during construction of the view, the initialize function binds an event directly to the render function. You cannot intercept this event with a spy because the binding has already happened before you setup your spy (which you do after construction).
The solution is to spy on the prototype before you construct the view. So you will have to move the spy into the beforeEach, or move construction of the view into the test.
To setup the spy:
this.renderSpy = sinon.spy(ProfileView.prototype, 'render');
this.view = new ProfileView();
Then later, to remove the spy:
ProfileView.prototype.render.restore()
This will then spy on 'ordinary' calls to render, as well as the change event from the model.

Just 3 guesses:
You are supposing that the fetch({ success }) callback is being called after the Model has been updated and the Model event triggered.. and maybe is not like this. Solution: try to play debugging around here.
Maybe the fetch call is not success so the success callback is not called. Solution: try to add an error callback to the fetch to see if is there where we are sended.
The Model.validate responses false, what is not very probable if you have not implemented it.
(I bet for the 2.)

This worked for me, though the spy is used in the collection:
var thatzzz = this;
this.hcns.fetch({
success: function(){
expect( thatzzz.hcnsFetchSpy ).toHaveBeenCalled();
}
});
spy was defined on beforeEach

Related

Testing event handler on an object with Jasmine

I have a class like:
MyClass = function() {
var view = {
delegateEvents: function () {
this.$el.on('click', 'input[type="radio"]', this.toggleServices);
},
toggleServices: function () {
…
},
render: function () {
blah-blah-blag (rendering the view)…
this.delegateEvents();
}
};
view.init();
return view;
}
(how I am getting $el is beyond the scope of the question, but be sure it works)
I am testing an instance of this class in Jasmine like:
it('it handles clicks on radio buttons', function () {
var view = new MyClass();
view.render();
spyOn(view, 'toggleServices');
view.$('input[type="radio"]').eq(0).click();
expect(view.toggleServices).toHaveBeenCalled();
});
The problem is now that in the test, the spy is not being called, but the code goes into original toggleServices() of the class instead of being a spy. Seems like I don't understand how to create a spy that would cought requests to this.toggleServices in init().
Any suggestions?
You should spy before setup the listeners, in other words, just spy before call render.
it('it handles clicks on radio buttons', function () {
var view = new MyClass();
spyOn(view, 'toggleServices');
view.render();
view.$('input[type="radio"]').eq(0).click();
expect(view.toggleServices).toHaveBeenCalled();
});

Backbone.js, cannot set context on a callback

Ok, so I am working on a method to override the fetch method on a model. I want to be able to pass it a list of URL's and have it do a fetch on each one, apply some processing to the results, then update its own attributes when they have all completed. Here's the basic design:
A Parent "wrapper" Model called AllVenues has a custom fetch function which reads a list of URL's it is given when it is instantiated
For each URL, it creates a Child Model and calls fetch on it specifying that URL as well as a success callback.
The AllVenues instance also has a property progress which it needs to update inside the success callback, so that it will know when all Child fetch's are complete.
And that's the part I'm having problems with. When the Child Model fetch completes, the success callback has no context of the Parent Model which originally called it. I've kind of hacked it because I have access to the Module and have stored the Parent Model in a variable, but this doesn't seem right to me. The Parent Model executed the Child's fetch so it should be able to pass the context along somehow. I don't want to hardcode the reference in there.
TL;DR
Here's my jsFiddle illustrating the problem. The interesting part starts on line 13. http://jsfiddle.net/tonicboy/64XpZ/5/
The full code:
// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({
"mainRegion": "#main"
});
App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {
var MainView = Marionette.ItemView.extend({
template: "#sample-template"
});
var AllVenues = Backbone.Model.extend({
progress: 0,
join: function (model) {
this.progress++;
// do some processing of each model
if (this.progress === this.urls.length) this.finish();
},
finish: function() {
// do something when all models have completed
this.progress = 0;
console.log("FINISHED!");
},
fetch: function() {
successCallback = function(model) {
console.log("Returning from the fetch for a model");
Mod.controller.model.join(model);
};
_.bind(successCallback, this);
$.each(this.urls, function(key, val) {
var venue = new Backbone.Model();
venue.url = val;
venue.fetch({
success: successCallback
});
});
}
});
var Venue = Backbone.Model.extend({
toJSON: function () {
return _.clone(this.attributes.response);
}
});
var Controller = Marionette.Controller.extend({
initialize: function (options) {
this.region = options.region;
this.model = options.model;
this.listenTo(this.model, 'change', this.renderRegion);
},
show: function () {
this.model.fetch();
},
renderRegion: function () {
var view = new MainView({
model: this.model
});
this.region.show(view);
}
});
Mod.addInitializer(function () {
var allVenues = new AllVenues();
allVenues.urls = [
'https://api.foursquare.com/v2/venues/4a27485af964a52071911fe3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130811',
'https://api.foursquare.com/v2/venues/4afc4d3bf964a520512122e3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130811',
'https://api.foursquare.com/v2/venues/49cfde17f964a520d85a1fe3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130811'
];
Mod.controller = new Controller({
region: App.mainRegion,
model: allVenues
});
Mod.controller.show();
});
});
App.start();
I think you're misunderstanding how _.bind works. _.bind returns the bound function, it doesn't modify it in place. In truth, the documentation could be a bit clearer on this.
So this:
_.bind(successCallback, this);
is pointless as you're ignoring the bound function that _.bind is returning. I think you want to say this:
var successCallback = _.bind(function(model) {
console.log("Returning from the fetch for a model");
Mod.controller.model.join(model);
}, this);
Also note that I added a missing var, presumably you don't want successCallback to be global.

Testing Backbone Events set up in the initialize function

I'm trying to set up my collection to listen to events triggered on models within the collection, like so:
var Collection = Backbone.Collection.extend({
initialize: function() {
this.on('playback:completed', this.playNext);
},
playNext : function() { }
});
In my tests, I add new Backbone.Models into an instance of the collection, and then trigger playback:completed on them... and playNext isn't called. How do I set this up correctly?
EDIT: adding test code (uses Jasmine):
var collection;
describe('Collection', function() {
beforeEach(function() {
collection = new Collection();
});
it('should playNext when playback:completed is triggered', function() {
var model1 = new Backbone.Model();
var model2 = new Backbone.Model();
var spy = spyOn(collection, 'playNext').andCallThrough();
collection.add(model1);
collection.add(model2);
model1.trigger('playback:completed');
expect(spy).toHaveBeenCalled();
});
});
The problem here is that backbone's .on wraps the callback as a clone or something like it. Since the spy is set up after Collection.initialize runs, the callback that's been wrapped is the function before setting the spy, it's never triggered.
The solution I settled on was to pull the event bindings into a bindEvents function, like so:
var Collection = Backbone.Collection.extend({
initialize: function() {
this.bindEvents();
},
bindEvents : function() {
this.on('playback:completed', this.playNext);
},
playNext : function() { }
});
Then, in my test (and after the spy is set), I ran collection.off(); collection.bindEvents();, which re-binds them with the spied versions.

Stubbing e.preventDefault() in a jasmine test

I recently added an e.preventDefault() to one of my javascript functions and it broke my jasmine spec. I've tried spyOn(e, 'preventDefault').andReturn(true); but I get e is undefined error. How do I stub e.preventDefault()?
showTopic: function(e) {
e.preventDefault();
midParent.prototype.showTopic.call(this, this.model, popup);
this.topic.render();
}
it("calls the parent", function() {
var parentSpy = spyOn(midParent.prototype, "showTopic");
this.view.topic = {
render: function() {}
};
this.view.showTopic();
expect(parentSpy).toHaveBeenCalled();
});
Another way to create mock object (with spies you need) is to use jasmine.createSpyObj().
Array containing spy names have to be passed as second parameter.
var e = jasmine.createSpyObj('e', [ 'preventDefault' ]);
this.view.showTopic(e);
expect(e.preventDefault).toHaveBeenCalled();
You have to pass an object with a field preventDefault that holds your spy:
var event = {preventDefault: jasmine.createSpy()}
this.view.showTopic(event);
expect(event.preventDefault).toHaveBeenCalled
don't know this approach is correct or not but works for me, feel free to tell if it is not a good approach
step1:create a eventStub with the function for prevent default
const eventStub = {
preventDeafult() {}
}
step2: write the 'it' Block:
it('should preventDefault when dragover event occurs', () => {
// step 3 goes here
// step 4 goes here
// step 5 goes here
});
step3:create spy for prevent default:
const spy = spyOn(eventStub, 'preventDefault');
step4:trigger the event let's say dragover and pass the eventStub
component.triggerEventHandler('dragover', eventStub)
step5:write the assertion
expect(spy).tohaveBeenCalled()
Note: "component" in step 4 is the instance of component we get from fixture
Example to get component instance from fixture:
let fixture = TestBed.createComponent(<your Component's Class Name>);
let component = fixture.componentInstance;
try and let me know if it works for you thanks you,,,, Happyyy coding :-) !!!!!
This is very similar to approaches on top. I just mocked out the event and passed preventDefault with an sinon spy. The difference was that I had to identify the type which was a click on my test.
var e = {
type: 'click',
preventDefault: sinon.spy()
};

Sinon does not seem to spy for an event handler callback

I'm testing a backbone view with Jasmin, Simon and jasmin-simon.
Here is the code:
var MessageContainerView = Backbone.View.extend({
id: 'messages',
initialize: function() {
this.collection.bind('add', this.addMessage, this);
},
render: function( event ) {
this.collection.each(this.addMessage);
return this;
},
addMessage: function( message ) {
console.log('addMessage called', message);
var view = new MessageView({model: message});
$('#' + this.id).append(view.render().el);
}
});
Actually, all my tests pass but one. I would like to check that addMessage is called whenever I add an item to this.collection.
describe('Message Container tests', function(){
beforeEach(function(){
this.messageView = new Backbone.View;
this.messageViewStub = sinon.stub(window, 'MessageView').returns(this.messageView);
this.message1 = new Backbone.Model({message: 'message1', type:'error'});
this.message2 = new Backbone.Model({message: 'message2', type:'success'});
this.messages = new Backbone.Collection([
this.message1, this.message2
]);
this.view = new MessageContainerView({ collection: this.messages });
this.view.render();
this.eventSpy = sinon.spy(this.view, 'addMessage');
this.renderSpy = sinon.spy(this.messageView, 'render');
setFixtures('<div id="messages"></div>');
});
afterEach(function(){
this.messageViewStub.restore();
this.eventSpy.restore();
});
it('check addMessage call', function(){
var message = new Backbone.Model({message: 'newmessage', type:'success'});
this.messages.add(message);
// TODO: this fails not being called at all
expect(this.view.addMessage).toHaveBeenCalledOnce();
// TODO: this fails similarly
expect(this.view.addMessage).toHaveBeenCalledWith(message, 'Expected to have been called with `message`');
// these pass
expect(this.messageView.render).toHaveBeenCalledOnce();
expect($('#messages').children().length).toEqual(1);
});
});
As you can see addMessage is called indeed. (It logs to the console and it calls this.messageView as it should. What do I miss in spying for addMessage calls?
thanks, Viktor
I'm not quit sure but, as I understand it, the following happens:
You create a new view which calls the initialize function and bind your view.addMessage to your collection.
Doing this, Backbone take the function and store it in the event store of your collection.
Then you spy on view.addMessage which means you overwrite it with a spy function. Doing this will have no effect on the function that is stored in the collection event store.
So their are some problems with your test. You view has a lot of dependencies that you not mock out. You create a bunch of additional Backbone Models and Collections, which means you not test only your view but also Backbones Collection and Model functionality.
You should not test that collection.bind will work, but that you have called bind on the collection with the parameters 'add', this.addMessage, this
initialize: function() {
//you dont
this.collection.bind('add', this.addMessage, this);
},
So, its easy to mock the collection:
var messages = {bind:function(){}, each:function(){}}
spyOn(messages, 'bind');
spyOn(messages, 'each');
this.view = new MessageContainerView({ collection: messages });
expect(message.bind).toHaveBeenCalledWith('bind', this.view.addMessage, this.view);
this.view.render()
expect(message.each).toHaveBeenCalledWith(this.view.addMessage);
... and so on
Doing it this way you test only your code and have not dependencies to Backbone.
As Andreas said in point 3:
Then you spy on view.addMessage which means you overwrite it with a spy function. Doing this will have no effect on the function that is stored in the collection event store.
The direct answer to the question, disregarding all the awesome refactoring Andreas suggested, would be to spy on MessageContainerView.prototype.addMessage like so:
describe('Message Container tests', function(){
beforeEach(function(){
this.messageView = new Backbone.View;
this.messageViewStub = sinon.stub(window, 'MessageView').returns(this.messageView);
this.message1 = new Backbone.Model({message: 'message1', type:'error'});
this.message2 = new Backbone.Model({message: 'message2', type:'success'});
this.messages = new Backbone.Collection([
this.message1, this.message2
]);
// Here
this.addMessageSpy = sinon.spy(MessageContainerView.prototype, 'addMessage');
this.view = new MessageContainerView({ collection: this.messages });
this.view.render();
this.eventSpy = sinon.spy(this.view, 'addMessage');
this.renderSpy = sinon.spy(this.messageView, 'render');
setFixtures('<div id="messages"></div>');
});
afterEach(function(){
this.messageViewStub.restore();
MessageContainerView.prototype.addMessage.restore();
});
it('check addMessage call', function(){
var message = new Backbone.Model({message: 'newmessage', type:'success'});
this.messages.add(message);
// TODO: this fails not being called at all
expect(this.addMessageSpy).toHaveBeenCalledOnce();
// TODO: this fails similarly
expect(this.addMessageSpy).toHaveBeenCalledWith(message, 'Expected to have been called with `message`');
// these pass
expect(this.messageView.render).toHaveBeenCalledOnce();
expect($('#messages').children().length).toEqual(1);
});
});
Regardless, I do recommend implementing Andreas' suggestions. :)

Categories