(Unit) Testing in Emberjs – Munich Ember.js Meetup July 2014

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