Matthew Beale, profile picture
Uploaded byMatthew Beale
PDF, PPTX10,731 views

Testing Ember Apps: Managing Dependency

The document discusses the management of dependencies in Ember.js apps, particularly focusing on a conference planning application. It provides insights into isolating implementations, mocking dependencies for unit and acceptance tests, and normalizing synchronous and asynchronous behaviors. Additionally, the text emphasizes the importance of testing to prevent regressions and enforce good design principles.

Technology◦
Related topics:
Web Development•

Embed presentation

Download as PDF, PPTX
Testing Ember.js Apps Managing Dependency
A guaranteed Successful Talk
A guaranteed Successful Talk ✓
@mixonic httP://madhatted.com matt.beale@madhatted.com
201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
http://bit.ly/emberfest-edge
A conference planning app • Submitting a talk • Purchasing a ticket • Preparing a talk
• Submitting a talk • Purchasing a ticket • Preparing a talk The domain A conference planning app
A conference planning app • Submitting a talk • Purchasing a ticket • Preparing a talk
A conference planning app • Adapting to a server • Managing asynchronous APIs • Browser APIs • Submitting a talk • Purchasing a ticket • Preparing a talk ᗜੂͦ﹏ᗜੂͦ
A conference planning app • Adapting to a server • Managing asynchronous APIs • Browser APIs • Submitting a talk • Purchasing a ticket • Preparing a talk The domain
A conference planning app What is this?! • Adapting to a server • Managing asynchronous APIs • Browser APIs • Submitting a talk • Purchasing a ticket • Preparing a talk ᗜੂͦ﹏ᗜੂͦ
Dependencies
Dependencies Domain
Dependencies Domain Own it
Dependencies Domain Own it
Ember-CLI Review 1 // app/utils/some-object.js! 2 export default SomeObject;! 3 export default Ember.Route.extend({! 4 });! 5 ! 6 import MyObject from "app/utils/some-object";! 7 ! 8 // app/utils/many-things.js! 9 export {gadget, anotherGadget};! 10 ! 11 import {anotherGadget} from "app/utils/many-things";! 12 ! 13 // tests/routes/proposal-test.js! 14 moduleFor("route:routeName", "Test Module Name", {! 15 // options include: needs, subject, setup, teardown! 16 });!
Constraining Dependencies 1. Isolate implementation 2. Normalize behavior
Constraining a dependency 1 // app/route/proposal.js! 2 import Proposal from "../model/proposal";! 3 ! 4 export default Ember.Route.extend({! 5 ! 6 model: function(){! 7 var recovered = window.localStorage.getItem('proposalSnapshot');! 8 if (recovered) {! 9 return Proposal.load(recovered);! 10 } else {! 11 return Proposal.build();! 12 }! 13 }! 14 ! 15 });!
Constraining a dependency Implementation 1 // app/route/proposal.js! 2 import Proposal from "../model/proposal";! 3 ! 4 export default Ember.Route.extend({! 5 ! 6 model: function(){! 7 var recovered = window.localStorage.getItem('proposalSnapshot');! 8 if (recovered) {! 9 return Proposal.load(recovered);! 10 } else {! 11 return Proposal.build();! 12 }! 13 }! 14 ! 15 });!
Implementation Constraining a dependency 1 // app/route/proposal.js! 2 import Proposal from "../model/proposal";! 3 ! 4 export default Ember.Route.extend({! 5 ! 6 model: function(){! 7 var recovered = window.localStorage.getItem('proposalSnapshot');! 8 if (recovered) {! 9 return Proposal.load(recovered);! 10 } else {! 11 return Proposal.build();! 12 }! 13 }! 14 ! 15 });! Synchronous behavior
Constraining a dependency app/route/proposal model lookup localStorage sync behavior
Constraining a dependency app/route/proposal model lookup app/utils/recovery-store localStorage sync behavior
Constraining a dependency 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });!
Constraining a dependency Isolated in recoveryStore 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });!
Constraining a dependency Isolated in recoveryStore 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });! Normalize sync and async
Using a synchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });!
Using a synchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });! Using an asynchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });!
Constraining a dependency 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });! localStorage
Constraining a dependency 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 Ember.$.ajax("GET", "/recovery/"+key, {dataType: 'json'}, {! 7 success: Ember.run.bind(this, function(data){! 8 resolve(data);! 9 })! 10 });! 11 });! 12 }! 13 });! AJAX!
Using a synchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });! Using an asynchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });!
Unit Testing Dependencies
Mocking a dependency in units 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 recoveryStore: function(){! 8 return new RecoveryStore();! 9 }.property(),! 10 ! 11 model: function(){! 12 return this.get('recoveryStore').recover('proposalSnapshot').! 13 then(function(data){! 14 if (data) {! 15 return Proposal.load(data);! 16 } else {! 17 return Proposal.build();! 18 }! 19 });! 20 }! 21 ! 22 });!
Mocking a dependency in units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 moduleFor('route:proposal', 'ProposalRoute');! 4 ! 5 test('recovers a proposal', function() {! 6 expect(1);! 7 window.localStorage.setItem('proposalSnapshot', {body: 'pitch Angular'});! 8 var route = this.subject();! 9 return route.model().then(function(proposal){! 10 ok(proposal.get('body'), 'pitch Angular');! 11 });! 12 });!
Mocking a dependency in units Implementation Leak 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 moduleFor('route:proposal', 'ProposalRoute');! 4 ! 5 test('recovers a proposal', function() {! 6 expect(1);! 7 window.localStorage.setItem('proposalSnapshot', {body: 'pitch Angular'});! 8 var route = this.subject();! 9 return route.model().then(function(proposal){! 10 ok(proposal.get('body'), 'pitch Angular');! 11 });! 12 });! ͟͞͞ ⌨ (۶ૈ ᵒ̌ Дᵒ̌)۶ૈ=͟
Mocking a dependency in units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 var mockRecoveryStore = { recover: function(){! 4 return new Ember.RSVP.Promise(function(resolve){! 5 resolve(Ember.Object.create({body: 'pitch Angular'}));! 6 });! 7 } };! 8 ! 9 moduleFor('route:proposal', 'ProposalRoute');! 10 ! 11 test('recovers a proposal', function() {! 12 expect(1);! 13 var route = this.subject({recoveryStore: mockRecoveryStore});! 14 return route.model().then(function(proposal){! 15 ok(proposal.get('body'), 'pitch Angular');! 16 });! 17 });!
Mocking a dependency in units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 var mockRecoveryStore = { recover: function(){! 4 return new Ember.RSVP.Promise(function(resolve){! 5 resolve(Ember.Object.create({body: 'pitch Angular'}));! 6 });! 7 } };! 8 ! 9 moduleFor('route:proposal', 'ProposalRoute', {! 10 subject: function(options, klass, container){! 11 return klass.create(Ember.merge({! 12 recoveryStore: mockRecoveryStore! 13 }, options));! 14 }! 15 });! 16 ! 17 test('recovers a proposal', function() {! 18 expect(1);! 19 var route = this.subject();! 20 return route.model().then(function(proposal){! 21 ok(proposal.get('body'), 'pitch Angular');! 22 });! 23 });!
Mocking a dependency in units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 var mockRecoveryStore = { recover: function(){! 4 return new Ember.RSVP.Promise(function(resolve){! 5 resolve(Ember.Object.create({body: 'pitch Angular'}));! 6 });! 7 } };! 8 ! 9 moduleFor('route:proposal', 'ProposalRoute', {! 10 subject: function(options, klass, container){! 11 return klass.create(Ember.merge({! 12 recoveryStore: mockRecoveryStore! 13 }, options));! 14 }! 15 });! 16 ! 17 test('recovers a proposal', function() {! 18 expect(1);! ✓ 19 var route = this.subject();! 20 return route.model().then(function(proposal){! 21 ok(proposal.get('body'), 'pitch Angular');! 22 });! 23 });!
Why is this code good?
Why is this code good? Well Gary Bernhardt sez… Three goals of testing
Why is this code good? Well Gary Bernhardt sez… #1: Prevent regressions #2: Prevent fear #3: Prevent bad design
Why is this code good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear #3: Prevent bad design
Why is this code good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear ✓ #3: Prevent bad design
Why is this code good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear ✓✓Is fast! #3: Prevent bad design
Why is this code good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear ✓ ✓ #3: Prevent bad design ᕕ( ᐛ )ᕗ ✓Is fast!
Acceptance Testing Dependencies
Mocking a dependency in acceptance 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 recoveryStore: function(){! 8 return new RecoveryStore();! 9 }.property(),! 10 ! 11 model: function(){! 12 return this.get('recoveryStore').recovery('proposalSnapshot').! 13 then(function(data){! 14 if (data) {! 15 return Proposal.load(data);! 16 } else {! 17 return Proposal.build();! 18 }! 19 });! 20 }! 21 ! 22 });!
Mocking a dependency in acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 ! 6 var App;! 7 ! 8 module('Acceptance: Proposal', {! 9 setup: function() {! 10 App = startApp();! 11 },! 12 teardown: function() {! 13 Ember.run(App, 'destroy');! 14 }! 15 });! 16 ! 17 test('visiting /proposal', function() {! 18 visit('/proposal');! 19 ! 20 andThen(function() {! 21 equal(currentPath(), 'proposal');! 22 });! 23 });!
Mocking a dependency in acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 ! 6 var App;! 7 ! 8 module('Acceptance: Proposal', {! 9 setup: function() {! 10 App = startApp();! 11 },! 12 teardown: function() {! 13 Ember.run(App, 'destroy');! 14 }! 15 });! 16 ! 17 test('visiting /proposal', function() {! 18 visit('/proposal');! 19 ! 20 andThen(function() {! 21 equal(currentPath(), 'proposal');! 22 });! 23 });! Where can we mock recoveryStore?
Mocking a dependency in acceptance 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 recoveryStore: function(){! 8 return new RecoveryStore();! 9 }.property(),! 10 ! 11 model: function(){! 12 return this.get('recoveryStore').recovery('proposalSnapshot').! 13 then(function(data){! 14 return Proposal.load(data);! 15 }, function(){! 16 return Proposal.build();! 17 });! 18 }! 19 ! 20 });! “Dependency Lookup”
Dependency Lookup 1 var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();!
Dependency Lookup 1 var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Gadget is in charge
Dependency Lookup 1 var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Dependency Injection 1 var Gadget = Ember.Object.create({! 2 });! 3 ! 4 function buildGadget(){! 5 return Gadget.create({! 6 shelf: Shelf.create()! 7 });! 8 }!
Dependency Lookup 1 var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Dependency Injection 1 var Gadget = Ember.Object.create({! 2 });! 3 ! 4 function buildGadget(){! 5 return Gadget.create({! 6 shelf: Shelf.create()! 7 });! 8 }! Gadget’s dependency is injected
Dependency Lookup 1 var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Dependency Injection / Inversion of Control 1 var Gadget = Ember.Object.create({! 2 });! 3 ! 4 function buildGadget(){! 5 return Gadget.create({! 6 shelf: Shelf.create()! 7 });! 8 }!
Converting “Dependency Lookup” to “Dependency Injection” 1. Create an initializer 2. Register the dependency 3. Inject the dependency 4. Drop the lookup
Converting “Dependency Lookup” to “Dependency Injection” Create an initializer 1 // app/initializers/recovery-store.js! 2 ! 3 import RecoveryStore from "../utils/recovery-store";! 4 ! 5 export default {! 6 name: 'recovery-store',! 7 initialize: function(container, application) {! 8 application.register('services:recoveryStore', RecoveryStore);! 9 application.inject('route', 'recoveryStore', 'services:recoveryStore');! 10 }! 11 };!
Converting “Dependency Lookup” to “Dependency Injection” 1 // app/initializers/recovery-store.js! 2 ! 3 import RecoveryStore from "../utils/recovery-store";! 4 ! 5 export default {! 6 name: 'recovery-store',! 7 initialize: function(container, application) {! 8 application.register('services:recoveryStore', RecoveryStore);! 9 application.inject('route', 'recoveryStore', 'services:recoveryStore');! 10 }! 11 };! Register the dependency
Converting “Dependency Lookup” to “Dependency Injection” 1 // app/initializers/recovery-store.js! 2 ! 3 import RecoveryStore from "../utils/recovery-store";! 4 ! 5 export default {! 6 name: 'recovery-store',! 7 initialize: function(container, application) {! 8 application.register('services:recoveryStore', RecoveryStore);! 9 application.inject('route', 'recoveryStore', 'services:recoveryStore');! 10 }! 11 };! Inject the dependency
Converting “Dependency Lookup” to “Dependency Injection” 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 model: function(){! 8 return this.recoveryStore.recover('proposalSnapshot').! 9 then(function(data){! 10 return Proposal.load(data);! 11 }, function(){! 12 return Proposal.build();! 13 });! 14 }! 15 ! 16 });! Drop the lookup
Mocking a dependency in acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 import mockRecoveryStore from '../helpers/mock-recovery-store';! 6 ! 7 var App;! 8 ! 9 module('Acceptance: Proposal', {! 10 setup: function() {! 11 App = startApp();! 12 // unregister is not yet a first-class API :-/! 13 App.__container__.unregister('services:recoveryStore');! 14 App.register('services:recoveryStore', mockRecoveryStore, {! 15 instantiate: false });! 16 },! 17 teardown: function() {! 18 Ember.run(App, 'destroy');! 19 }! 20 });! 21 ! 22 test('visiting /proposal', function() {! 23 visit('/proposal');! 24 ! 25 andThen(function() {! 26 equal(currentPath(), 'proposal');! 27 });! 28 });! Unregister the normal recoveryStore
Mocking a dependency in acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 import mockRecoveryStore from '../helpers/mock-recovery-store';! 6 ! 7 var App;! 8 ! 9 module('Acceptance: Proposal', {! 10 setup: function() {! 11 App = startApp();! 12 // unregister is not yet a first-class API :-/! 13 App.__container__.unregister('services:recoveryStore');! 14 App.register('services:recoveryStore', mockRecoveryStore, {! 15 instantiate: false });! 16 },! 17 teardown: function() {! 18 Ember.run(App, 'destroy');! 19 }! 20 });! 21 ! 22 test('visiting /proposal', function() {! 23 visit('/proposal');! 24 ! 25 andThen(function() {! 26 equal(currentPath(), 'proposal');! 27 });! 28 });! Register the mockRecoveryStore
#1: Prevent regressions #2: Prevent fear #3: Prevent bad design ᕕ( ᐛ )ᕗ ✓ ✓ ✓ ✓Is fast! Why is this code good?
STOP IT WITH ALL THE CODE (ﾉಥ益ಥ）ﾉ ┻━┻
Starting points: ember-cli.com emberjs.com/guides/testing github.com/rwjblue/ember-qunit emberjs.com/api/classes/Ember.Test.html
Starting points: wikipedia.org/wiki/Inversion_of_control www.martinfowler.com/articles/injection.html
Own your dependencies Contain their APIs
Own your dependencies Design better code with better tests
Gracias

More Related Content

PDF
Ember testing internals with ember cli
byCory Forsyth
 
PPTX
Test like a pro with Ember.js
byMike North
 
PDF
Containers & Dependency in Ember.js
byMatthew Beale
 
PDF
Automated Testing in EmberJS
byBen Limmer
 
PPTX
Good karma: UX Patterns and Unit Testing in Angular with Karma
byExoLeaders.com
 
PDF
Ember and containers
byMatthew Beale
 
PDF
Vuejs testing
byGreg TAPPERO
 
PPT
Testing Javascript with Jasmine
byTim Tyrrell
 
Ember testing internals with ember cli
byCory Forsyth
 
Test like a pro with Ember.js
byMike North
 
Containers & Dependency in Ember.js
byMatthew Beale
 
Automated Testing in EmberJS
byBen Limmer
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
byExoLeaders.com
 
Ember and containers
byMatthew Beale
 
Vuejs testing
byGreg TAPPERO
 
Testing Javascript with Jasmine
byTim Tyrrell
 

What's hot

PPTX
Rapid prototyping and easy testing with ember cli mirage
byKrzysztof Bialek
 
PDF
Unit Testing Express and Koa Middleware in ES2015
byMorris Singer
 
PPTX
Ember - introduction
byHarikrishnan C
 
PPTX
Full Stack Unit Testing
byGlobalLogic Ukraine
 
PDF
Django Celery - A distributed task queue
byAlex Eftimie
 
PDF
An Introduction to Celery
byIdan Gazit
 
PDF
Jasmine BDD for Javascript
byLuis Alfredo Porras Páez
 
PDF
Intro to JavaScript
byYakov Fain
 
PPTX
The road to Ember.js 2.0
byCodemotion
 
PDF
AngularJS Unit Test
byChiew Carol
 
PPTX
Javascript Testing with Jasmine 101
byRoy Yu
 
PDF
Jasmine - why JS tests don't smell fishy
byIgor Napierala
 
PDF
Unit Testing Express Middleware
byMorris Singer
 
PDF
Intro to testing Javascript with jasmine
byTimothy Oxley
 
PDF
Test-Driven Development of AngularJS Applications
byFITC
 
PPTX
AngularJS Unit Testing
byPrince Norin
 
PPTX
Unit testing in JavaScript with Jasmine and Karma
byAndrey Kolodnitsky
 
PDF
Angularjs - Unit testing introduction
byNir Kaufman
 
PDF
Practical Celery
byCameron Maske
 
PDF
Painless JavaScript Testing with Jest
byMichał Pierzchała
 
Rapid prototyping and easy testing with ember cli mirage
byKrzysztof Bialek
 
Unit Testing Express and Koa Middleware in ES2015
byMorris Singer
 
Ember - introduction
byHarikrishnan C
 
Full Stack Unit Testing
byGlobalLogic Ukraine
 
Django Celery - A distributed task queue
byAlex Eftimie
 
An Introduction to Celery
byIdan Gazit
 
Jasmine BDD for Javascript
byLuis Alfredo Porras Páez
 
Intro to JavaScript
byYakov Fain
 
The road to Ember.js 2.0
byCodemotion
 
AngularJS Unit Test
byChiew Carol
 
Javascript Testing with Jasmine 101
byRoy Yu
 
Jasmine - why JS tests don't smell fishy
byIgor Napierala
 
Unit Testing Express Middleware
byMorris Singer
 
Intro to testing Javascript with jasmine
byTimothy Oxley
 
Test-Driven Development of AngularJS Applications
byFITC
 
AngularJS Unit Testing
byPrince Norin
 
Unit testing in JavaScript with Jasmine and Karma
byAndrey Kolodnitsky
 
Angularjs - Unit testing introduction
byNir Kaufman
 
Practical Celery
byCameron Maske
 
Painless JavaScript Testing with Jest
byMichał Pierzchała
 

Similar to Testing Ember Apps: Managing Dependency

PPT
Ember.js: Jump Start
byViacheslav Bukach
 
PDF
Ember presentation
byDaniel N
 
PDF
Workshop 16: EmberJS Parte I
byVisual Engineering
 
PDF
Viliam Elischer - Ember.js - Jak zatopit a neshořet!
byDevelcz
 
PPTX
Intro to EmberJS
byBilly Onjea
 
PPTX
Intro to Ember.JS 2016
bySandino Núñez
 
PDF
Ember.js - Jak zatopit a neshořet!
byViliam Elischer
 
PDF
Ember.js Brussels Meetup #3 - Testing your Ember.js app
byyoranbe
 
ODP
Introduction to ember js
byAdnan Arshad
 
PDF
Ember App Kit & The Ember Resolver
bytboyt
 
PDF
Ember.js for a CakePHP Developer
byjtrapp07
 
PDF
Ember.js Meetup Brussels 31/10/2013
byHstry
 
PDF
Modern, Scalable, Ambitious apps with Ember.js
byMike North
 
PDF
Riding the Edge with Ember.js
byaortbals
 
PDF
Intro to Ember.js
byJay Phelps
 
PDF
From Backbone to Ember and Back(bone) Again
byjonknapp
 
PDF
Developing Single Page Apps with Ember.js
byLeo Hernandez
 
PDF
State of Ember.js - This.JavaScript November 2018
byAmy Lam
 
PPTX
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
byTobias Braner
 
PDF
Delivering with ember.js
byAndrei Sebastian Cîmpean
 
Ember.js: Jump Start
byViacheslav Bukach
 
Ember presentation
byDaniel N
 
Workshop 16: EmberJS Parte I
byVisual Engineering
 
Viliam Elischer - Ember.js - Jak zatopit a neshořet!
byDevelcz
 
Intro to EmberJS
byBilly Onjea
 
Intro to Ember.JS 2016
bySandino Núñez
 
Ember.js - Jak zatopit a neshořet!
byViliam Elischer
 
Ember.js Brussels Meetup #3 - Testing your Ember.js app
byyoranbe
 
Introduction to ember js
byAdnan Arshad
 
Ember App Kit & The Ember Resolver
bytboyt
 
Ember.js for a CakePHP Developer
byjtrapp07
 
Ember.js Meetup Brussels 31/10/2013
byHstry
 
Modern, Scalable, Ambitious apps with Ember.js
byMike North
 
Riding the Edge with Ember.js
byaortbals
 
Intro to Ember.js
byJay Phelps
 
From Backbone to Ember and Back(bone) Again
byjonknapp
 
Developing Single Page Apps with Ember.js
byLeo Hernandez
 
State of Ember.js - This.JavaScript November 2018
byAmy Lam
 
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
byTobias Braner
 
Delivering with ember.js
byAndrei Sebastian Cîmpean
 

More from Matthew Beale

PDF
Ember.js Module Loading
byMatthew Beale
 
PDF
LA Ember.js Meetup, Jan 2017
byMatthew Beale
 
PDF
Interoperable Component Patterns
byMatthew Beale
 
PDF
Ember Community 2016 - Be the Bark
byMatthew Beale
 
PDF
Attribute actions
byMatthew Beale
 
PDF
The Hidden Power of HTMLBars (or, Scope in Ember.js Templates)
byMatthew Beale
 
PDF
Aligning Ember.js with Web Standards
byMatthew Beale
 
PDF
New Component Patterns in Ember.js
byMatthew Beale
 
PDF
Scalable vector ember
byMatthew Beale
 
PDF
Parse Apps with Ember.js
byMatthew Beale
 
PDF
Snappy Means Happy: Performance in Ember Apps
byMatthew Beale
 
PDF
Client-side Auth with Ember.js
byMatthew Beale
 
PDF
Complex Architectures in Ember
byMatthew Beale
 
Ember.js Module Loading
byMatthew Beale
 
LA Ember.js Meetup, Jan 2017
byMatthew Beale
 
Interoperable Component Patterns
byMatthew Beale
 
Ember Community 2016 - Be the Bark
byMatthew Beale
 
Attribute actions
byMatthew Beale
 
The Hidden Power of HTMLBars (or, Scope in Ember.js Templates)
byMatthew Beale
 
Aligning Ember.js with Web Standards
byMatthew Beale
 
New Component Patterns in Ember.js
byMatthew Beale
 
Scalable vector ember
byMatthew Beale
 
Parse Apps with Ember.js
byMatthew Beale
 
Snappy Means Happy: Performance in Ember Apps
byMatthew Beale
 
Client-side Auth with Ember.js
byMatthew Beale
 
Complex Architectures in Ember
byMatthew Beale
 

Recently uploaded

PDF
Parental Control App for Phones_ The Complete 2026 Guide for Safer, Smarter P...
byRyan Cooper
 
PDF
Chapter 4 Network Security in computer security
byGetnet Tigabie Askale -(GM)
 
PDF
Writing GPU-Ready AI Models in Pure Java with Babylon
byAna-Maria Mihalceanu
 
PPTX
Beyond the Algorithm: Designing Human-Centric Public Service with AI
byAlan Dix
 
PDF
How to build hackthon projects from ZERO!
byishantyadav1111
 
PDF
UiPath Automation Developer Associate Training Series 2026 - Session 2
byDianaGray10
 
PPTX
Career-Opportunities in Industrial Arts Grade 8 PPT Lesson 2
byFSBTLEDNathanVince
 
PDF
CI CD Observability, Metrics and DORA - Shifting Left and Cleaning Up! - Febr...
byPeter Souter
 
PPTX
TechSprint Inauguration at SJB Institute of Technology held on 18 December 2025
bysuhasspgdg
 
PPTX
2026 SCORM Troubleshooting Rustici + dominKnow.pptx
byRustici Software
 
PDF
AI and Zero Trust: What it takes to do it right
byMark Simos
 
PDF
TrustArc Webinar - From Zero to Privacy Hero: Launching Your Program Right an...
byTrustArc
 
PDF
Supercharge Your Copilot-Driven Collaboration with Microsoft 365 Agents SDK
byAntti Koskela
 
PDF
Track Phone Location via Number (2026)_ What Actually Works, What’s a Scam, a...
byEmily Woods
 
PDF
Startup Formation Collapses While Acquisition Activity Hits New High!
byMemoori
 
PDF
What Is the Azure AI Foundry and Why Does It Matter for Enterprises?
byjohncarterjn
 
PPTX
TechSprint (SJBIT) 2025-26 Hackathon Winners & Awards Ceremony
bysuhasspgdg
 
PDF
OpenCharacter AI Reviews: Features, Plans, and Best Alternative
byOpenCharacter AI
 
PDF
ICT500 - CRITICAL AND CREATIVE THINKING FOR INFORMATION TECHNOLOGY SOLUTIONS:...
by2024432452
 
PDF
Computer-Based Training (CBT) The Backbone of Modern Technical & Defence Trai...
bycomputerbasedtrainin1
 
Parental Control App for Phones_ The Complete 2026 Guide for Safer, Smarter P...
byRyan Cooper
 
Chapter 4 Network Security in computer security
byGetnet Tigabie Askale -(GM)
 
Writing GPU-Ready AI Models in Pure Java with Babylon
byAna-Maria Mihalceanu
 
Beyond the Algorithm: Designing Human-Centric Public Service with AI
byAlan Dix
 
How to build hackthon projects from ZERO!
byishantyadav1111
 
UiPath Automation Developer Associate Training Series 2026 - Session 2
byDianaGray10
 
Career-Opportunities in Industrial Arts Grade 8 PPT Lesson 2
byFSBTLEDNathanVince
 
CI CD Observability, Metrics and DORA - Shifting Left and Cleaning Up! - Febr...
byPeter Souter
 
TechSprint Inauguration at SJB Institute of Technology held on 18 December 2025
bysuhasspgdg
 
2026 SCORM Troubleshooting Rustici + dominKnow.pptx
byRustici Software
 
AI and Zero Trust: What it takes to do it right
byMark Simos
 
TrustArc Webinar - From Zero to Privacy Hero: Launching Your Program Right an...
byTrustArc
 
Supercharge Your Copilot-Driven Collaboration with Microsoft 365 Agents SDK
byAntti Koskela
 
Track Phone Location via Number (2026)_ What Actually Works, What’s a Scam, a...
byEmily Woods
 
Startup Formation Collapses While Acquisition Activity Hits New High!
byMemoori
 
What Is the Azure AI Foundry and Why Does It Matter for Enterprises?
byjohncarterjn
 
TechSprint (SJBIT) 2025-26 Hackathon Winners & Awards Ceremony
bysuhasspgdg
 
OpenCharacter AI Reviews: Features, Plans, and Best Alternative
byOpenCharacter AI
 
ICT500 - CRITICAL AND CREATIVE THINKING FOR INFORMATION TECHNOLOGY SOLUTIONS:...
by2024432452
 
Computer-Based Training (CBT) The Backbone of Modern Technical & Defence Trai...
bycomputerbasedtrainin1
 

Testing Ember Apps: Managing Dependency

  • 1.
    Testing Ember.js Apps Managing Dependency
  • 2.
  • 3.
  • 4.
  • 5.
    201 Created Webuild õ-age apps with Ember.js. We take teams from £ to • in no time flat.
  • 6.
  • 7.
    A conference planningapp • Submitting a talk • Purchasing a ticket • Preparing a talk
  • 8.
    • Submitting atalk • Purchasing a ticket • Preparing a talk The domain A conference planning app
  • 9.
    A conference planningapp • Submitting a talk • Purchasing a ticket • Preparing a talk
  • 10.
    A conference planningapp • Adapting to a server • Managing asynchronous APIs • Browser APIs • Submitting a talk • Purchasing a ticket • Preparing a talk ᗜੂͦ﹏ᗜੂͦ
  • 11.
    A conference planningapp • Adapting to a server • Managing asynchronous APIs • Browser APIs • Submitting a talk • Purchasing a ticket • Preparing a talk The domain
  • 12.
    A conference planningapp What is this?! • Adapting to a server • Managing asynchronous APIs • Browser APIs • Submitting a talk • Purchasing a ticket • Preparing a talk ᗜੂͦ﹏ᗜੂͦ
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
    Ember-CLI Review 1// app/utils/some-object.js! 2 export default SomeObject;! 3 export default Ember.Route.extend({! 4 });! 5 ! 6 import MyObject from "app/utils/some-object";! 7 ! 8 // app/utils/many-things.js! 9 export {gadget, anotherGadget};! 10 ! 11 import {anotherGadget} from "app/utils/many-things";! 12 ! 13 // tests/routes/proposal-test.js! 14 moduleFor("route:routeName", "Test Module Name", {! 15 // options include: needs, subject, setup, teardown! 16 });!
  • 18.
    Constraining Dependencies 1.Isolate implementation 2. Normalize behavior
  • 19.
    Constraining a dependency 1 // app/route/proposal.js! 2 import Proposal from "../model/proposal";! 3 ! 4 export default Ember.Route.extend({! 5 ! 6 model: function(){! 7 var recovered = window.localStorage.getItem('proposalSnapshot');! 8 if (recovered) {! 9 return Proposal.load(recovered);! 10 } else {! 11 return Proposal.build();! 12 }! 13 }! 14 ! 15 });!
  • 20.
    Constraining a dependencyImplementation 1 // app/route/proposal.js! 2 import Proposal from "../model/proposal";! 3 ! 4 export default Ember.Route.extend({! 5 ! 6 model: function(){! 7 var recovered = window.localStorage.getItem('proposalSnapshot');! 8 if (recovered) {! 9 return Proposal.load(recovered);! 10 } else {! 11 return Proposal.build();! 12 }! 13 }! 14 ! 15 });!
  • 21.
    Implementation Constraining adependency 1 // app/route/proposal.js! 2 import Proposal from "../model/proposal";! 3 ! 4 export default Ember.Route.extend({! 5 ! 6 model: function(){! 7 var recovered = window.localStorage.getItem('proposalSnapshot');! 8 if (recovered) {! 9 return Proposal.load(recovered);! 10 } else {! 11 return Proposal.build();! 12 }! 13 }! 14 ! 15 });! Synchronous behavior
  • 22.
    Constraining a dependency app/route/proposal model lookup localStorage sync behavior
  • 23.
    Constraining a dependency app/route/proposal model lookup app/utils/recovery-store localStorage sync behavior
  • 24.
    Constraining a dependency 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });!
  • 25.
    Constraining a dependency Isolated in recoveryStore 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });!
  • 26.
    Constraining a dependency Isolated in recoveryStore 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });! Normalize sync and async
  • 27.
    Using a synchronousPromise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });!
  • 28.
    Using a synchronousPromise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });! Using an asynchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });!
  • 29.
    Constraining a dependency 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 resolve(window.localStorage.getItem(key));! 7 });! 8 }! 9 });! localStorage
  • 30.
    Constraining a dependency 1 // app/utils/recovery-store.js! 2 ! 3 export default Ember.Object.extend({! 4 recover: function(key){! 5 return new Ember.RSVP.Promise(function(resolve, reject){! 6 Ember.$.ajax("GET", "/recovery/"+key, {dataType: 'json'}, {! 7 success: Ember.run.bind(this, function(data){! 8 resolve(data);! 9 })! 10 });! 11 });! 12 }! 13 });! AJAX!
  • 31.
    Using a synchronousPromise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });! Using an asynchronous Promise 1 import RecoveryStore from "app/utils/recovery-store";! 2 ! 3 var recoveryStore = new RecoveryStore();! 4 recoveryStore.recover('proposalSnapshot').then(function(data){! 5 console.log('recovering ', data);! 6 });!
  • 32.
  • 33.
    Mocking a dependencyin units 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 recoveryStore: function(){! 8 return new RecoveryStore();! 9 }.property(),! 10 ! 11 model: function(){! 12 return this.get('recoveryStore').recover('proposalSnapshot').! 13 then(function(data){! 14 if (data) {! 15 return Proposal.load(data);! 16 } else {! 17 return Proposal.build();! 18 }! 19 });! 20 }! 21 ! 22 });!
  • 34.
    Mocking a dependencyin units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 moduleFor('route:proposal', 'ProposalRoute');! 4 ! 5 test('recovers a proposal', function() {! 6 expect(1);! 7 window.localStorage.setItem('proposalSnapshot', {body: 'pitch Angular'});! 8 var route = this.subject();! 9 return route.model().then(function(proposal){! 10 ok(proposal.get('body'), 'pitch Angular');! 11 });! 12 });!
  • 35.
    Mocking a dependencyin units Implementation Leak 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 moduleFor('route:proposal', 'ProposalRoute');! 4 ! 5 test('recovers a proposal', function() {! 6 expect(1);! 7 window.localStorage.setItem('proposalSnapshot', {body: 'pitch Angular'});! 8 var route = this.subject();! 9 return route.model().then(function(proposal){! 10 ok(proposal.get('body'), 'pitch Angular');! 11 });! 12 });! ͟͞͞ ⌨ (۶ૈ ᵒ̌ Дᵒ̌)۶ૈ=͟
  • 36.
    Mocking a dependencyin units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 var mockRecoveryStore = { recover: function(){! 4 return new Ember.RSVP.Promise(function(resolve){! 5 resolve(Ember.Object.create({body: 'pitch Angular'}));! 6 });! 7 } };! 8 ! 9 moduleFor('route:proposal', 'ProposalRoute');! 10 ! 11 test('recovers a proposal', function() {! 12 expect(1);! 13 var route = this.subject({recoveryStore: mockRecoveryStore});! 14 return route.model().then(function(proposal){! 15 ok(proposal.get('body'), 'pitch Angular');! 16 });! 17 });!
  • 37.
    Mocking a dependencyin units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 var mockRecoveryStore = { recover: function(){! 4 return new Ember.RSVP.Promise(function(resolve){! 5 resolve(Ember.Object.create({body: 'pitch Angular'}));! 6 });! 7 } };! 8 ! 9 moduleFor('route:proposal', 'ProposalRoute', {! 10 subject: function(options, klass, container){! 11 return klass.create(Ember.merge({! 12 recoveryStore: mockRecoveryStore! 13 }, options));! 14 }! 15 });! 16 ! 17 test('recovers a proposal', function() {! 18 expect(1);! 19 var route = this.subject();! 20 return route.model().then(function(proposal){! 21 ok(proposal.get('body'), 'pitch Angular');! 22 });! 23 });!
  • 38.
    Mocking a dependencyin units 1 import { test, moduleFor } from 'ember-qunit';! 2 ! 3 var mockRecoveryStore = { recover: function(){! 4 return new Ember.RSVP.Promise(function(resolve){! 5 resolve(Ember.Object.create({body: 'pitch Angular'}));! 6 });! 7 } };! 8 ! 9 moduleFor('route:proposal', 'ProposalRoute', {! 10 subject: function(options, klass, container){! 11 return klass.create(Ember.merge({! 12 recoveryStore: mockRecoveryStore! 13 }, options));! 14 }! 15 });! 16 ! 17 test('recovers a proposal', function() {! 18 expect(1);! ✓ 19 var route = this.subject();! 20 return route.model().then(function(proposal){! 21 ok(proposal.get('body'), 'pitch Angular');! 22 });! 23 });!
  • 39.
    Why is thiscode good?
  • 40.
    Why is thiscode good? Well Gary Bernhardt sez… Three goals of testing
  • 41.
    Why is thiscode good? Well Gary Bernhardt sez… #1: Prevent regressions #2: Prevent fear #3: Prevent bad design
  • 42.
    Why is thiscode good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear #3: Prevent bad design
  • 43.
    Why is thiscode good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear ✓ #3: Prevent bad design
  • 44.
    Why is thiscode good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear ✓✓Is fast! #3: Prevent bad design
  • 45.
    Why is thiscode good? Well Gary Bernhardt sez… #1: Prevent regressions✓ #2: Prevent fear ✓ ✓ #3: Prevent bad design ᕕ( ᐛ )ᕗ ✓Is fast!
  • 46.
  • 47.
    Mocking a dependencyin acceptance 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 recoveryStore: function(){! 8 return new RecoveryStore();! 9 }.property(),! 10 ! 11 model: function(){! 12 return this.get('recoveryStore').recovery('proposalSnapshot').! 13 then(function(data){! 14 if (data) {! 15 return Proposal.load(data);! 16 } else {! 17 return Proposal.build();! 18 }! 19 });! 20 }! 21 ! 22 });!
  • 48.
    Mocking a dependencyin acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 ! 6 var App;! 7 ! 8 module('Acceptance: Proposal', {! 9 setup: function() {! 10 App = startApp();! 11 },! 12 teardown: function() {! 13 Ember.run(App, 'destroy');! 14 }! 15 });! 16 ! 17 test('visiting /proposal', function() {! 18 visit('/proposal');! 19 ! 20 andThen(function() {! 21 equal(currentPath(), 'proposal');! 22 });! 23 });!
  • 49.
    Mocking a dependencyin acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 ! 6 var App;! 7 ! 8 module('Acceptance: Proposal', {! 9 setup: function() {! 10 App = startApp();! 11 },! 12 teardown: function() {! 13 Ember.run(App, 'destroy');! 14 }! 15 });! 16 ! 17 test('visiting /proposal', function() {! 18 visit('/proposal');! 19 ! 20 andThen(function() {! 21 equal(currentPath(), 'proposal');! 22 });! 23 });! Where can we mock recoveryStore?
  • 50.
    Mocking a dependencyin acceptance 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 recoveryStore: function(){! 8 return new RecoveryStore();! 9 }.property(),! 10 ! 11 model: function(){! 12 return this.get('recoveryStore').recovery('proposalSnapshot').! 13 then(function(data){! 14 return Proposal.load(data);! 15 }, function(){! 16 return Proposal.build();! 17 });! 18 }! 19 ! 20 });! “Dependency Lookup”
  • 51.
    Dependency Lookup 1var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();!
  • 52.
    Dependency Lookup 1var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Gadget is in charge
  • 53.
    Dependency Lookup 1var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Dependency Injection 1 var Gadget = Ember.Object.create({! 2 });! 3 ! 4 function buildGadget(){! 5 return Gadget.create({! 6 shelf: Shelf.create()! 7 });! 8 }!
  • 54.
    Dependency Lookup 1var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Dependency Injection 1 var Gadget = Ember.Object.create({! 2 });! 3 ! 4 function buildGadget(){! 5 return Gadget.create({! 6 shelf: Shelf.create()! 7 });! 8 }! Gadget’s dependency is injected
  • 55.
    Dependency Lookup 1var Gadget = Ember.Object.create({! 2 shelf: function(){! 3 return Shelf.create();! 4 }! 5 });! 6 ! 7 Gadget.create();! Dependency Injection / Inversion of Control 1 var Gadget = Ember.Object.create({! 2 });! 3 ! 4 function buildGadget(){! 5 return Gadget.create({! 6 shelf: Shelf.create()! 7 });! 8 }!
  • 56.
    Converting “Dependency Lookup”to “Dependency Injection” 1. Create an initializer 2. Register the dependency 3. Inject the dependency 4. Drop the lookup
  • 57.
    Converting “Dependency Lookup”to “Dependency Injection” Create an initializer 1 // app/initializers/recovery-store.js! 2 ! 3 import RecoveryStore from "../utils/recovery-store";! 4 ! 5 export default {! 6 name: 'recovery-store',! 7 initialize: function(container, application) {! 8 application.register('services:recoveryStore', RecoveryStore);! 9 application.inject('route', 'recoveryStore', 'services:recoveryStore');! 10 }! 11 };!
  • 58.
    Converting “Dependency Lookup”to “Dependency Injection” 1 // app/initializers/recovery-store.js! 2 ! 3 import RecoveryStore from "../utils/recovery-store";! 4 ! 5 export default {! 6 name: 'recovery-store',! 7 initialize: function(container, application) {! 8 application.register('services:recoveryStore', RecoveryStore);! 9 application.inject('route', 'recoveryStore', 'services:recoveryStore');! 10 }! 11 };! Register the dependency
  • 59.
    Converting “Dependency Lookup”to “Dependency Injection” 1 // app/initializers/recovery-store.js! 2 ! 3 import RecoveryStore from "../utils/recovery-store";! 4 ! 5 export default {! 6 name: 'recovery-store',! 7 initialize: function(container, application) {! 8 application.register('services:recoveryStore', RecoveryStore);! 9 application.inject('route', 'recoveryStore', 'services:recoveryStore');! 10 }! 11 };! Inject the dependency
  • 60.
    Converting “Dependency Lookup”to “Dependency Injection” 1 // app/route/proposal.js! 2 import RecoveryStore from "../utils/recovery-store";! 3 import Proposal from "../model/proposal";! 4 ! 5 export default Ember.Route.extend({! 6 ! 7 model: function(){! 8 return this.recoveryStore.recover('proposalSnapshot').! 9 then(function(data){! 10 return Proposal.load(data);! 11 }, function(){! 12 return Proposal.build();! 13 });! 14 }! 15 ! 16 });! Drop the lookup
  • 61.
    Mocking a dependencyin acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 import mockRecoveryStore from '../helpers/mock-recovery-store';! 6 ! 7 var App;! 8 ! 9 module('Acceptance: Proposal', {! 10 setup: function() {! 11 App = startApp();! 12 // unregister is not yet a first-class API :-/! 13 App.__container__.unregister('services:recoveryStore');! 14 App.register('services:recoveryStore', mockRecoveryStore, {! 15 instantiate: false });! 16 },! 17 teardown: function() {! 18 Ember.run(App, 'destroy');! 19 }! 20 });! 21 ! 22 test('visiting /proposal', function() {! 23 visit('/proposal');! 24 ! 25 andThen(function() {! 26 equal(currentPath(), 'proposal');! 27 });! 28 });! Unregister the normal recoveryStore
  • 62.
    Mocking a dependencyin acceptance 1 // tests/acceptance/proposal-test.js! 2 ! 3 import Ember from 'ember';! 4 import startApp from '../helpers/start-app';! 5 import mockRecoveryStore from '../helpers/mock-recovery-store';! 6 ! 7 var App;! 8 ! 9 module('Acceptance: Proposal', {! 10 setup: function() {! 11 App = startApp();! 12 // unregister is not yet a first-class API :-/! 13 App.__container__.unregister('services:recoveryStore');! 14 App.register('services:recoveryStore', mockRecoveryStore, {! 15 instantiate: false });! 16 },! 17 teardown: function() {! 18 Ember.run(App, 'destroy');! 19 }! 20 });! 21 ! 22 test('visiting /proposal', function() {! 23 visit('/proposal');! 24 ! 25 andThen(function() {! 26 equal(currentPath(), 'proposal');! 27 });! 28 });! Register the mockRecoveryStore
  • 63.
    #1: Prevent regressions #2: Prevent fear #3: Prevent bad design ᕕ( ᐛ )ᕗ ✓ ✓ ✓ ✓Is fast! Why is this code good?
  • 64.
    STOP IT WITH ALL THE CODE (ﾉಥ益ಥ）ﾉ ┻━┻
  • 65.
    Starting points: ember-cli.com emberjs.com/guides/testing github.com/rwjblue/ember-qunit emberjs.com/api/classes/Ember.Test.html
  • 66.
    Starting points: wikipedia.org/wiki/Inversion_of_control www.martinfowler.com/articles/injection.html
  • 67.
    Own your dependencies Contain their APIs
  • 68.
    Own your dependencies Design better code with better tests
  • 69.