Testing Backbone
applications with Jasmine
Leon van der Grient
2014
You know you should
Why?
Confidence
What?
Unitsbehavior
When?
BeforeDuringAfter
How?
• qUnit

• SinonJS

• Mocha

• Jasmine
Behavior Driven Testing
"Users should be able to like a message"
Test suite
|
* Spec
|
	 	 * Expectations
describe("Users should be able to", function () {
// Your specs
});
describe("Users should be able to", function () {
it("like a message", function () {
var a = 1;
var b = 2;
var c = a + b;
...
Spies and mocks
spyOn($, "ajax");
$.ajax(arg);
!
expect($).toHaveBeenCalled();
expect($).toHaveBeenCalledWith(arg);
expect...
But there is more!
spyOn($, "ajax").and.callFake(function () {
// mock ajax call
var response = {
success: true,
data: {.....
Models
Collections
Views
Testing models
it("like a message", function () {
this.message.set({liked:false});
this.message.like();
expect(this.messag...
Testing views
it("like a message", function () {
this.message.set({liked:false});
this.view.likeMessage();
expect(this.mes...
Using mocks
spyOn($, "ajax").and.callFake(function () {
// mock ajax call
var response = {
success: true,
data: {...}
};
a...
Test for triggers
it("like a message", function () {
var spy = jasmine.createSpy();
this.view.listenTo(this.model, "change...
Test user interaction with jasmine-jquery plugin
it("follow a user", function () {
var followBtn = $('.follow-btn');
follo...
(too) many tests
toBeInDOM()
toBeVisible()
toHaveAttr()
toHaveClass()
toHaveText()
toHaveValue()
toBeChecked()
toBeDisable...
Results
Again, what?
• Methods

• The el property

• Events

• ...?
Testing Backbone applications with Jasmine
Testing Backbone applications with Jasmine
Upcoming SlideShare
Loading in …5
×

Testing Backbone applications with Jasmine

1,252 views

Published on

A (very) brief introduction to Jasmine and how to apply it to Backbone applications.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,252
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Testing Backbone applications with Jasmine

  1. 1. Testing Backbone applications with Jasmine Leon van der Grient 2014
  2. 2. You know you should
  3. 3. Why? Confidence
  4. 4. What? Unitsbehavior
  5. 5. When? BeforeDuringAfter
  6. 6. How? • qUnit • SinonJS • Mocha • Jasmine
  7. 7. Behavior Driven Testing "Users should be able to like a message"
  8. 8. Test suite | * Spec | * Expectations
  9. 9. describe("Users should be able to", function () { // Your specs });
  10. 10. describe("Users should be able to", function () { it("like a message", function () { var a = 1; var b = 2; var c = a + b; expect(c).toEqual(3); expect(c).not.toEqual(4); }); });
  11. 11. Spies and mocks spyOn($, "ajax"); $.ajax(arg); ! expect($).toHaveBeenCalled(); expect($).toHaveBeenCalledWith(arg); expect($.calls.count()).toEqual(1);
  12. 12. But there is more! spyOn($, "ajax").and.callFake(function () { // mock ajax call var response = { success: true, data: {...} }; arguments[0].success(response); });
  13. 13. Models Collections Views
  14. 14. Testing models it("like a message", function () { this.message.set({liked:false}); this.message.like(); expect(this.message.get('liked').toBeTruthy(); });
  15. 15. Testing views it("like a message", function () { this.message.set({liked:false}); this.view.likeMessage(); expect(this.message.get('liked').toBeTruthy(); });
  16. 16. Using mocks spyOn($, "ajax").and.callFake(function () { // mock ajax call var response = { success: true, data: {...} }; arguments[0].success(response); });
  17. 17. Test for triggers it("like a message", function () { var spy = jasmine.createSpy(); this.view.listenTo(this.model, "change", spy); this.view.likeMessage(); expect(spy).toHaveBeenCalled(); });
  18. 18. Test user interaction with jasmine-jquery plugin it("follow a user", function () { var followBtn = $('.follow-btn'); followBtn.click(); expect(followBtn).toHaveClass("unfollow"); });
  19. 19. (too) many tests toBeInDOM() toBeVisible() toHaveAttr() toHaveClass() toHaveText() toHaveValue() toBeChecked() toBeDisabled()
  20. 20. Results
  21. 21. Again, what? • Methods • The el property • Events • ...?

×