backbone testing
DESCRIPTION
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.TRANSCRIPT
![Page 1: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/1.jpg)
© 2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Reinforcing your Backbone.js app with tests
1
Mark RoseboomCrashlytics
![Page 2: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/2.jpg)
![Page 3: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/3.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Tests are for real engineers...
3
I work on the front end,I don’t need tests.
![Page 4: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/4.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Testing matters for front end
4
‣ Maintain structure and reliability‣ Insulate from 3rd parties‣ Minimize team development concerns‣ Spot-check poorly written code
![Page 5: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/5.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Lets break it down
5
Unit Integration Feature
Fast Env Speci!c Clear De!nitions
Easy to Debug
Isolated
System Interactions
Slow
Hard to Debug
UserFocused
Pros
Cons
![Page 6: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/6.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Unit tests for Backbone.js
6
![Page 7: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/7.jpg)
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
What is Jasmine?
7
![Page 8: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/8.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL8
Standalone unit testing library
‣ Matchers - Boolean Comparison
describe 'test suite', ->
describe 'nested suite', ->
‣ Specs - Assert expectations
‣ Suites - Describe behavior
it 'has a spec, with an expectation', ->
foo = bar : 'bar', baz : null expect(foo).not.toEqual 'qux'expect(foo.bar).toBeDefined()expect(foo.baz).toBeNull()
expect(true).toBe true
it 'has many matchers', ->
![Page 9: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/9.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL9
Stubbing and mocking methods
describe 'spies', ->
it 'can stub existing object methods', ->foo = bar : (value) -> console.log valuespyOn 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()
![Page 10: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/10.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL10
Controlling spy behavior
describe 'spy behavior', ->beforeEach -> @foo = bar : (value) -> valuebeforeEach -> 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 [email protected] 'a value'# console output: 'a value'
![Page 11: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/11.jpg)
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Tailoring Jasmine for Backbone.js
11
![Page 12: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/12.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Jasmine-given
12
Text
describe 'spy behavior', ->
Given -> @foo = bar : (value) -> valueGiven -> spyOn(@foo, 'bar').andCallThrough()When -> @result = @foo.bar 'a value'Then -> expect(@foo.bar).toHaveBeenCalled()Then -> expect(@result).toEqual 'a value'
describe 'spy behavior', ->beforeEach -> @foo = bar : (value) -> valuebeforeEach -> 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'
![Page 13: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/13.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Jasmine-jQuery
13
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'
class Profile extends Backbone.Viewid : 'profile'
showEmail : -> @$el.addClass 'show'
![Page 14: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/14.jpg)
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Start testing your app
14
![Page 15: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/15.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone View - Todo MVC
15
![Page 16: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/16.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone View - Todo MVC
16
![Page 17: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/17.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone View - Todo MVC
17
![Page 18: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/18.jpg)
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
What’s next...
18
![Page 19: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/19.jpg)
Feature and integration testsContinuous integration
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Bigger picture
19
![Page 20: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/20.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
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
![Page 21: Backbone testing](https://reader031.vdocuments.site/reader031/viewer/2022020217/554a1214b4c905825d8b4b5f/html5/thumbnails/21.jpg)
(we’re hiring)
© 2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Thank You
21
Mark RoseboomCrashlytics