Slide 1

Slide 1 text

Act 3 Unit testing

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Ember has a great DI solution, just saying.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Use it!

Slide 8

Slide 8 text

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 }!

Slide 9

Slide 9 text

ember-qunit • Defines isolatedContainer • Decorates qunit methods and builds on top of isolatedContainer • moduleFor • moduleForModel • moduleForComponent

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Use (sugary) isolatedContainer for testing … • models (moduleForModel) • controllers (moduleFor) • components (views) (moduleForComponent) • routes (moduleFor)

Slide 12

Slide 12 text

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 });!

Slide 13

Slide 13 text

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