Last active
August 29, 2015 14:21
-
-
Save schnogz/f5ea3c72ac51c6c58104 to your computer and use it in GitHub Desktop.
Spying on backbone.js view methods with Sinon.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define([ | |
| 'text!./Templates/mainTemplate.html', | |
| 'text!./Templates/messageTemplate.html' | |
| ], function ( | |
| maintemplate, | |
| messageTemplate | |
| ) { | |
| 'use strict'; | |
| return Backbone.View.extend({ | |
| // setup events | |
| events: { | |
| 'click #detailsButton': 'displayMessage' | |
| }, | |
| // compile templates | |
| mainTemplate: _.template(mainTemplate), | |
| messageTemplate: _.template(messageTemplate), | |
| //..... functions removed for brevity | |
| displayMessage: function (messageType, messageText) { | |
| var that = this; | |
| var $message = $(that.messageTemplate({ | |
| messageType: messageType, | |
| messageText: messageText | |
| })); | |
| $('.closeButton', $message).click(function () { | |
| $(this).closest('.infoBox').addClass('hide'); | |
| }); | |
| that.$('.infoBox').remove(); | |
| that.$('.content').append($message); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define([ | |
| "testWidget.js" | |
| ], function ( | |
| Widget | |
| ) { | |
| "use strict"; | |
| var sandbox, testWidgetView; | |
| module("TestWidget", { | |
| setup: function () { | |
| // create sinon sandbox | |
| sandbox = sinon.sandbox.create(); | |
| // draw widget | |
| testWidgetView = new Widget().render; | |
| }, | |
| teardown: function () { | |
| // cleanup sandbox | |
| sandbox.restore(); | |
| } | |
| }); | |
| test("widget displays message on click", function () { | |
| // Arrange | |
| var displayMessageSpy = sandbox.spy(testWidgetView, "displayMessage"); | |
| // Act | |
| testWidgetView.$('#detailsButton').trigger("click"); | |
| // Assert -- FAILS | |
| equal(displayMessageSpy.calledOnce, true, "displayMessage() was not called after click"); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define([ | |
| "testWidget.js" | |
| ], function ( | |
| Widget | |
| ) { | |
| "use strict"; | |
| var sandbox, testWidgetView; | |
| module("TestWidget", { | |
| setup: function () { | |
| // create sinon sandbox | |
| sandbox = sinon.sandbox.create(); | |
| // do not instanatiate view in setup | |
| }, | |
| teardown: function () { | |
| // cleanup sandbox | |
| sandbox.restore(); | |
| } | |
| }); | |
| test("widget displays message on click", function () { | |
| // Arrange | |
| // attach the spy to the prototype BEFORE instantiating the view | |
| var displayMessageSpy = sandbox.spy(testWidgetView.prototype, "displayMessage"); | |
| // instaniate view | |
| testWidgetView = new Widget().render; | |
| // Act | |
| testWidgetView.$('#detailsButton').trigger("click"); | |
| // Assert - PASSES | |
| equal(displayMessageSpy.calledOnce, true, "displayMessage() was not called after click"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment