Test like a pro with Ember.js

A primer in JavaScript testing, including some great travis-ci and saucelabs tips!

Transcript

1. Test like a pro Mike North - Silicon Valley Ember.js Meetup - April 30, 2015
2. @MichaelLNorth 2 Mike North
3. @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
4. Testing Basics
5. @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
6. @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
7. Testing with Ember
8. 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
9. 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'] });
10. @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
11. @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
12. @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!'); });
13. @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]} ]
14. @MichaelLNorth Testing with Ember - Simulating an API 14 trek/fakehr trek/pretender
15. @MichaelLNorth Testing with Ember - Simulating an API 15 /api/lines /api/lines/1/items trek/fakehr
16. Continuous Integration
17. @MichaelLNorth Continuous Integration 17 Clone Checkout before_install install before_script script after_success after_failure after_script npm install; bower install ember test ci setup phantomjs 2.0 mark PR “ok” mark PR “failed”
18. @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!
19. @MichaelLNorth Cross-Device Testing w/ ember-cli-sauce 19 johanneswuerbach/ember-cli-sauce
20. @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", ... }
21. @MichaelLNorth 21 $0 for open source