Backbone testing
-
Upload
crashlytics -
Category
Technology
-
view
1.595 -
download
2
description
Transcript of Backbone testing
© 2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Reinforcing your Backbone.js app with tests
1
Mark RoseboomCrashlytics
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Tests are for real engineers...
3
I work on the front end,I don’t need tests.
© 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
© 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
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
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', ->
© 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()
© 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'
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Tailoring Jasmine for Backbone.js
11
© 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'
© 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'
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Start testing your app
14
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone View - Todo MVC
15
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone View - Todo MVC
16
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone View - Todo MVC
17
©2013. All rights reservedCRASHLYTICS CONFIDENTIAL
What’s next...
18
Feature and integration testsContinuous integration
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Bigger picture
19
© 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
(we’re hiring)
© 2013. All rights reservedCRASHLYTICS CONFIDENTIAL
Thank You
21
Mark RoseboomCrashlytics