• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Backbone testing
 

Backbone testing

on

  • 1,677 views

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.

Statistics

Views

Total Views
1,677
Views on SlideShare
1,677
Embed Views
0

Actions

Likes
3
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Backbone testing Backbone testing Presentation Transcript

    • Reinforcing your Backbone.js app with tests Mark Roseboom Crashlytics1 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved
    • Tests are for real engineers... I work on the front end, I don’t need tests.3 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
    • 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
    • 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
    • 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 ‣ 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
    • 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
    • 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
    • Tailoring Jasmine for Backbone.js11 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
    • 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
    • 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
    • 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 CONFIDENTIAL © 2012. All rights reserved
    • 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
    • Thank You (we’re hiring) Mark Roseboom Crashlytics21 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved