The document discusses unit testing in software development, emphasizing the importance of ensuring functionality remains intact after code changes. It covers various testing strategies including unit testing, integration testing, and the use of the QUnit testing framework within the Ember.js environment. Additionally, it provides code examples and resources related to testing components and functionality in Ember applications.

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!