Testing Ginormous JavaScript
Apps
Giganotosaurus http://www.jurassicworld-movie.com/
community/forums/topic/31168
2014
#sjsPhilL
Discuss testing strategies for big apps (insert gif)
Discussion Track
Oviraptors
#sjsPhilL
Caplin Trader 2 (CT2)!From ~2009
#sjsPhilL
Caplin Trader 2 #sjsPhilL
Caplin Trader 2 Codebase ~2011
• ~1,500 JavaScript files
• ~250,000 LoC
• ~120,000 test LoC
• HTML Templates
• CSS
• Images
• i18n
• Config
#sjsPhilL
Caplin Dev Practices• Multiple contributing teams
• SCRUM - 2 week iteration
• Continuous Integration & Delivery
• Build status displayed on screen
#sjsPhilL
• A focus on Quality Software
https://www.japanla.com/blog.php?blog_id=568
Testing Requirements• Cross-browser IE6+*, Firefox 3.5*+ & Chrome
• Class-level Unit Tests
• Application Acceptance Tests
* Remember this was 2009
#sjsPhilL
Saurophaganax http://www.statesymbolsusa.org/Oklahoma/OklahomaStateFossil.html
#sjsPhilL
Application ATs• Selenium Tests
• Selenium User-Extensions
• Actions, Accessors/Assertions & Locators
• VM infrastructure for CI
#sjsPhilL
3
3. Launch browser + App
AT Process#sjsPhilL
1
1. Pair Browser + Backend VM2
2. Reset & restart backend services
5
5. Record results
4
4. Execute ATs6
6. Reset backend services
8. Execute next test…
8
7
7. Restart/refresh browser
Test Results• ~1300 UTs
• ~500 ATs
• 50 pairs - VM infrastructure to parallelise tests
#sjsPhilL
• 8 Hours
• We could only run a full suite of tests once per day - at night
• Test results highly unreliablehttp://paintballkitty.spreadshirt.com/sad-dinosaur-A11954669
We Were Doing It Wrong!
https://www.flickr.com/photos/41187064@N03/3809454959/in/gallery-dreamyshade-72157622839898770/
#sjsPhilL
Others may still be doing it wrong.
#sjsPhilL
What’s so Wrong?
#sjsPhilL
Restarting Browser / Relaunching the App
#sjsPhilL
Backend Services #sjsPhilL
Don’t Touch that DOM
#sjsPhilL
Time to Start from Scratch
#sjsPhilL
Improve Speed & Reliability• Full application running + relaunch
• Backend services
• DOM
The long-necked Eodromaeus, or "dawn runner http://video.nationalgeographic.com/video/news/eodromaeus-dinosaur-discovery-vin
#sjsPhilL
#sjsPhilL
Component/Module/Feature/Blade
#sjsPhilL
#sjsPhilL
/assets /feature-name
#sjsPhilL
#sjsPhilL
Workbench #sjsPhilL
#sjsPhilL
Improve Speed & Reliability• Full application running + relaunch
• Backend services
• DOM
#sjsPhilL
Liopleurodon http://bloodhoundomega.deviantart.com/art/Liopleurodon-312292557
#sjsPhilL
Setting & Getting Services
• Use a unique identifier for each service
• Register (code or config). Code example:
!
• Get
http://martinfowler.com/articles/injection.html#ADynamicServiceLocator
#sjsPhilL
Fake Services#sjsPhilL
Fake/Stub/Mock Services#sjsPhilL
#sjsPhilL
Real Services#sjsPhilL
Improve Speed & Reliability• Full application running + relaunch
• Backend services
• DOM
#sjsPhilL
Don’t Touch that DOM
MVVM #sjsPhilL
#sjsPhilL
Improve Speed & Reliability• Full application running + relaunch
• Backend services
• DOM
#sjsPhilL
Argentinosaurus http://www.walkingwithdinosaurs.com/dinosaurs/detail/argentinosaurus/
The BIG win!
#sjsPhilL
End-to-End Feature Testing
• Testing features in isolation
• Change view model and assert against mocked Service
• Inject fake service, make calls and assert View Model
#sjsPhilL
#sjsPhilL
Need Proof?
Caplin Trader 2 Test suite
>8 Hours
Caplin Trader 3 Test suite
< 30 Minutes
#sjsPhilL
How Do You Test Ginormous JavaScript Apps?
Have an Architecture Built for Testing
1. Components/Widgets/Modules
2. A Services Layer
3. MVVM - Don’t touch that DOM
#sjsPhilL
Supersaurus http://www.cfsl.net/forums/viewtopic.php?f=39&t=19496
Phil @leggetter [email protected]
Caplin Systems !
!
!
@BladeRunnerJS bladerunnerjs.org
#sjsPhilL
Tyrannosaurus Rex http://zorgor.wordpress.com/2012/12/24/cosmic-calendar-dinosaurs/
