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.

1. Testing
Ginormous
JavaScript
Apps
Giganotosaurus
http://www.jurassicworld-movie.com/
community/forums/topic/31168
2014
#sjsPhilL

2. Phil @leggetter
phil@leggetter.co.uk
Caplin Systems
!
#sjsPhilL

3. Discuss testing strategies for big apps (insert gif)
Discussion Track
Oviraptors
#sjsPhilL

4. Caplin Trader 2 (CT2)!
From ~2009
#sjsPhilL

5. Caplin Trader 2
#sjsPhilL

6. Caplin Trader 2 Codebase
~2011
• ~1,500 JavaScript files
• ~250,000 LoC
• ~120,000 test LoC
• HTML Templates
• CSS
• Images
• i18n
• Config
#sjsPhilL

7. 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

8. 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

9. #sjsPhilL

10. Application ATs
• Selenium Tests
• Selenium User-Extensions
• Actions, Accessors/Assertions & Locators
• VM infrastructure for CI
#sjsPhilL

11. 3
3. Launch browser + App
AT Process
#sjsPhilL
1
1. Pair Browser + Backend VM
2
2. Reset & restart backend services
5
5. Record results
4
4. Execute ATs
6
6. Reset backend services
8. Execute next test…
8
7
7. Restart/refresh browser

12. 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 unreliable
http://paintballkitty.spreadshirt.com/sad-dinosaur-A11954669

13. We Were Doing It
Wrong!
https://www.flickr.com/photos/41187064@N03/3809454959/in/gallery-dreamyshade-72157622839898770/
#sjsPhilL

14. Others may still be
doing it wrong.
#sjsPhilL

15. What’s so
Wrong?
#sjsPhilL

16. Restarting Browser /
Relaunching the App
#sjsPhilL

17. Backend Services #sjsPhilL

18. Don’t Touch that DOM
#sjsPhilL

19. Time to Start from Scratch
#sjsPhilL

20. 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

21. #sjsPhilL

22. Component/Module/
Feature/Blade
#sjsPhilL

23. #sjsPhilL

24. /assets /feature-name
#sjsPhilL

25. #sjsPhilL

26. Workbench
#sjsPhilL

27. #sjsPhilL

28. Improve Speed & Reliability
• Full application running + relaunch
• Backend services
• DOM
#sjsPhilL
Liopleurodon
http://bloodhoundomega.deviantart.com/art/Liopleurodon-312292557

29. #sjsPhilL

30. 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

31. Fake Services
#sjsPhilL

32. Fake/Stub/Mock Services
#sjsPhilL

33. #sjsPhilL

34. Real Services
#sjsPhilL

35. Improve Speed & Reliability
• Full application running + relaunch
• Backend services
• DOM
#sjsPhilL
Don’t Touch
that DOM

36. MVVM #sjsPhilL

37. #sjsPhilL

38. Improve Speed & Reliability
• Full application running + relaunch
• Backend services
• DOM
#sjsPhilL

39. Argentinosaurus
http://www.walkingwithdinosaurs.com/dinosaurs/detail/argentinosaurus/
The BIG win!
#sjsPhilL

40. 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

41. #sjsPhilL

42. Need Proof?
Caplin Trader 2 Test suite
>8 Hours
Caplin Trader 3 Test suite
< 30 Minutes
#sjsPhilL

43. 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

44. Phil @leggetter
phil@leggetter.co.uk
Caplin Systems
!
!
!
@BladeRunnerJS
bladerunnerjs.org
#sjsPhilL
Tyrannosaurus Rex
http://zorgor.wordpress.com/2012/12/24/cosmic-calendar-dinosaurs/