test like a pro with ember.js
TRANSCRIPT
![Page 1: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/1.jpg)
Test like a pro
Mike North - Silicon Valley Ember.js Meetup - April 30, 2015
![Page 2: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/2.jpg)
@MichaelLNorth2
Mike North
![Page 3: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/3.jpg)
@MichaelLNorth
The Plan
3
Testing Basics
Test types
Test technology
Testing with Ember
Test helpers
Simulating an API
Lessons learned @
Yahoo
Test Automation
Continuous Integration
Cross-Device testing
![Page 4: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/4.jpg)
Testing Basics
![Page 5: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/5.jpg)
@MichaelLNorth
Unit tests
5
Fast & Focused
Isolated
Excellent at testing
“algorithmic complexity”
Functional tests
(a.k.a. “acceptance tests)
Test behavior in context
Simulate user behavior
Often based on specs or
acceptance criteria
Integration tests
Ensure that contracts at
integration points stay in
place
NOT functional tests
“End to end test”
Check for multi-
component system
integrity
Usually very slow
![Page 6: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/6.jpg)
@MichaelLNorth
Test types - how to test a….
6
Algorithm Unit Test
Acceptance Criteria Acceptance/Functional Test
Workflow Acceptance/Functional Test
Contract between two
components
Integration test
Total System Integrity “End to end” test
![Page 7: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/7.jpg)
Testing with Ember
![Page 8: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/8.jpg)
8
Testing with Ember - QUnit Modules
import Ember from 'ember';
import startApp from '../../tests/helpers/start-
app';
import { test } from 'ember-qunit';
var App;
module('Acceptance - Loader', {
beforeEach() { App = startApp(); },
afterEach() { Ember.run(App, 'destroy'); }
});
test("Load the page I'm testing", assert => {
visit('/loader');
assert.equal(Ember.$('.loader').length, 0,
'No loader showing');
click('.stop-loader-button');
andThen(() => {
assert.equal(Ember.$('.loader').length, 0,
'No loader showing');
});
});
per-test setup
and teardown
hooks
![Page 9: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/9.jpg)
9
Testing with Ember - ember-test-helpers modules
moduleFor(name [, description [, callbacks]])
moduleForModel( … )
moduleForComponent( … )
• Setup an empty container to unit test in isolation
• Set context of view, so bindings work
moduleForComponent('my-tabs', {
needs: ['component:my-tab']
});
![Page 10: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/10.jpg)
@MichaelLNorth
Testing with Ember - Integration Test Helpers
10
visit(url)
fillIn(selector, text)
click(selector)
keyEvent(sel, type, key)
triggerEvent(sel, type, opts)
find(selector, content)
currentPath()
currentRouteName()
currentURL()
Async Sync
![Page 11: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/11.jpg)
@MichaelLNorth
An example
11
Router.map(() => {
this.resource('lists', () => {
this.route('index', {path: '/'});
});
this.resource('list', {path: 'list/:id'}, () => {
this.route('show', {path: '/'});
});
});
router.js
![Page 12: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/12.jpg)
@MichaelLNorth
Steps
Testing with Ember - Integration Test Helpers - Async
12
test('Drilling into a shopping list from the index page', assert => {
visit('/lists');
andThen(() => {
assert.equal(
currentURL(), ‘/lists',
'Should be at the index page’
);
assert.equal(
find('.list-of-lists .list-item').length, 2,
'Two shopping lists are in the index’
);
});
click('.list-of-lists .list-item:nth-child(1)');
andThen(() => {
assert.equal(currentURL(), ‘/list/1’,
'Showing the first shopping list’
);
});
console.log('Hello world!');
});
![Page 13: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/13.jpg)
@MichaelLNorth
Testing with Ember - Simulating an API
13
trek/fakehr trek/pretender
• Resolve a pending request • Set up a fake “server”
/api/lines
/api/items?ids[]=1&ids[]=2&ids[]=3
"items": [
{"id": 1, "name": "Apple", "list": 1},
{"id": 2, "name": "Pear", "list": 1},
{"id": 3, "name": "Grape", "list": 1}
]
"lists": [
{"id": 1, "name": "Fruit", "items": [1, 2, 3]},
{"id": 2, "name": "Vegetables", "items": [4, 5, 6]}
]
![Page 14: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/14.jpg)
@MichaelLNorth
Testing with Ember - Simulating an API
14
trek/fakehr trek/pretender
![Page 15: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/15.jpg)
@MichaelLNorth
Testing with Ember - Simulating an API
15
/api/lines
/api/lines/1/items
trek/fakehr
![Page 16: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/16.jpg)
Continuous Integration
![Page 17: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/17.jpg)
@MichaelLNorth
Continuous Integration
17
Clone
Checkout
before_install
install
before_script
script
after_success after_failure
after_scriptnpm install; bower
install
ember test ci
setup phantomjs
2.0
mark PR
“ok”
mark PR
“failed”
![Page 18: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/18.jpg)
@MichaelLNorth
Continuous Integration
w/ ember-try
18
kategengler/ember-try
env:
matrix:
- EMBER_TRY_SCENARIO=default
- EMBER_TRY_SCENARIO=ember-release
- EMBER_TRY_SCENARIO=ember-beta
- EMBER_TRY_SCENARIO=ember-canary
.travis.yml
matrix:
fast_finish: true
allow_failures:
- env: EMBER_TRY_SCENARIO=ember-canary
Build has passed, but this is still running!
![Page 19: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/19.jpg)
@MichaelLNorth
Cross-Device Testing
w/ ember-cli-sauce
19
johanneswuerbach/ember-cli-sauce
![Page 20: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/20.jpg)
@MichaelLNorth
Cross-Device Testing
w/ ember-cli-sauce
20
PROTIP: You may need to fiddle with
testem port and/or hostname to get OS X
working
{
"framework": "qunit",
"host": "lvh.me",
"port": "7000",
"test_page": "tests/index.html?hidepassed",
...
}
![Page 21: Test like a pro with Ember.js](https://reader034.vdocuments.site/reader034/viewer/2022042716/55aa3a9b1a28ab0a2a8b46ae/html5/thumbnails/21.jpg)
@MichaelLNorth21
$0
for open
source