testing tools and patterns for javascript mapping applications › library › userconf ›...
TRANSCRIPT
![Page 1: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/1.jpg)
Dave Bouwman - @dbouwmanTom Wayson - @TomWayson
Testing Tools and Patterns for JavaScript Mapping Applications
![Page 2: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/2.jpg)
![Page 3: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/3.jpg)
Functional vs. Unit Testing
![Page 4: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/4.jpg)
![Page 5: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/5.jpg)
![Page 6: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/6.jpg)
write codeto test code.
![Page 7: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/7.jpg)
![Page 8: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/8.jpg)
function adder(a, b){return a + b;
}
![Page 9: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/9.jpg)
![Page 10: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/10.jpg)
aaronvandike/2340197774
![Page 11: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/11.jpg)
writingtests
![Page 12: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/12.jpg)
describe(“resultModel”, function(){
it(‘fetches’, function(){
expect(m.isFetched).toBe(true);
});});
![Page 13: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/13.jpg)
Describe “resultModel”
it “fetches itself”
expect m.isFetched toBe true
suitespecassertion
“matcher”toBeDefined, toBeNull, toEqual, toBeTruthy,toHaveClass, toHaveBeenCalled, toContain
+100
![Page 14: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/14.jpg)
Describe “resultModel”
beforeEach
afterEach
it “fetches itself”
expect m.isFetched toBe true
setupteardown
![Page 15: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/15.jpg)
create objectsfill with test datasetup DOM
*framework dependent
(json fixtures*)(HTML fixtures*)
![Page 16: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/16.jpg)
Describe “resultModel”
beforeEach
afterEach
it “fetches itself”
expect m.isFetched toBe true
setupteardown
![Page 17: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/17.jpg)
Describe “resultModel”
beforeEach //setup
afterEach //tear down
it “some condition”
expect true toBe true
Describe “with Criteria”
beforeEach //setup
afterEach //tear down
it “some condition”
expect red toBe red
general
specific
![Page 18: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/18.jpg)
![Page 20: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/20.jpg)
1. _________________2. code is correct3. catch regression
![Page 21: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/21.jpg)
1. drive code structure2. code is correct3. catch regression
![Page 22: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/22.jpg)
average application…
![Page 23: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/23.jpg)
architecturally…
![Page 24: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/24.jpg)
![Page 25: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/25.jpg)
you can make this work…
![Page 26: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/26.jpg)
![Page 27: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/27.jpg)
24258698@N04/37656086
![Page 28: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/28.jpg)
4rulesforsupertests
![Page 29: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/29.jpg)
writehigh value
tests
![Page 30: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/30.jpg)
test only your code
![Page 31: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/31.jpg)
test one thing at a time
![Page 32: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/32.jpg)
refactorruthlessly
![Page 33: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/33.jpg)
![Page 34: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/34.jpg)
$.ajax({…})
![Page 35: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/35.jpg)
“success”
“error”
$.ajax({…})
test our code!
![Page 36: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/36.jpg)
“success”
“error”
$.ajax({…})
![Page 37: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/37.jpg)
“success”
“error”
$.ajax({…})
![Page 38: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/38.jpg)
![Page 39: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/39.jpg)
“logic”
![Page 40: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/40.jpg)
“logic”
“action”
![Page 41: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/41.jpg)
1
2
3
4
“logic”
“action”
test one thing!
![Page 42: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/42.jpg)
1
2
3
4
“logic with calls”
“action functions”
1
2
3
4
![Page 43: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/43.jpg)
1
2
3
4
“high-value” tests
given a,b,c…was fn x called with a,c?did fn x call fn y with c?
1
2
3
4focus on the “logic”
![Page 44: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/44.jpg)
1
2
3
4
testing logic
spies & fakes!
1
2
3
4
![Page 45: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/45.jpg)
1
2
3
4
testing logic
spies & fakes!
1
2
3
4
![Page 46: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/46.jpg)
24258698@N04/37656086
![Page 47: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/47.jpg)
Use a framework
![Page 48: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/48.jpg)
Picking a [JS] Framework3 Hours ago in this roomFriday 1pm Primrose B
![Page 49: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/49.jpg)
map
![Page 50: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/50.jpg)
polymer
![Page 51: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/51.jpg)
Separation of Concerns
![Page 52: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/52.jpg)
Controllers
![Page 53: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/53.jpg)
Application
![Page 54: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/54.jpg)
App.on(…)
map
App.trigger(…)Event Bus
App.off(…)
![Page 55: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/55.jpg)
map
Map Controller
mapController
![Page 56: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/56.jpg)
map
mapController
spies & fakes!
![Page 57: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/57.jpg)
Symbiotic Relationship
![Page 58: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/58.jpg)
Writing tests makes your code better.
![Page 59: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/59.jpg)
Writing tests makes you code better.
![Page 60: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/60.jpg)
Testable code is more modular.
![Page 61: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/61.jpg)
Testable code is more understandable.
![Page 62: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/62.jpg)
Testable code is more robust.
![Page 63: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/63.jpg)
Testable code is more reusable.
![Page 64: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/64.jpg)
codeframeworks
kk/7022179049
![Page 65: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/65.jpg)
![Page 66: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/66.jpg)
Framework
Assertion Library
Reporter
Runner
Utility
![Page 67: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/67.jpg)
codeWhich is right for me?
kk/7022179049
Well, that depends…
![Page 68: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/68.jpg)
ryantron/4453018910
Esri Professional ServicesWeb Apps not APIsJSAPI (CDN hosted)
Varying testing experience on the teamEnterprisy Clients
Isolate our code via spies and fakesAMD required
Tests must run automatically, fast, reliably, and silently unless they fail
Test in IE, cloud is not an option
![Page 69: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/69.jpg)
Write Tests
Tests Fail
Write Code
Tests Pass
Tests Pass
Refactor
![Page 70: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/70.jpg)
> npm install -g karma-cli> cd my-project> npm install karma> npm install karma-[plugin]
sookie/101363593
Sinon.JSistanbul
![Page 71: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/71.jpg)
> npm install karma-dojo> subl spec/main.js> karma start
https://github.com/tomwayson/esri-karma-tutorial
![Page 72: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/72.jpg)
/eole/3215868087
![Page 73: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/73.jpg)
automation
![Page 74: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/74.jpg)
check syntax…run active tests…
check for regression…
automatically…
report coverage…
![Page 75: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/75.jpg)
SpecRunner.htmlload in browser…tests run…
results.
![Page 76: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/76.jpg)
24258698@N04/37656086
![Page 77: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/77.jpg)
nodetask runner
![Page 78: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/78.jpg)
productivity power-tools
![Page 79: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/79.jpg)
watchjshint
jasmine (via karma)
![Page 80: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/80.jpg)
SpecRunner.htmlload in phantom
…tests run…results in console
runner.tmplunderscore.js
gulpfile.js
![Page 81: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/81.jpg)
active
fast
all
Tests for the code you are actively working. (fail fast)
Non-Map, Non-Async tests that run 100% locally. Used for TravisCI(builds)
All the test specs. Run automatically after active passes. Coverage reports
![Page 82: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/82.jpg)
24258698@N04/37656086
![Page 83: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/83.jpg)
Don’t Test the Map
![Page 84: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/84.jpg)
24258698@N04/37656086
![Page 85: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/85.jpg)
Separation of Concerns
“controller”
![Page 86: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/86.jpg)
Separation of Concerns
“controller”
![Page 87: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/87.jpg)
Test the Map Controller
![Page 88: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/88.jpg)
Map Tests:are slow(er)
usually asyncneed a harness
need dojo
![Page 89: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/89.jpg)
SpecRunner.htmlload in phantom
…tests run…results in console
runner.tmplunderscore.js
gulpfile.js
![Page 90: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/90.jpg)
![Page 91: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/91.jpg)
![Page 92: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/92.jpg)
http://blog.davebouwman.com/?s=coverage
![Page 93: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/93.jpg)
Example Project
![Page 94: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/94.jpg)
github.com/mjuniper/OpenData-Backbone
![Page 95: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/95.jpg)
![Page 96: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/96.jpg)
write good code
wili/242263471
![Page 97: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/97.jpg)
write good tests
kk/5262078254
![Page 98: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/98.jpg)
![Page 99: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/99.jpg)
github.com/mjuniper/OpenData-Backbone
![Page 100: Testing Tools and Patterns for JavaScript Mapping Applications › library › userconf › dev...Testing Tools and Patterns for JavaScript Mapping Applications. Functional vs. Unit](https://reader033.vdocuments.mx/reader033/viewer/2022052722/5f0ce3eb7e708231d437a375/html5/thumbnails/100.jpg)
Rate This Sessionwww.esri.com/RateMyDevSummitSession
github.com/mjuniper/OpenData-Backbone