Automated Testing in EmberJS

1. Intro to Testing an EmberJS Application Ben Limmer EmberJS Denver Meetup 7/29/2015

2. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party slides are available on slideshare / ember.party

3. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party why do we test?

4. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party write better code less need for manual qa conﬁdence when refactoring living documentation conﬁdence when upgrading

5. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party 3 levels of testing

6. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance

9. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember unit tests • actions • computed properties with sophisticated logic • mixins • util functions

10. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember unit tests function input expected output

12. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember integration tests • components • actions sent from components

13. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember integration tests component interaction expected state

14. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember integration tests component interaction expected action

16. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember acceptance tests • rendered routes • transitions between routes • communicating with the (fake) server

17. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember acceptance tests application interaction expected state application interaction expected state

18. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party qunit vs. mocha

19. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party qunit vs. mocha (chai)

20. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party qunit • 1st class support • syntax is not as ‘ﬂuent’

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

22. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party mocha • Good support, but not 1st class • Highly ﬂuent syntax

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

24. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party demo

25. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party don’t panic - source is on github

26. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party what do we test?

28. mixins/authenticated-route.js export 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')); } } });

29. mixins/authenticated-route-test.js describe('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'); });

30. 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

32. 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>

33. 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 });

34. components/sign-in-form- test.js it('shows the user's email address', function() { this.set('user', Ember.Object.create({ email: 'foo@bar.com' })); this.render(hbs`{{sign-in-form user=user}}`); expect(this.$('#sign-in-greeting').text()).to.contain('foo@bar.com'); }); it('has a button to login', function() { this.render(hbs`{{sign-in-form}}`); expect(this.$('button#sign-in-cta').length).to.equal(1); });

35. 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: 'foo@bar.com' }); 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(); });

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

38. acceptance-test/sign-in- test.js describe('success', function() { beforeEach(function() { server.create('user', { email: 'hello@benlimmer.com', password: 'guest' }); }); it('transitions to the dashboard on successful login'); it('shows a flash message on successful login'); });

39. acceptance-test/sign-in- test.js 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); }); });

40. acceptance-test/sign-in- test.js describe('failure', function() { beforeEach(function() { // API will return 400 server.create('user', { email: 'notBen@gmail.com', password: 'guest' }); }); it('does not transition to the dashboard on failure'); it('shows a danger flash message on login failure'); });

41. acceptance-test/sign-in- test.js 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); }); });

42. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party thank you! blimmer l1m5 hello@benlimmer.com ember.party

43. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party demo project code • https://github.com/blimmer/emberjs-denver- testing-talk