Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

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 confidence when refactoring living documentation confidence 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
  7. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  8. 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
  11. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  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
  15. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  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 ‘fluent’
  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 fluent 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?
  27. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  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
  31. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  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(); });
  36. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  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
Advertisement