_ _ _ ___ _ _ _ _ /_\ | |_ __ ___ __| |_ / _ \| |__ ___ ___| |___| |_ ___ _ _ ___| |_ / _ \| | ' \/ _ (_-< _| (_) | '_ (_-</ _ \ / -_) _/ -_)_| ' \/ -_) _| /_/ \_\_|_|_|_\___/__/\__|\___/|_.__/__/\___/_\___|\__\___(_)_||_\___|\__|
Testing a large client-side JavaScript project

Thomas W Parslow

tom@almostobsolete.net
@almostobsolete
http://almostobsolete.net
Illustrations by Matt Thomas openbyhand.com

Software fails





Automated tests are pretty useful





Client Side JavaScript Testing

Integration Tests

Why use Integration Tests

Downsides of Integration Tests

How?

Approaches

Simulated Browser: PhantomJS

console.log('Loading a web page');
var page = new WebPage();
var url = "http://www.phantomjs.org/";
page.open(url, function (status) {
    //Page is loaded!
    phantom.exit();
});
          

CasperJS

CasperJS



Real Browser

Mocha's Browser Test Runner

Isolating app code for testing

IFrame's for app isolation

iframe = document.createElement('iframe');
iframe.src = "container.html";
body.appendChild(iframe);
iframe.addEventListener('load', function () {
  var window = iframe.contentWindow,
      $ = window.$;
  // Run tests!
});
        

Demo: Integration tests in Mocha

The Test Server

Integrating with tools

Test reporting

{
    "complete": true,
    "results": [
        {
            title: "gets the model attribute for each binding and set it to the form",
            fullTitle: "BaseFormBindingView updateForm gets the model attribute for each binding and set it to the form",
            duration: "1",
            state: "pass"
        },
       ...
   ]
} 

Back to Phantom

Demo: Run tests from the command line

Continuous Integration (CI)

CircleCI: CI as a service

Fully Automated Real Browsers


Conclusion: Tests multiple real browsers automatically on every commit!




Thanks For Listening! Any questions?




part 1
http://papercreatures.com/talks/testing/
part 2 (this one)
http://almostobsolete.net/talks/testing/


Thomas Parslow
tom@almostobsolete.net
@almostobsolete
http://almostobsolete.net

Illustrations by Matt Thomas openbyhand.com