Why Test?

We write tests...

• So that we are not scared to deploy our code
• So that we can sleep at night

Writing Testable Code

Search Example

What's so bad about that?

Anonymous Functions

Does this look familiar?

Call Stack
                            (anonymous)         app.min.js 3
                            (anonymous)         app.min.js 3
                            (anonymous)         app.min.js 3
                            (anonymous)         app.min.js 3

DOM Coupling

DOM Coupling

Server Coupling

(and asynchronous activity)

Refactor Until It Hurts

(and then refactor a little more)

Search Example - Redux

Now isn't that nice?

Call Stack
                            jk.handleResults       app.min.js 3
                            successHandler         app.min.js 3
                            jk.doSearch            app.min.js 3
                            submitHandler          app.min.js 3
                            jk.initSearch          app.min.js 3
                            initPage               index.html 376

Search Example - Initialization

Inline != Anonymous

Search Example - Redux

Writing Testable Code

• Use namespaces
• Name your functions
• Avoid tight coupling

Personalization Example

$(document).ready(function() {
    if (Drupal.settings.hasOwnProperty('personalization')) {
        var settings = Drupal.settings.personalization;
        var $option_set = $(settings.selector);
        $.ajax({
            'url': 'http://www.my-personalization-service.com/get-decision',
            'data': {'options': settings.options},
            'success': function(response) {
                var choice = response.data.choice;
                // [Various edge case logic...]
                var json = $('script[type="text/template"]', $option_set).get(0).innerText;
                var choices = jQuery.parseJSON(json);
                var chosen = choices[choice]['html'];
                $option_set.append(chosen);
            }
        });
    }
});

Drupal.personalize.showChoice = function($option_set, choice) {
    // [Various edge case logic...]
    var json = $('script[type="text/template"]', $option_set).get(0).innerText;
    var choices = jQuery.parseJSON(json);
    var chosen = choices[choice]['html'];
    $option_set.append(chosen);
};
$(document).ready(function() {
    if (Drupal.settings.hasOwnProperty('personalization')) {
        var settings = Drupal.settings.personalization;
        var $option_set = $(settings.selector);
        $.ajax({
            'url': 'http://www.my-personalization-service.com/get-decision',
            'data': {'options': settings.options},
            'success': function(response) {
                Drupal.personalize.showChoice($option_set, response.data.choice);
            }
        });
    }
});

Now we have a piece of testable code - how do we test it?

Introducing QUnit

• A JavaScript unit testing framework
• Used by jQuery and jQuery UI
• Can test generic js code as well as (obvs) jQuery

QUnit test suite

The test suite corresponds to a single html file which loads QUnit and your tests to be run.

In general, use a different suite per area of functionality being tested.

tests.js

QUnit.test( "hello test", function( assert ) {
    assert.ok( 1 == "1", "Passed!" );
});
                        

Let's see an example!

Fixtures

QUnit will reset the elements inside the #qunit-fixture element after each test

Modules

All tests that occur after a call to QUnit.module() will be grouped into that module

Beyond the basics

What if my code relies on Drupal.settings?

QUnit.module("Tests that rely on some settings", {
  'setup': function() {
    Drupal.settings.personalize = {
      'option_sets': {
        'option-set-1': {
          'selector': '.some-class',
        }
      }
    };
  },
});

What if my code relies on other JS libraries?

Add them to your test suite

What if my code relies on other JS libraries?

Add them to your test suite

What if my code has asynchronous behaviors?

QUnit.async()

What if my code has asynchronous behaviors?

QUnit.async()

What if my code uses AJAX?

Glad you asked! :D

What if my code uses AJAX?

Glad you asked! :D

Sinon JS

.. and spies

Sinon JS

.. and spies

Spies, mocks, stubs, oh my!

Different types of test doubles that serve slightly different purposes

Spies, mocks, stubs, oh my!

Different types of test doubles that serve slightly different purposes

Sinon spies

A function that records arguments, return value, the value of this and exception thrown (if any) for all its calls.

Sinon spies

A test spy can be an anonymous function or it can wrap an existing function.

Spy

// Create an anonyous spy.
sinon.spy();

// Spy on a particular function.
sinon.spy(myFunc);

// Spy on a method of an object.
sinon.spy(myObj, 'mymethod');

Spy

var myCallback = sinon.spy();

// Pass my spy to the function I'm testing.
myFuncThatShouldCallMyCallback(myCallback);

// Confirm my spy was called.
assert(callback.called);

See http://sinonjs.org/docs/#spies for more things you can do with spies.

Back to AJAX...

How do we test AJAX code without triggering network activity?

Use a fakeXMLHttpRequest :D

How do we test AJAX code without triggering network activity?

Use a fakeXMLHttpRequest :)

// Replace the native XMLHttpRequest object with Sinon's fake
var xhr = sinon.useFakeXMLHttpRequest();
var requests = [];

xhr.onCreate = function (request) {
  requests.push(request);
};

                        

Let's put it all together!

Yay - I haz tests!

Now what?

Automation

Grunt

Travis CI

A hosted continuous integration service

Phantom JS

A headless browser

Setting it up

• Sign in to Travis with your Github account
• Activate the github web hook on the project you want to add Travis integration on
• Add .travis.yml to your repo

                            
language: php
php:
- 5.4
before_install:
- wget https://raw.githubusercontent.com/jonkemp/qunit-phantomjs-runner/master/runner.js
script:
- phantomjs runner.js qunit/test.html