backbone testing

© 2013. All rights reservedCRASHLYTICS CONFIDENTIAL

Reinforcing your Backbone.js app with tests

1

Mark RoseboomCrashlytics


Tests are for real engineers...

3

I work on the front end,I don’t need tests.


Testing matters for front end

4

‣ Maintain structure and reliability‣ Insulate from 3rd parties‣ Minimize team development concerns‣ Spot-check poorly written code


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


Unit tests for Backbone.js

6

©2013. All rights reservedCRASHLYTICS CONFIDENTIAL

What is Jasmine?

7

© 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', ->


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()


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'


Tailoring Jasmine for Backbone.js

11


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'


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'


Start testing your app

14


Backbone View - Todo MVC

15



16



17


What’s next...

18

Feature and integration testsContinuous integration


Bigger picture

19


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

(we’re hiring)


Thank You

21

Mark RoseboomCrashlytics

backbone testing

Technology