Your SlideShare is downloading. ×
0
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Backbone testing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone testing

1,671

Published on

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 …

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.

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

No Downloads
Views
Total Views
1,671
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Reinforcing your Backbone.js app with tests Mark Roseboom Crashlytics1 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved
  • 2. Tests are for real engineers... I work on the front end, I don’t need tests.3 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 3. Testing matters for front end ‣ Maintain structure and reliability ‣ Insulate from 3rd parties ‣ Minimize team development concerns ‣ Spot-check poorly written code4 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 4. 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 Debug5 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 5. Unit tests for Backbone.js6 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 6. What is Jasmine?7 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 7. 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
  • 8. 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
  • 9. 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 value10 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 10. Tailoring Jasmine for Backbone.js11 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 11. 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 value12 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 12. 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 show13 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 13. Start testing your app14 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 14. Backbone View - Todo MVC15 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 15. Backbone View - Todo MVC16 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 16. Backbone View - Todo MVC17 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 17. What’s next...18 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 18. Bigger picture Feature and integration tests Continuous integration19 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 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-stealth20 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 20. Thank You (we’re hiring) Mark Roseboom Crashlytics21 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved

×