Backbone.js gives you all the tools needed to build applications of all sizes. But one component of Backbone development commonly overlooked is testing. How to unit test with Jasmine and utilize them for your Backbone application is covered in these slides.

1. Reinforcing your Backbone.js app
with tests
Mark Roseboom
Crashlytics
1 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved

3. Tests are for real engineers...
I work on the front end,
I don’t need tests.
3 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

4. Testing matters for front end
‣ Maintain structure and reliability
‣ Insulate from 3rd parties
‣ Minimize team development concerns
‣ Spot-check poorly written code
4 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

5. Lets break it down
Unit Integration Feature
Clear
Fast Env Specific
Definitions
Pros
Easy to System User
Debug Interactions Focused
Isolated Slow
Cons
Hard to
Debug
5 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

6. Unit tests for Backbone.js
6 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

7. What is Jasmine?
7 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved

8. Standalone unit testing library
‣ Suites - Describe behavior
‣ Specs - Assert expectations
‣ Matchers - Boolean Comparison
describe 'test suite', ->
it 'has a spec, with an expectation', -> expect(true).toBe true
describe 'nested suite', ->
it 'has many matchers', ->
foo = bar : 'bar', baz : null
expect(foo).not.toEqual 'qux'
expect(foo.bar).toBeDefined()
expect(foo.baz).toBeNull()
8 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

9. Stubbing and mocking methods
describe 'spies', ->
it 'can stub existing object methods', ->
foo = bar : (value) -> console.log value
spyOn foo, 'bar'
foo.bar 'a value'
expect(foo.bar).toHaveBeenCalled()
describe 'mocking new methods', ->
it 'can create new spies', ->
spy = jasmine.createSpy 'spy'
spy 'an argument'
expect(spy).toHaveBeenCalledWith 'an argument'
it 'can create a mock with multiple spies', ->
spyObj = jasmine.createSpyObj 'spyObj', ['method']
spyObj.method()
expect(spyObj.method).toHaveBeenCalled()
9 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

10. Controlling spy behavior
describe 'spy behavior', ->
beforeEach -> @foo = bar : (value) -> value
beforeEach -> spyOn @foo, 'bar'
it 'can delegate the actual implementation', ->
@foo.bar.andCallThrough()
result = @foo.bar 'a value'
expect(@foo.bar).toHaveBeenCalled()
expect(result).toEqual 'a value'
it 'can return a specified value', ->
@foo.bar.andReturn 'another value'
result = @foo.bar 'a value'
expect(result).toEqual 'another value'
it 'can delegate to a callback', ->
@foo.bar.andCallFake console.log
@foo.bar 'a value'
# console output: 'a value'
10 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

11. Tailoring Jasmine for Backbone.js
11 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved

12. Jasmine-given
describe 'spy behavior', ->
beforeEach -> @foo = bar : (value) -> value
beforeEach -> spyOn @foo, 'bar'
it 'can delegate the actual implementation', ->
@foo.bar.andCallThrough()
result = @foo.bar 'a value'
expect(@foo.bar).toHaveBeenCalled()
expect(result).toEqual 'a value'
Text
describe 'spy behavior', ->
Given -> @foo = bar : (value) -> value
Given -> spyOn(@foo, 'bar').andCallThrough()
When -> @result = @foo.bar 'a value'
Then -> expect(@foo.bar).toHaveBeenCalled()
Then -> expect(@result).toEqual 'a value'
12 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

13. Jasmine-jQuery
class Profile extends Backbone.View
id : 'profile'
showEmail : -> @$el.addClass 'show'
describe 'showEmail', ->
Given -> @view = new Profile()
When -> @view.showEmail()
Then -> expect(@view.$el.hasClass 'show').toBe true
describe 'showEmail', ->
Given -> @view = new Profile()
When -> @view.showEmail()
Then -> expect(@view.$el).hasClass 'show'
13 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

14. Start testing your app
14 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved

15. Backbone View - Todo MVC
15 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

16. Backbone View - Todo MVC
16 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

17. Backbone View - Todo MVC
17 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

18. What’s next...
18 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved

19. Bigger picture
Feature and integration tests
Continuous integration
19 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

20. Resources
‣ Jasmine - http://pivotal.github.com/jasmine/
‣ Jasmine-Given - https://github.com/searls/jasmine-given
‣ Jasmine-jQuery - https://github.com/velesin/jasmine-jquery
‣ Jasmine-Stealth - https://github.com/searls/jasmine-stealth
20 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

21. Thank You
(we’re hiring)
Mark Roseboom
Crashlytics
21 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved