Your SlideShare is downloading. ×
0
Reinforcing your Backbone.js app                with tests                Mark Roseboom                  Crashlytics1     ...
Tests are for real engineers...           I work on the front end,              I don’t need tests.3                 CRASH...
Testing matters for front end    ‣ Maintain structure and reliability    ‣ Insulate from 3rd parties    ‣ Minimize team de...
Lets break it down            Unit       Integration                          Feature                                     ...
Unit tests for Backbone.js6               CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
What is Jasmine?7       CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Standalone unit testing library          ‣   Suites - Describe behavior          ‣   Specs - Assert expectations          ...
Stubbing and mocking methods    describe spies, ->      it can stub existing object methods, ->        foo = bar : (value)...
Controlling spy behavior     describe spy behavior, ->      beforeEach -> @foo = bar : (value) -> value      beforeEach ->...
Tailoring Jasmine for Backbone.js11                CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Jasmine-given     describe spy behavior, ->       beforeEach -> @foo = bar : (value) -> value       beforeEach -> spyOn @f...
Jasmine-jQuery     class Profile extends Backbone.View       id : profile       showEmail : -> @$el.addClass show       de...
Start testing your app14          CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Backbone View - Todo MVC15             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Backbone View - Todo MVC16             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Backbone View - Todo MVC17             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
What’s next...18      CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Bigger picture         Feature and integration tests           Continuous integration19                 CRASHLYTICS CONFID...
Resources     ‣   Jasmine - http://pivotal.github.com/jasmine/     ‣   Jasmine-Given - https://github.com/searls/jasmine-g...
Thank You       (we’re hiring)              Mark Roseboom                Crashlytics21      CRASHLYTICS CONFIDENTIAL   © 2...
Backbone testing
Upcoming SlideShare
Loading in...5
×

Backbone testing

1,687

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 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,687
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Backbone testing"

  1. 1. Reinforcing your Backbone.js app with tests Mark Roseboom Crashlytics1 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved
  2. 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. 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. 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. 5. Unit tests for Backbone.js6 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  6. 6. What is Jasmine?7 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  7. 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. 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. 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. 10. Tailoring Jasmine for Backbone.js11 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  11. 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. 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. 13. Start testing your app14 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  14. 14. Backbone View - Todo MVC15 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  15. 15. Backbone View - Todo MVC16 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  16. 16. Backbone View - Todo MVC17 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  17. 17. What’s next...18 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  18. 18. Bigger picture Feature and integration tests Continuous integration19 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  19. 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. 20. Thank You (we’re hiring) Mark Roseboom Crashlytics21 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×