(unit) testing in emberjs – munich ember.js meetup july 2014
TRANSCRIPT
(Unit) Testingin
Stefan Fochler
About Testing
About Testing
• Make sure that stuff works…
About Testing
• Make sure that stuff works…• …even after code changes or refactoring
About Testing
• Make sure that stuff works…• …even after code changes or refactoring• Automation is key
About Testing
About Testing
• Unit Testing • Verify, that isolated chunks of functionality work • Don't worry about their dependencies
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
About Testing
About Testing
• Tools • QUnit testing framework • (async) helpers in ember-testing • Test Runner (testem) • Test Loader (ember-cli)
Short Demo
Helpers in Ember-QUnit
Helpers in Ember-QUnit• moduleFor(name, description, callbacks);
• Subject: controller:application, route:index etc.
Helpers in Ember-QUnit• moduleFor(name, description, callbacks);
• Subject: controller:application, route:index etc.• moduleForComponent(name, description, callbacks);
• Subject: x-foo, select-2 etc.
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.
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);
Helpers in Ember-Testing I
Helpers in Ember-Testing I• Async
• visit(url) • fillIn(selector, text) • click(selector) • keyEvent(selector, type, keyCode)
Helpers in Ember-Testing I• Async
• visit(url) • fillIn(selector, text) • click(selector) • keyEvent(selector, type, keyCode)
• Sync • find(selector, context) • currentPath() • currentURL()
Helpers in Ember-Testing II
Helpers in Ember-Testing II
• Wait • andThen(callback)
Helpers in Ember-Testing II
• Wait • andThen(callback)
• Custom Helpers • Ember.Test.registerHelper • Ember.Test.registerAsyncHelper
Testing Components Ivar 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'); } });
Testing Components IItest("it renders", function() { expect(2); !
equal(component.state, 'preRender'); !
// appends the component to the page this.append(); !
equal(component.state, 'inDOM'); });
Testing Components IIItest("it supports placeholder text", function() { var placeholder = "unit testing rocks"; !
component.set('placeholder', placeholder); !
this.append(); !
equal($('.select2-chosen').text(), placeholder, "has placeholder text"); });
Testing Components IVtest("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"); }); });
Testing Components Vtest("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"); });
Resources
• Ember Testing Guide http://emberjs.com/guides/testing/ • Ember-Cli Guide http://iamstef.net/ember-cli/ • Ember.js/Ember-Data tests
Thanks!