The Unofficial, Official Ember Testing Guide

Presented at EmberConf 2014

Transcript

1. Ember Testing Guide
   The Unofficial
   #emberconf
   

   View Slide

2. I tweet at @cavneb @coderberry
   I blog at coderberry.me
   I commit to github.com/cavneb
   I work for Instructure
   I run the EmberSLC meetup
   My cat can eat a whole watermelon
   Eric Berry
   

   View Slide

3. @_mmun
   @codeofficer
   @mixonic
   @jgwhite
   @isaacezer
   @kkrajcev
   @JimDAlbano
   @bantic
   @terzicigor
   @blairbodnar
   @twukol
   @joefiorini
   @abuiles
   @workmanw @bezomaxo
   

   View Slide

4. "SJSA Grade Six - The Year I Rebelled" by Michael 1952
   BE GOOD
   

   View Slide

5. "SJSA Grade Six - The Year I Rebelled" by Michael 1952
   attrib: inspiredMonkey.com
   

   View Slide

6. View Slide

7. Ember
   Testing
   

   View Slide

8. View Slide

9. Happy Birthday
   

   View Slide

10. How to Test
    

    View Slide

11. Assertions
    

    View Slide

12. qunit
    

    View Slide

13. jsbin.com/suteg
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11!
    12!
    13
    module('group of tests', {!
    setup: function() {!
    // run before each test!
    },!
    teardown: function() {!
    // run after each test!
    }!
    });!
    !
    test('should be true', function() {!
    ok(true, 'should be true');!
    equal(1, 1, 'should equal');!
    });
    

    View Slide

14. qunit-basics.js
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11!
    12!
    13
    module('group of tests', {!
    setup: function() {!
    // run before each test!
    },!
    teardown: function() {!
    // run after each test!
    }!
    });!
    !
    test('should be true', function() {!
    ok(true, 'should be true');!
    equal(1, 1, 'should equal');!
    });
    callbacks
    

    View Slide

15. assertion inverse assertion
    equal() notEqual()
    deepEqual() notDeepEqual()
    propEqual() notPropEqual()
    strictEqual() notStrictEqual()
    ok()
    throws()
    http://api.qunitjs.com/category/assert/
    

    View Slide

16. View Slide

17. View Slide

18. “We're paving
    the QUnit
    happy path
    but not
    excluding
    others.”
    

    View Slide

19. Happy Path!
    

    View Slide

20. Assertions
    

    View Slide

21. Helpers
    

    View Slide

22. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    App.setupForTesting();!
    App.injectTestHelpers();!
    !
    test(‘welcome page', function() {!
    visit('/');!
    !
    andThen(function() {!
    equal(find('h2').text(), 'Welcome to Ember.js');!
    equal(find('ul li').length, 3);!
    });!
    });
    jsbin.com/suteg
    

    View Slide

23. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    App.setupForTesting();!
    App.injectTestHelpers();!
    !
    test(‘welcome page', function() {!
    visit('/');!
    !
    andThen(function() {!
    equal(find('h2').text(), 'Welcome to Ember.js');!
    equal(find('ul li').length, 3);!
    });!
    });
    jsbin.com/suteg
    

    View Slide

24. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    App.setupForTesting();!
    App.injectTestHelpers();!
    !
    test(‘welcome page', function() {!
    visit('/');!
    !
    andThen(function() {!
    equal(find('h2').text(), 'Welcome to Ember.js');!
    equal(find('ul li').length, 3);!
    });!
    });
    jsbin.com/suteg
    

    View Slide

25. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    App.setupForTesting();!
    App.injectTestHelpers();!
    !
    test(‘welcome page', function() {!
    visit('/');!
    !
    andThen(function() {!
    equal(find('h2').text(), 'Welcome to Ember.js');!
    equal(find('ul li').length, 3);!
    });!
    });
    jsbin.com/suteg
    

    View Slide

26. Ember.Test provides
    QUnit provides
    

    View Slide

27. Ember
    Testing
    

    View Slide

28. visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    

    View Slide

29. asynchronous
    visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    

    View Slide

30. synchronous
    visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    

    View Slide

31. wait helper
    visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    

    View Slide

32. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    test('add new post', function() {!
    visit('/posts/new');!
    fillIn('input.title', 'My new post');!
    click('button.submit');!
    !
    andThen(function() {!
    equal(find('ul.posts li:last').text(), !
    'My new post');!
    });!
    });
    jsbin.com/vusaz
    visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    

    View Slide

33. visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    test('add new post', function() {!
    visit('/posts/new');!
    fillIn('input.title', 'My new post');!
    click('button.submit');!
    !
    andThen(function() {!
    equal(find('ul.posts li:last').text(), !
    'My new post');!
    });!
    });
    jsbin.com/vusaz
    

    View Slide

34. visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    test('add new post', function() {!
    visit('/posts/new');!
    fillIn('input.title', 'My new post');!
    click('button.submit');!
    !
    andThen(function() {!
    equal(find('ul.posts li:last').text(), !
    'My new post');!
    });!
    });
    jsbin.com/vusaz
    

    View Slide

35. visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    test('add new post', function() {!
    visit('/posts/new');!
    fillIn('input.title', 'My new post');!
    click('button.submit');!
    !
    andThen(function() {!
    equal(find('ul.posts li:last').text(), !
    'My new post');!
    });!
    });
    jsbin.com/vusaz
    

    View Slide

36. visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    test('add new post', function() {!
    visit('/posts/new');!
    fillIn('input.title', 'My new post');!
    click('button.submit');!
    !
    andThen(function() {!
    equal(find('ul.posts li:last').text(), !
    'My new post');!
    });!
    });
    jsbin.com/vusaz
    

    View Slide

37. visit()
    fillIn()
    click()
    andThen()
    find()
    keyEvent()
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    test('add new post', function() {!
    visit('/posts/new');!
    fillIn('input.title', 'My new post');!
    click('button.submit');!
    !
    andThen(function() {!
    equal(find('ul.posts li:last').text(), !
    'My new post');!
    });!
    });
    jsbin.com/vusaz
    

    View Slide

38. TEAMWORK!
    TEAMWORK!
    

    View Slide

39. Custom Helpers
    

    View Slide

40. registerHelper(name, func, [options])
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10
    Ember.Test.registerHelper('currentURL', !
    function(app) {!
    return app.__container__.lookup('router:main')!
    .get('location')!
    .getURL()!
    }!
    );!
    !
    // runs instantly!
    equal(currentUrl(), '/posts/new');
    

    View Slide

41. registerAsyncHelper(name, func, [options])
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    Ember.Test.registerAsyncHelper('submitForm',!
    function(app, selector, context) {!
    var $el = findWithAssert(selector, context);!
    Ember.run(function() {!
    $el.submit();!
    });!
    }!
    );!
    !
    // usage!
    submitForm('.my-form');!
    

    View Slide

42. INJECT
    REMEMBER TO
    App.injectTestHelpers();
    CUSTOM HELPERS
    

    View Slide

43. is that it?
    

    View Slide

44. Ember 1.5
    

    View Slide

45. View Slide

46. More

    Helpers
    

    View Slide

47. triggerEvent()
    currentRouteName()
    currentPath()
    currentURL()
    Integration
    THE NEXT GENERATION
    Helpers
    

    View Slide

48. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11!
    12
    test('trigger events', function() {!
    !
    // simulate enter key!
    triggerEvent('#name', 'keypress', { keyCode: 13 });!
    !
    // blur element!
    triggerEvent('#search', 'blur');!
    !
    // double-click element!
    triggerEvent('.post-5', 'dblclick');

    !
    });!
    !
    triggerEvent(selector, type, [options])
    

    View Slide

49. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9
    test('root path goes to posts.index', function() {!
    visit('/');!
    andThen(function() {!
    !
    // assert we made it to the correct route!
    equal(currentRouteName(), 'posts.index');!
    !
    });!
    });!
    currentRouteName()
    App.__container__.lookup(‘controllers:application’).get(’currentRouteName’)
    

    View Slide

50. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9
    test('redirect occurred', function() {!
    visit('/posts/new');!
    andThen(function() {!
    !
    // assert we made it to the correct route!
    equal(currentPath(), 'posts.new');!
    !
    });!
    });!
    currentPath()
    App.__container__.lookup(‘controllers:application’).get(’currentPath’)
    

    View Slide

51. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9
    test('redirect occurred', function() {!
    visit('/posts/new');!
    andThen(function() {!
    !
    // assert we made it to the correct route!
    equal(currentURL(), '/posts/new');!
    !
    });!
    });!
    currentURL()
    App.__container__.lookup(‘router:main’).get(’location’).getURL()
    

    View Slide

52. Who are you tryin' to get crazy with, ese?
    Don't you know we need more???
    

    View Slide

53. “integration tests prove 

    your communication,
    unit tests prove your code”
    - Julian Simioni (@juliansimioni)
    

    View Slide

54. “integration tests prove 

    your communication,
    unit tests prove your code”
    - Julian Simioni (@juliansimioni)
    

    View Slide

55. Scenario 1: A list of posts should be filterable by title
    Given there are 3 posts
    When I visit ‘/posts’
    And enter filter text which matches 1 post
    Then I should see 1 post
    

    View Slide

56. BDD
    

    View Slide

57. integration
    

    View Slide

58. Scenario 1: A list of posts should be filterable by title
    Given there are 3 posts
    When I visit ‘/posts’
    And enter filter text which matches 1 post
    Then I should see 1 post
    

    View Slide

59. jsbin.com/cahuc
    1!
    2!
    3!
    4!
    5!
    6!
    7
    test("filters posts by title", function() {!
    visit("/posts");!
    fillIn(".search", "auth");!
    andThen(function() {!
    equal(find(".post-title").length, 1);!
    })!
    });!
    

    View Slide

60. jsbin.com/cahuc
    1!
    2!
    3!
    4!
    5!
    6!
    7
    test("filters posts by title", function() {!
    visit("/posts");!
    fillIn(".search", "auth");!
    andThen(function() {!
    equal(find(".post-title").length, 1);!
    })!
    });!
    1!
    2!
    3!
    4!
    5!
    6!
    7
    test("filters users by name", function() {!
    visit("/users");!
    fillIn(".search", “Bob Hanson");!
    andThen(function() {!
    equal(find(".user-name").length, 1);!
    })!
    });!
    

    View Slide

61. 1!
    2!
    3!
    4!
    5
    App.PostsController = Ember.ArrayController.extend(!
    App.FilterableArrayMixin, {!
    !
    filterField: 'title'!
    });!
    1!
    2!
    3!
    4!
    5
    App.UsersController = Ember.ArrayController.extend(!
    App.FilterableArrayMixin, {!
    !
    filterField: 'name'!
    });!
    jsbin.com/cahuc
    

    View Slide

62. 1!
    2!
    3!
    4!
    5
    App.PostsController = Ember.ArrayController.extend(!
    App.FilterableArrayMixin, {!
    !
    filterField: 'title'!
    });!
    1!
    2!
    3!
    4!
    5
    App.UsersController = Ember.ArrayController.extend(!
    App.FilterableArrayMixin, {!
    !
    filterField: 'name'!
    });!
    jsbin.com/cahuc
    

    View Slide

63. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11!
    12!
    13!
    14!
    15
    App.FilterableArrayMixin = Ember.Mixin.create({!
    filterText: null,!
    !
    filteredContent: function() {!
    var filterText = this.getWithDefault('filterText', '');!
    if (Em.isEmpty(filterText)) {!
    return this.get('content');!
    } else {!
    return this.get('content').filter(function(item) {!
    var str = item.get(this.get('filterField')).toLowerCase();!
    return str.match(filterText.toLowerCase());!
    }.bind(this));!
    }!
    }.property('content', 'filterText')!
    });!
    jsbin.com/cahuc
    

    View Slide

64. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11!
    12!
    13!
    14!
    15
    App.FilterableArrayMixin = Ember.Mixin.create({!
    filterText: null,!
    !
    filteredContent: function() {!
    var filterText = this.getWithDefault('filterText', '');!
    if (Em.isEmpty(filterText)) {!
    return this.get('content');!
    } else {!
    return this.get('content').filter(function(item) {!
    var str = item.get(this.get('filterField')).toLowerCase();!
    return str.match(filterText.toLowerCase());!
    }.bind(this));!
    }!
    }.property('content', 'filterText')!
    });!
    jsbin.com/cahuc
    

    View Slide

65. 1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11!
    12!
    13!
    14!
    15
    App.FilterableArrayMixin = Ember.Mixin.create({!
    filterText: null,!
    !
    filteredContent: function() {!
    var filterText = this.getWithDefault('filterText', '');!
    if (Em.isEmpty(filterText)) {!
    return this.get('content');!
    } else {!
    return this.get('content').filter(function(item) {!
    var str = item.get(this.get('filterField')).toLowerCase();!
    return str.match(filterText.toLowerCase());!
    }.bind(this));!
    }!
    }.property('content', 'filterText')!
    });!
    ISOLATED? jsbin.com/cahuc
    

    View Slide

66. unit
    

    View Slide

67. “integration tests prove 

    your communication,
    unit tests prove your code”
    - Julian Simioni (@juliansimioni)
    

    View Slide

68. IT’S NOT FUN
    

    View Slide

69. View Slide

70. Templates
    Views
    Controllers
    Routes
    Models
    Core
    

    View Slide

71. Container
    

    View Slide

72. RESOLVER
    THE
    

    View Slide

73. Test
    

    View Slide

74. View Slide

75. View Slide

76. Ember-QUnit
    github.com/rpflorence/ember-qunit
    

    View Slide

77. no more everything
    

    View Slide

78. inspired by rspec
    

    View Slide

79. packaged for
    CommonJS
    AMD
    Named AMD
    Globals
    

    View Slide

80. View Slide

81. setup
    

    View Slide

82. globals-unit-test-setup.js
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8
    // inject test helpers onto window!
    emq.globalize();!
    !
    // create a custom test resolver!
    App.Resolver = Ember.DefaultResolver.extend({ namespace: App });!
    !
    // set the test resolver!
    setResolver(App.Resolver.create());!
    Globals
    

    View Slide

83. globals-unit-test-setup.js
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8
    // inject test helpers onto window!
    emq.globalize();!
    !
    // create a custom test resolver!
    App.Resolver = Ember.DefaultResolver.extend({ namespace: App });!
    !
    // set the test resolver!
    setResolver(App.Resolver.create());!
    Globals
    

    View Slide

84. globals-unit-test-setup.js
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8
    // inject test helpers onto window!
    emq.globalize();!
    !
    // create a custom test resolver!
    App.Resolver = Ember.DefaultResolver.extend({ namespace: App });!
    !
    // set the test resolver!
    setResolver(App.Resolver.create());!
    Globals
    

    View Slide

85. modules-unit-test-setup.js
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    // inject test helpers onto window!
    emq.globalize();!
    !
    // import the existing resolver!
    import Resolver from ‘./path/to/resolver';!
    !
    // import the setResolver function!
    import { setResolver } from ‘ember-qunit';!
    !
    // set the resolver!
    setResolver(Resolver.create());!
    Modules
    

    View Slide

86. modules-unit-test-setup.js
    1!
    2!
    3!
    4!
    5!
    6!
    7!
    8!
    9!
    10!
    11
    // inject test helpers onto window!
    emq.globalize();!
    !
    // import the existing resolver!
    import Resolver from ‘./path/to/resolver';!
    !
    // import the setResolver function!
    import { setResolver } from ‘ember-qunit';!
    !
    // set the resolver!
    setResolver(Resolver.create());!
    Modules
    

    View Slide

87. moduleFor()
    moduleForComponent()
    moduleForModel()
    Ember-QUnit
    

    View Slide

88. moduleFor(“route:index”)
    

    View Slide

89. moduleFor(“route:index”)
    

    View Slide

90. moduleFor(“route:index”)
    

    View Slide

91. Container
    moduleFor(“route:index”)
    

    View Slide

92. moduleFor(“route:index”)
    Container
    

    View Slide

93. Container
    test(‘test 1’, function() {!
    var route = this.subject();!
    })
    test(‘test 1’, function() {!
    var route = this.subject();!
    })
    moduleFor(“route:index”)
    

    View Slide

94. Container
    test(‘test 1’, function() {!
    var route = this.subject();!
    })
    test(‘test 1’, function() {!
    var route = this.subject();!
    })
    moduleFor(“route:index”)
    

    View Slide

95. moduleFor(fullName [, description [, callbacks]])
    The description of the module
    description
    The full name of the unit (ie. controller:application or route:index)
    fullName
    Normal QUnit callbacks (setup, teardown), width addition of needs
    callbacks
    

    View Slide

96. routes
    

    View Slide

97. 1!
    2!
    3!
    4!
    5!
    App.IndexRoute = Ember.Route.extend({!
    model: function() {!
    return ['red', 'green', 'blue'];!
    }!
    });!
    1!
    2!
    3!
    4!
    5!
    6
    moduleFor('route:index', 'Unit: Index Route');!
    !
    test('model', function() {!
    var route = this.subject();!
    equal(route.model().toString(), 'red,green,blue');!
    });!
    jsbin.com/qifon
    

    View Slide

98. 1!
    2!
    3!
    4!
    5!
    App.IndexRoute = Ember.Route.extend({!
    model: function() {!
    return ['red', 'green', 'blue'];!
    }!
    });!
    1!
    2!
    3!
    4!
    5!
    6
    moduleFor('route:index', 'Unit: Index Route');!
    !
    test('model', function() {!
    var route = this.subject();!
    equal(route.model().toString(), 'red,green,blue');!
    });!
    jsbin.com/qifon
    

    View Slide

99. 1!
    2!
    3!
    4!
    5!
    App.IndexRoute = Ember.Route.extend({!
    model: function() {!
    return ['red', 'green', 'blue'];!
    }!
    });!
    1!
    2!
    3!
    4!
    5!
    6!
    moduleFor('route:index', 'Unit: Index Route');!
    !
    test('model', function() {!
    var route = this.subject();!
    equal(route.model().toString(), 'red,green,blue');!
    });!
    jsbin.com/qifon
    

    View Slide

100. 1!
     2!
     3!
     4!
     5!
     App.IndexRoute = Ember.Route.extend({!
     model: function() {!
     return ['red', 'green', 'blue'];!
     }!
     });!
     1!
     2!
     3!
     4!
     5!
     6
     moduleFor('route:index', 'Unit: Index Route');!
     !
     test('model', function() {!
     var route = this.subject();!
     equal(route.model().toString(), 'red,green,blue');!
     });!
     jsbin.com/qifon
     

     View Slide

101. controllers
     

     View Slide

102. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     !
     1!
     2!
     3!
     4!
     5!
     6!
     7!
     !
     App.ApplicationController = Ember.Controller.extend({!
     user: null,!
     !
     init: function() {!
     this._super.apply(this, arguments);!
     this.set('user', Em.Object.create({ name: 'Guest' }));!
     }!
     });!
     !
     App.ProfileController = Ember.Controller.extend({!
     needs: ['application'],!
     !
     name: function() {!
     return this.get('controllers.application.user.name');!
     }.property('controllers.application.user.name')!
     });!
     jsbin.com/numof
     

     View Slide

103. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     !
     1!
     2!
     3!
     4!
     5!
     6!
     7!
     !
     App.ApplicationController = Ember.Controller.extend({!
     user: null,!
     !
     init: function() {!
     this._super.apply(this, arguments);!
     this.set('user', Em.Object.create({ name: 'Guest' }));!
     }!
     });!
     !
     App.ProfileController = Ember.Controller.extend({!
     needs: ['application'],!
     !
     name: function() {!
     return this.get('controllers.application.user.name');!
     }.property('controllers.application.user.name')!
     });!
     jsbin.com/numof
     

     View Slide

104. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9 !
     10!
     11!
     12!
     13!
     14!
     !
     moduleFor('controller:profile', 'Unit: Stuff Controller', {!
     needs: ['controller:application']!
     });!
     !
     test('name', function() {!
     var ctrl = this.subject(),!
     appCtrl = ctrl.get('controllers.application');!
     !
     equal(ctrl.get('name'), 'Guest');!
     Ember.run(function() {!
     appCtrl.get('user').set('name', 'Eric');!
     });!
     equal(ctrl.get('name'), 'Eric');!
     });!
     jsbin.com/numof
     

     View Slide

105. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9 !
     10!
     11!
     12!
     13!
     14!
     !
     moduleFor('controller:profile', 'Unit: Stuff Controller', {!
     needs: ['controller:application']!
     });!
     !
     test('name', function() {!
     var ctrl = this.subject(),!
     appCtrl = ctrl.get('controllers.application');!
     !
     equal(ctrl.get('name'), 'Guest');!
     Ember.run(function() {!
     appCtrl.get('user').set('name', 'Eric');!
     });!
     equal(ctrl.get('name'), 'Eric');!
     });!
     jsbin.com/numof
     

     View Slide

106. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9 !
     10!
     11!
     12!
     13!
     14!
     !
     moduleFor('controller:stuff', 'Unit: Stuff Controller', {!
     needs: ['controller:application']!
     });!
     !
     test('name', function() {!
     var ctrl = this.subject(),!
     appCtrl = ctrl.get('controllers.application');!
     !
     equal(ctrl.get('name'), 'Guest');!
     Ember.run(function() {!
     appCtrl.get('user').set('name', 'Eric');!
     });!
     equal(ctrl.get('name'), 'Eric');!
     });!
     jsbin.com/numof
     

     View Slide

107. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9 !
     10!
     11!
     12!
     13!
     14!
     !
     moduleFor('controller:stuff', 'Unit: Stuff Controller', {!
     needs: ['controller:application']!
     });!
     !
     test('name', function() {!
     var ctrl = this.subject(),!
     appCtrl = ctrl.get('controllers.application');!
     !
     equal(ctrl.get('name'), 'Guest');!
     Ember.run(function() {!
     appCtrl.get('user').set('name', 'Eric');!
     });!
     equal(ctrl.get('name'), 'Eric');!
     });!
     jsbin.com/numof
     

     View Slide

108. The description of the module
     description
     The short name of the component (ie. x-foo or ic-tabs)
     name
     Normal QUnit callbacks (setup, teardown), width addition of needs
     callbacks
     moduleForComponent(name [, description [, callbacks]])
     

     View Slide

109. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     App.PrettyColorComponent = Ember.Component.extend({!
     classNames: ['pretty-color'],!
     attributeBindings: ['style'],!
     style: function() {!
     return 'color: ' + this.get('color') + ';';!
     }.property('color')!
     });!
     jsbin.com/witut
     

     View Slide

110. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11!
     12!
     …!
     moduleForComponent('pretty-color', 'Unit: components/pretty-color');!
     !
     test("set colors", function() {!
     var component = this.subject();!
     !
     Ember.run(function() {!
     component.set('color', 'green');!
     });!
     !
     // first call to this.$() renders the component!
     equal(this.$().attr('style'), 'color: green;');!
     });
     jsbin.com/witut
     

     View Slide

111. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11!
     12!
     …!
     moduleForComponent('pretty-color', 'Unit: components/pretty-color');!
     !
     test("set colors", function() {!
     var component = this.subject();!
     !
     Ember.run(function() {!
     component.set('color', 'green');!
     });!
     !
     // first call to this.$() renders the component!
     equal(this.$().attr('style'), 'color: green;');!
     });
     jsbin.com/witut
     

     View Slide

112. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11!
     12!
     …!
     moduleForComponent('pretty-color', 'Unit: components/pretty-color');!
     !
     test("set colors", function() {!
     var component = this.subject();!
     !
     Ember.run(function() {!
     component.set('color', 'green');!
     });!
     !
     // first call to this.$() renders the component!
     equal(this.$().attr('style'), 'color: green;');!
     });
     jsbin.com/witut
     

     View Slide

113. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11!
     12!
     …!
     moduleForComponent('pretty-color', 'Unit: components/pretty-color');!
     !
     test("set colors", function() {!
     var component = this.subject();!
     !
     Ember.run(function() {!
     component.set('color', 'green');!
     });!
     !
     // first call to this.$() renders the component!
     equal(this.$().attr('style'), 'color: green;');!
     });
     jsbin.com/witut
     

     View Slide

114. jsbin.com/kilej
     

     View Slide

115. The description of the module
     description
     The short name of the model you’d use in `store` operations
     (ie. user or assignmentGroup)
     name
     Normal QUnit callbacks (setup, teardown), width addition of needs
     callbacks
     moduleForModel(name [, description [, callbacks]])
     

     View Slide

116. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8
     App.User = DS.Model.extend({!
     fName: DS.attr('string'),!
     lName: DS.attr('string'),!
     verified: DS.attr('boolean', { defaultValue: false }),!
     createdAt: DS.attr('string', {!
     defaultValue: function() { return new Date(); }!
     })!
     });
     jsbin.com/mapuf
     

     View Slide

117. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11
     moduleForModel('user', 'Unit: User Model');!
     !
     test('createdAt defaults to now', function() {!
     var user = this.subject({!
     firstName: 'Eric',!
     lastName: 'Berry'!
     });!
     var createdAt = user.get('createdAt');!
     var now = new Date();!
     equal(createdAt.toString(), now.toString());!
     });!
     jsbin.com/mapuf
     

     View Slide

118. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11
     moduleForModel('user', 'Unit: User Model');!
     !
     test('createdAt defaults to now', function() {!
     var user = this.subject({!
     firstName: 'Eric',!
     lastName: 'Berry'!
     });!
     var createdAt = user.get('createdAt');!
     var now = new Date();!
     equal(createdAt.toString(), now.toString());!
     });!
     jsbin.com/mapuf
     

     View Slide

119. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11
     moduleForModel('user', 'Unit: User Model');!
     !
     test('createdAt defaults to now', function() {!
     var user = this.subject({!
     firstName: 'Eric',!
     lastName: 'Berry'!
     });!
     var createdAt = user.get('createdAt');!
     var now = new Date();!
     equal(createdAt.toString(), now.toString());!
     });!
     jsbin.com/mapuf
     

     View Slide

120. 1!
     2!
     3!
     4!
     5!
     6!
     7!
     8!
     9!
     10!
     11
     moduleForModel('user', 'Unit: User Model');!
     !
     test('createdAt defaults to now', function() {!
     var user = this.subject({!
     firstName: 'Eric',!
     lastName: 'Berry'!
     });!
     var createdAt = user.get('createdAt');!
     var now = new Date();!
     equal(createdAt.toString(), now.toString());!
     });!
     jsbin.com/mapuf
     

     View Slide

121. github/rpflorence/ember-qunit
     

     View Slide

122. bower install ember-qunit
     

     View Slide

123. already included in

     ember-app-kit
     

     View Slide

124. already included in

     ember-cli
     

     View Slide

125. and…
     

     View Slide

126. Almost done…
     http://goo.gl/ov6SSb
     

     View Slide

127. thank you
     @rwjblue @stefanpenner @abuiles @dericabel @tehviking @ryanflorence @fivetanley
     @jason.madsen @sterlingcobb
     @codeofficer @JimDAlvado @ryankshaw
     @DevEngine @toranb
     

     View Slide

128. thank you
     spouses, partners and 

     significant others
     

     View Slide

129. I tweet at @coderberry
     I blog at coderberry.me
     I commit to github.com/cavneb
     I work for Instructure
     I run the EmberSLC meetup
     I actually don’t even have a cat
     Questions?
     

     View Slide