Testing Ginormous JavaScript

Apps

Giganotosaurus http://www.jurassicworld-movie.com/

community/forums/topic/31168

2014

#sjsPhilL

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

• 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 phil@leggetter.co.uk

Caplin Systems !

!

!

@BladeRunnerJS bladerunnerjs.org

#sjsPhilL

Tyrannosaurus Rex http://zorgor.wordpress.com/2012/12/24/cosmic-calendar-dinosaurs/