Testing Tools and Patterns for JavaScript Mapping Applications
Dave Bouwman - @dbouwman Tom Wayson - @TomWayson
Functional vs. Unit Testing
write code to test code. function adder(a, b){ return a + b; } aaronvandike/2340197774 writing tests describe(“resultModel”, function(){
it(‘fetches’, function(){
expect(m.isFetched).toBe(true);
}); }); Describe “resultModel” suite it “fetches itself” spec expect m.isFetched toBe true assertion “matcher” toBeDefined, toBeNull, toEqual, toBeTruthy, toHaveClass, toHaveBeenCalled, toContain +100 Describe “resultModel”
beforeEach setup afterEach teardown
it “fetches itself”
expect m.isFetched toBe true create objects fill with test data (json fixtures*) setup DOM (HTML fixtures*)
*framework dependent Describe “resultModel”
beforeEach setup afterEach teardown
it “fetches itself”
expect m.isFetched toBe true Describe “resultModel” beforeEach //setup
afterEach //tear down general
Describe “with Criteria” beforeEach //setup
afterEach //tear down specific
it “some condition”
expect true toBe true
it “some condition”
expect red toBe red why bother?
emoneytg/2953507378 1. ______2. code is correct 3. catch regression 1. drive code structure 2. code is correct 3. catch regression average application… architecturally… you can make this work…
24258698@N04/37656086 rules for 4 super tests write high value tests test only your code test one thing at a time refactor ruthlessly
$.ajax({…}) $.ajax({…})
“success”
“error”
test our code! $.ajax({…})
“success”
“error” $.ajax({…})
“success”
“error”
“logic” “logic”
“action” 1
2 “logic”
3 “action”
4 test one thing! 1
2 3 “logic with calls” 4
1
2
3 “action functions”
4 1
2 “high-value” tests 3 focus on the “logic” 4
1 given a,b,c… 2 was fn x called with a,c? did fn x call fn y with c? 3
4 1 2 testing logic 3 4
1
2 spies & fakes!
3
4 1 2 testing logic 3 4
1
2 spies & fakes!
3
4 24258698@N04/37656086 Use a framework Picking a [JS] Framework 3 Hours ago in this room Friday 1pm Primrose B map polymer Separation of Concerns Controllers Application Event Bus App.trigger(…) App.on(…) App.off(…)
map Map Controller
mapController
map spies & fakes!
mapController
map Symbiotic Relationship Writing tests makes your code better. Writing tests makes you code better. Testable code is more modular. Testable code is more understandable. Testable code is more robust. Testable code is more reusable. frameworkscode
kk/7022179049
Reporter
Runner
Assertion Library
Framework Utility Which is rightcode for me?
Well, that depends… kk/7022179049 Esri Professional Services Web Apps not APIs Isolate our code via spies and fakes JSAPI (CDN hosted) AMD required Enterprisy Clients Test in IE, cloud is not an option Varying testing experience on the team Tests must run automatically, fast, reliably, and silently unless they fail
ryantron/4453018910 Write Tests
Tests Pass Tests Fail
Refactor Write Code
Tests Pass > npm install -g karma-cli > cd my-project > npm install karma > npm install karma-[plugin]
istanbul Sinon.JS
sookie/101363593 > npm install karma-dojo > subl spec/main.js > karma start https://github.com/tomwayson/esri-karma-tutorial /eole/3215868087 automation automatically… check syntax… run active tests… check for regression… report coverage… SpecRunner.html load in browser …tests run… results. 24258698@N04/37656086 node task runner productivity power-tools watch jshint jasmine (via karma) gulpfile.js runner.tmpl underscore.js SpecRunner.html load in phantom …tests run… results in console Tests for the code you are actively active working. (fail fast)
Non-Map, Non-Async tests that run 100% locally. Used for TravisCI fast (builds)
All the test specs. Run automatically all after active passes. Coverage reports 24258698@N04/37656086 Don’t Test the Map 24258698@N04/37656086 Separation of Concerns “controller” Separation of Concerns “controller” Test the Map Controller Map Tests: are slow(er) usually async need a harness need dojo gulpfile.js runner.tmpl underscore.js SpecRunner.html load in phantom …tests run… results in console
http://blog.davebouwman.com/?s=coverage Example Project github.com/mjuniper/OpenData- Backbone write good code
wili/242263471 write good tests
kk/5262078254 github.com/mjuniper/OpenData-Backbone Rate This Session www.esri.com/RateMyDevSummitSession github.com/mjuniper/OpenData-Backbone