Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
why do we test?
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
write better code
less need for
manual qa
confidence when
refactoring
livi...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
3 levels of testing
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember unit tests
• actions
• computed properties with sophisticated logic...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember unit tests
function
input
expected
output
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember integration tests
• components
• actions sent from components
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember integration tests
component
interaction
expected
state
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember integration tests
component
interaction
expected
action
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember acceptance tests
• rendered routes
• transitions between routes
• c...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember acceptance tests
application
interaction
expected
state
application...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
qunit vs. mocha
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
qunit vs. mocha (chai)
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
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...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
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.e...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
demo
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
don’t panic -
source is on github
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
what do we test?
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
mixins/authenticated-route.js
export default Ember.Mixin.create({
session: Ember.inject.service(),
signInRoute: 'sign-in',...
mixins/authenticated-route-test.js
describe('beforeModel', function() {
const signInRoute = 'sign-in';
let subject, replac...
it('does nothing if logged in', function() {
session.set(‘isLoggedIn’, true);
subject.beforeModel();
expect(replaceWithStu...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
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 <b...
components/sign-in-form.js
1 export default Ember.Component.extend({
2 actions: {
3 signIn: function() {
4 this.sendAction...
components/sign-in-form-
test.js
it('shows the user's email address', function() {
this.set('user', Ember.Object.create({
...
components/sign-in-form-
test.js
it('sends the login action with the user when clicking the button',
function(done) {
cons...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
Unit
Integration
Acceptance
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
acceptance-test/sign-in-
test.js
describe('success', function() {
beforeEach(function() {
server.create('user', {
email: '...
acceptance-test/sign-in-
test.js
it('transitions to the dashboard on successful login', function()
{
visit('/sign-in');
cl...
acceptance-test/sign-in-
test.js
describe('failure', function() {
beforeEach(function() {
// API will return 400
server.cr...
acceptance-test/sign-in-
test.js
it('does not transition to the dashboard on failure', function() {
visit('/sign-in');
cli...
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
thank you!
blimmer
l1m5
hello@benlimmer.com
ember.party
Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
demo project code
• https://github.com/blimmer/emberjs-denver-
testing-ta...
Upcoming SlideShare
Loading in …5
×

Automated Testing in EmberJS

14,043 views

Published on

A high-level introduction to testing in EmberJS. This talk explains the difference between unit, integration and acceptance tests, when to use each and how to get started with ember-cli-mocha.

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/4JHBR ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Automated Testing in EmberJS

  1. 1. Intro to Testing an EmberJS Application Ben Limmer EmberJS Denver Meetup 7/29/2015
  2. 2. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party slides are available on slideshare / ember.party
  3. 3. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party why do we test?
  4. 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. 5. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party 3 levels of testing
  6. 6. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  7. 7. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  8. 8. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  9. 9. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember unit tests • actions • computed properties with sophisticated logic • mixins • util functions
  10. 10. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember unit tests function input expected output
  11. 11. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  12. 12. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember integration tests • components • actions sent from components
  13. 13. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember integration tests component interaction expected state
  14. 14. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember integration tests component interaction expected action
  15. 15. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  16. 16. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember acceptance tests • rendered routes • transitions between routes • communicating with the (fake) server
  17. 17. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party ember acceptance tests application interaction expected state application interaction expected state
  18. 18. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party qunit vs. mocha
  19. 19. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party qunit vs. mocha (chai)
  20. 20. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party qunit • 1st class support • syntax is not as ‘fluent’
  21. 21. qunit test('it renders', function(assert) { this.render(hbs`{{foo-bar}}`); assert.equal(this.$('button').text(), 'Click Me'); });
  22. 22. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party mocha • Good support, but not 1st class • Highly fluent syntax
  23. 23. mocha / chai it('has a button with text', function() { this.render(hbs`{{foo-bar}}`); expect(this.$('button').text()).to.equal('Click Me'); });
  24. 24. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party demo
  25. 25. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party don’t panic - source is on github
  26. 26. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party what do we test?
  27. 27. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  28. 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. 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. 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. 31. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  32. 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. 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. 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. 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. 36. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party Unit Integration Acceptance
  37. 37. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
  38. 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. 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. 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. 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. 42. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party thank you! blimmer l1m5 hello@benlimmer.com ember.party
  43. 43. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party demo project code • https://github.com/blimmer/emberjs-denver- testing-talk

×