testing ginormous javascript apps - scotlandjs 2014
DESCRIPTION
We all agree that having well tested apps is important, right? In an agile environment it gives you the confidence to iteratively refactor as requirements change. And the larger your application, the more important this becomes. Not only does it promote quality, but also a scalable application architecture that's essential when building "Ginormous JavaScript Apps". In this talk I'll discuss and demonstrate how testing has been core to Caplin Systems successfully building and maintaining a 100k+ LoC front-end JavaScript SDK and multiple 50k+ LoC apps. In particular, the application architecture required to enable testing apps of this size.TRANSCRIPT
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/