Unit testing in Ember.js

Transcript

1. Act 3 Unit testing
2. What is unit testing? (…) unit testing is a software testing method by which individual units of source code (…) are tested to determine if they are fit for use.
3. Contrary to acceptance tests… • It does not exercise the entire system • Only focuses on the Object Under Test (or subject) • Isolates the subject to be able to test it • Can use “doubles” that stand in for the collaborators of the subject
4. Dependency Injection (DI) • Injects the collaborators (~dependencies) of an object at runtime • Makes testing a lot easier • e.g testing a route without making XHR calls
5. Ember has a great DI solution, just saying.
6. The container • All Ember apps have one • It manages the lifecycle of the objects of the different building blocks • It is the basis of Dependency Injection
7. Use it!
8. Your workhorse 1 function isolatedContainer(fullNames) {! 2 var resolver = testResolver.get();! 3 var container = new Ember.Container();! 4 for (var i = fullNames.length; i > 0; i--) {! 5 var fullName = fullNames[i - 1];! 6 container.register(fullName, resolver.resolve(fullName));! 7 }! 8 return container;! 9 }!
9. ember-qunit • Defines isolatedContainer • Decorates qunit methods and builds on top of isolatedContainer • moduleFor • moduleForModel • moduleForComponent
10. 1 moduleForComponent('ic-autocomplete', 'AutocompleteComponent', {! 2 needs: [! 3 'component:ic-autocomplete-option',! 4 'component:ic-autocomplete-toggle',! 5 'component:ic-autocomplete-input',! 6 'component:ic-autocomplete-list',! 7 'template:components/ic-autocomplete-css'! 8 ]! 9 });! 1 test('opening and closing via the toggle', function() {! 2 setup(this);! 3 ok(toggle.length);! 4 toggle.simulate('click');! 5 ok(list.is(':visible'));! 6 toggle.simulate('click');! 7 assertClosed();! 8 });! https://github.com/instructure/ic-autocomplete
11. Use (sugary) isolatedContainer for testing … • models (moduleForModel) • controllers (moduleFor) • components (views) (moduleForComponent) • routes (moduleFor)
12. Helpers 1 test('Returns the translated text with the slots filled in by passed variables', function() {! 2 Ember.I18n.translations = { loggedIn: "You are logged in as {{name}}" };! 3 ! 4 var view = createView("{{translate 'loggedIn' name='Tom'}}");! 5 appendView(view);! 6 ! 7 var renderedText = view.$().text();! 8 equal(renderedText, "You are logged in as Tom");! 9 });!
13. A few places to go to • https://github.com/rpflorence/ember-qunit • https://github.com/stefanpenner/ember-app-kit/ tree/master/tests • https://github.com/instructure/ic-tabs/tree/master/ test