automated testing in emberjs

Intro to Testing an EmberJS Application

Ben Limmer EmberJS Denver Meetup

7/29/2015

Ben LimmerEmberJS Meetup - 7/29/2015 ! ember.party

slides are available on slideshare / ember.party


why do we test?


write better code

less need for manual qa

confidence when refactoring

living documentation

confidence when upgrading


3 levels of testing


Unit

Integration

Acceptance


ember unit tests

• actions

• computed properties with sophisticated logic

• mixins

• util functions


ember unit tests

function

input

expected output


Unit

Integration

Acceptance


ember integration tests

• components

• actions sent from components



component

interaction

expected state



component

interaction

expected action


Unit

Integration

Acceptance


ember acceptance tests

• rendered routes

• transitions between routes

• communicating with the (fake) server


ember acceptance tests

application

interaction

expected state

application

interaction

expected state


qunit vs. mocha


qunit vs. mocha (chai)


qunit

• 1st class support

• syntax is not as ‘fluent’

qunit

test('it renders', function(assert) { this.render(hbs`{{foo-bar}}`); assert.equal(this.$('button').text(), 'Click Me');});


mocha

• Good support, but not 1st class

• Highly fluent syntax

mocha / chai

it('has a button with text', function() { this.render(hbs`{{foo-bar}}`); expect(this.$('button').text()).to.equal('Click Me');});


demo


don’t panic - source is on github


what do we test?


Unit

Integration

Acceptance

mixins/authenticated-route.jsexport default Ember.Mixin.create({ session: Ember.inject.service(), signInRoute: 'sign-in',

beforeModel: function() { if (this.get('session.isLoggedIn')) { return; } else { this.replaceWith(this.get('signInRoute')); } }});

mixins/authenticated-route-test.jsdescribe('beforeModel', function() { const signInRoute = 'sign-in';

let subject, replaceWithStub, session; beforeEach(function() { const AuthenticatedRouteObject = Ember.Route.extend( AuthenticatedRouteMixin);

replaceWithStub = sinon.stub(); session = Ember.Object.create();

subject = AuthenticatedRouteObject.create({ session: session, signInRoute: signInRoute, replaceWith: replaceWithStub }); });

it('does nothing if logged in'); it('transitions to the sign in route if not logged in');});

it('does nothing if logged in', function() { session.set(‘isLoggedIn’, true); subject.beforeModel(); expect(replaceWithStub.called).to.be.false; });

it('transitions to the sign in route if not logged in', function() { session.set('isLoggedIn', false); subject.beforeModel(); expect(replaceWithStub.withArgs(signInRoute).calledOnce).to.be.true; });

mixins/authenticated-route-test.js


Unit

Integration

Acceptance

components/sign-in-form.hbs

1 <h4 id='sign-in-greeting'> 2 Click the Button Below to Login as {{user.email}} 3 </h4> 4 <button id='sign-in-cta' class='button' {{action 'signIn'}}> 5 Sign In 6 </button>

components/sign-in-form.js

1 export default Ember.Component.extend({ 2 actions: { 3 signIn: function() { 4 this.sendAction(‘signIn', this.get('user')); 5 } 6 } 7 });

components/sign-in-form-test.js

it('shows the user\'s email address', function() { this.set('user', Ember.Object.create({ email: '[email protected]' }));

this.render(hbs`{{sign-in-form user=user}}`); expect(this.$('#sign-in-greeting').text()).to.contain('[email protected]'); });

it('has a button to login', function() { this.render(hbs`{{sign-in-form}}`); expect(this.$('button#sign-in-cta').length).to.equal(1); });

components/sign-in-form-test.js

it('sends the login action with the user when clicking the button', function(done) { const user = Ember.Object.create({ email: '[email protected]' }); this.set('user', user); this.on('signIn', function(actionUser) { expect(actionUser).to.equal(user); done(); });

this.render(hbs`{{sign-in-form user=user signIn='signIn'}}`); this.$('button#sign-in-cta').click(); });


Unit

Integration

Acceptance

acceptance-test/sign-in-test.js

describe('success', function() { beforeEach(function() { server.create('user', { email: '[email protected]', password: 'guest' }); });

it('transitions to the dashboard on successful login');

it('shows a flash message on successful login');});


it('transitions to the dashboard on successful login', function() { visit('/sign-in'); click('button#sign-in-cta');

andThen(function() { expect(currentPath()).to.equal('dashboard'); }); });

it('shows a flash message on successful login', function() { visit('/sign-in'); click('button#sign-in-cta');

andThen(function() { expect(find('.alert-box.success').length).to.equal(1); }); });


describe('failure', function() { beforeEach(function() { // API will return 400 server.create('user', { email: '[email protected]', password: 'guest' }); });

it('does not transition to the dashboard on failure');

it('shows a danger flash message on login failure');});


it('does not transition to the dashboard on failure', function() { visit('/sign-in'); click('button#sign-in-cta');

andThen(function() { expect(currentPath()).to.equal('sign-in'); }); });

it('shows a danger flash message on login failure', function() { visit('/sign-in'); click('button#sign-in-cta');

andThen(function() { expect(find('.alert-box.danger').length).to.equal(1); }); });


thank you!" blimmer # l1m5 $ [email protected]! ember.party


demo project code

• https://github.com/blimmer/emberjs-denver-testing-talk

https://github.com/blimmer/emberjs-denver-testing-talk

automated testing in emberjs

Technology