Testing
Ginormous
JavaScript
Apps
Giganotosaurus
http://www.jurassicworld-movie.com/
community/forums/topic/31168
2014
#sj...
Phil @leggetter
phil@leggetter.co.uk
Caplin Systems
!
#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
• Image...
Caplin Dev Practices
• Multiple contributing teams
• SCRUM - 2 week iteration
• Continuous Integration & Delivery
• Build ...
Testing Requirements
• Cross-browser IE6+*, Firefox 3.5*+ & Chrome
• Class-level Unit Tests
• Application Acceptance Tests...
#sjsPhilL
Application ATs
• Selenium Tests
• Selenium User-Extensions
• Actions, Accessors/Assertions & Locators
• VM infrastructure...
3
3. Launch browser + App
AT Process
#sjsPhilL
1
1. Pair Browser + Backend VM
2
2. Reset & restart backend services
5
5. R...
Test Results
• ~1300 UTs
• ~500 ATs
• 50 pairs - VM infrastructure to parallelise tests
#sjsPhilL
• 8 Hours
• We could onl...
We Were Doing It
Wrong!
https://www.flickr.com/photos/41187064@N03/3809454959/in/gallery-dreamyshade-72157622839898770/
#sj...
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 ...
#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://b...
#sjsPhilL
Setting & Getting Services
• Use a unique identifier for each service
• Register (code or config). Code example:
!
• Get
h...
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 ...
#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 Servi...
Phil @leggetter
phil@leggetter.co.uk
Caplin Systems
!
!
!
@BladeRunnerJS
bladerunnerjs.org
#sjsPhilL
Tyrannosaurus Rex
htt...
Upcoming SlideShare
Loading in …5
×

Testing Ginormous JavaScript Apps - ScotlandJS 2014

940 views

Published on

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.

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
940
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Testing Ginormous JavaScript Apps - ScotlandJS 2014

  1. 1. Testing Ginormous JavaScript Apps Giganotosaurus http://www.jurassicworld-movie.com/ community/forums/topic/31168 2014 #sjsPhilL
  2. 2. Phil @leggetter phil@leggetter.co.uk Caplin Systems ! #sjsPhilL
  3. 3. Discuss testing strategies for big apps (insert gif) Discussion Track Oviraptors #sjsPhilL
  4. 4. Caplin Trader 2 (CT2)! From ~2009 #sjsPhilL
  5. 5. Caplin Trader 2 #sjsPhilL
  6. 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. 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. 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. 9. #sjsPhilL
  10. 10. Application ATs • Selenium Tests • Selenium User-Extensions • Actions, Accessors/Assertions & Locators • VM infrastructure for CI #sjsPhilL
  11. 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. 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. 13. We Were Doing It Wrong! https://www.flickr.com/photos/41187064@N03/3809454959/in/gallery-dreamyshade-72157622839898770/ #sjsPhilL
  14. 14. Others may still be doing it wrong. #sjsPhilL
  15. 15. What’s so Wrong? #sjsPhilL
  16. 16. Restarting Browser / Relaunching the App #sjsPhilL
  17. 17. Backend Services #sjsPhilL
  18. 18. Don’t Touch that DOM #sjsPhilL
  19. 19. Time to Start from Scratch #sjsPhilL
  20. 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. 21. #sjsPhilL
  22. 22. Component/Module/ Feature/Blade #sjsPhilL
  23. 23. #sjsPhilL
  24. 24. /assets /feature-name #sjsPhilL
  25. 25. #sjsPhilL
  26. 26. Workbench #sjsPhilL
  27. 27. #sjsPhilL
  28. 28. Improve Speed & Reliability • Full application running + relaunch • Backend services • DOM #sjsPhilL Liopleurodon http://bloodhoundomega.deviantart.com/art/Liopleurodon-312292557
  29. 29. #sjsPhilL
  30. 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. 31. Fake Services #sjsPhilL
  32. 32. Fake/Stub/Mock Services #sjsPhilL
  33. 33. #sjsPhilL
  34. 34. Real Services #sjsPhilL
  35. 35. Improve Speed & Reliability • Full application running + relaunch • Backend services • DOM #sjsPhilL Don’t Touch that DOM
  36. 36. MVVM #sjsPhilL
  37. 37. #sjsPhilL
  38. 38. Improve Speed & Reliability • Full application running + relaunch • Backend services • DOM #sjsPhilL
  39. 39. Argentinosaurus http://www.walkingwithdinosaurs.com/dinosaurs/detail/argentinosaurus/ The BIG win! #sjsPhilL
  40. 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. 41. #sjsPhilL
  42. 42. Need Proof? Caplin Trader 2 Test suite >8 Hours Caplin Trader 3 Test suite < 30 Minutes #sjsPhilL
  43. 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. 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/

×