Testing Tools and Patterns for Javascript Mapping Applications
Total Page:16
File Type:pdf, Size:1020Kb
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.