This is a short talk given at the Ember.js Munich July Meetup. It briefly explains the basics of unit testing in Ember.js and gives some examples and details

1. (Unit) Testing
in
Stefan Fochler

3. About Testing

4. About Testing
• Make sure that stuff works…

5. About Testing
• Make sure that stuff works…
• …even after code changes or refactoring

6. About Testing
• Make sure that stuff works…
• …even after code changes or refactoring
• Automation is key

7. About Testing

8. About Testing
• Unit Testing
• Verify, that isolated chunks of functionality work
• Don't worry about their dependencies

9. About Testing
• Unit Testing
• Verify, that isolated chunks of functionality work
• Don't worry about their dependencies
• Integration Testing
• Test user interaction and application flow

10. About Testing

11. About Testing
• Tools
• QUnit testing framework
• (async) helpers in ember-testing
• Test Runner (testem)
• Test Loader (ember-cli)

12. Short Demo

13. Helpers in Ember-QUnit

14. Helpers in Ember-QUnit
• moduleFor(name, description, callbacks);
• Subject: controller:application, route:index etc.

15. Helpers in Ember-QUnit
• moduleFor(name, description, callbacks);
• Subject: controller:application, route:index etc.
• moduleForComponent(name, description, callbacks);
• Subject: x-foo, select-2 etc.

16. Helpers in Ember-QUnit
• moduleFor(name, description, callbacks);
• Subject: controller:application, route:index etc.
• moduleForComponent(name, description, callbacks);
• Subject: x-foo, select-2 etc.
• moduleForModel(name, description, callbacks);
• Subject: user, table etc.

17. Helpers in Ember-QUnit
• moduleFor(name, description, callbacks);
• Subject: controller:application, route:index etc.
• moduleForComponent(name, description, callbacks);
• Subject: x-foo, select-2 etc.
• moduleForModel(name, description, callbacks);
• Subject: user, table etc.
• test(name, callback);

18. Helpers in Ember-Testing I

19. Helpers in Ember-Testing I
• Async
• visit(url)
• fillIn(selector, text)
• click(selector)
• keyEvent(selector, type, keyCode)

20. Helpers in Ember-Testing I
• Async
• visit(url)
• fillIn(selector, text)
• click(selector)
• keyEvent(selector, type, keyCode)
• Sync
• find(selector, context)
• currentPath()
• currentURL()

21. Helpers in Ember-Testing II

22. Helpers in Ember-Testing II
• Wait
• andThen(callback)

23. Helpers in Ember-Testing II
• Wait
• andThen(callback)
• Custom Helpers
• Ember.Test.registerHelper
• Ember.Test.registerAsyncHelper

24. Testing Components I
var App, component;
!
moduleForComponent('select-2', 'Select2Component', {
setup: function() {
App = startApp();
// create instance of our component
component = this.subject();
},
teardown: function() {
Ember.run(App, 'destroy');
Ember.run(component, 'destroy');
}
});

25. Testing Components II
test("it renders", function() {
expect(2);
!
equal(component.state, 'preRender');
!
// appends the component to the page
this.append();
!
equal(component.state, 'inDOM');
});

26. Testing Components III
test("it supports placeholder text", function() {
var placeholder = "unit testing rocks";
!
component.set('placeholder', placeholder);
!
this.append();
!
equal($('.select2-chosen').text(), placeholder,
"has placeholder text");
});

27. Testing Components IV
test("it sets value to selected object", function() {
expect(2);
this.append();
component.set('content', simpleContent);
!
// open options by clicking on the element
click('.select2-choice');
// then select an option
click('.select2-results li:nth-child(3)', 'body');
!
andThen(function() {
equal(component.get(‘value’),
simpleContent[2], "selects correct item");
equal($(‘.select2-chosen').text(),
simpleContent[2].text, "has correct text");
});
});

28. Testing Components V
test("it wraps the content in <pre><code>", function() {
expect(2);
// create wrapper view with template
var component = Ember.View.extend({
template: Ember.Handlebars
.compile('{{#highlight-code}}hello!{{/highlight-code}}')
}).create();
!
Ember.run(function() {
component.appendTo('#ember-testing');
});
!
ok(component.$("pre").length, "pre exists");
!
ok(component.$("pre > code").length, "pre > code exists");
});

29. Resources
• Ember Testing Guide http://emberjs.com/guides/testing/
• Ember-Cli Guide http://iamstef.net/ember-cli/
• Ember.js/Ember-Data tests

30. Thanks!