More Related Content Similar to Automated Testing in EmberJS (20) Automated Testing in EmberJS1. Intro to Testing an
EmberJS Application
Ben Limmer
EmberJS Denver Meetup
7/29/2015
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
9. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember unit tests
• actions
• computed properties with sophisticated logic
• mixins
• util functions
12. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
ember integration tests
• components
• actions sent from components
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
23. mocha / chai
it('has a button with text', function() {
this.render(hbs`{{foo-bar}}`);
expect(this.$('button').text()).to.equal('Click Me');
});
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
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();
});
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);
});
});
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);
});
});
43. Ben LimmerEmberJS Meetup - 7/29/2015 ember.party
demo project code
• https://github.com/blimmer/emberjs-denver-
testing-talk