The Situation:

You have a data-driven application...

...and a JavaScript app using these data services.

And you have JavaScript tests...

// /test/front-end.js

// Note to future self: write tests.

// Note from future self: thanks, jerk.

Web Application Testing

The Plan:

1. Test our client application code
2. No changes to our application source code
3. Handle successes and errors
4. Test both expected and unexpected data

How do we do that?

Ajax

The Execution:

Tools Galore

• jQuery Mockjax
• Angular $httpBackend (ng-mocks)
• Jasmine.Ajax
• Sinon

What should I use?

Whatever makes your workflow easier.

Let's look at some sample code...

Beer

Search for a beer

Mark a beer as a "favorite"

Rate a beer

beer.search = function(query, callback) {
    
    $.ajax({
        url: "api/search",
        data: { "query": query },
        dataType: "json",
        success: function searchSuccessHandler(data) {
            beer.handleSearchResults(data.results);
            callback(data.results);
        },
        error: function searchErrorHandler() {
            beer.notify("Sorry, but the search failed!");
            callback(null);
        }
    });
    
};

beer.toggleFavorite = function(beerId, callback) {
    $.ajax({
        url: "api/favorite/" + beerId,
        type: "POST",
        dataType: "json",
        success: function favoriteSuccessHandler(data) {
            beer.toggleBeerFavIcon(beerId, data.isFavorite);
            callback(data.id, data.isFavorite);
        },
        // ...
    });
};

beer.rateBrew = function(beerId, rating, callback) {
    $.ajax({
        url: "api/rate/" + beerId,
        data: { "rating": rating },
        type: "POST",
        dataType: "json",
        success: function rateSuccessHandler(data) {
            beer.showBeerRating(data.id, data.rating, data.avgRating);
            callback(data);
        },
        // ...
    });
};

test('Searching - no results', function(asyncDone) {

    beerApp.search('fhqwhgads', function(results) {
        
        assertEqual(results, []);
        assertEmpty($('#search-results'));
        
        // ...
        
        asyncDone();
    });

});

test('Searching - one result', function(asyncDone) {

    beerApp.search('foobar', function(results) {
        
        assertNotNull(results);
        assertEqual(results.length, 1);
        assertEqual(results[0].name, 'Foobar');

        // ...
        
        asyncDone();
    });

});

test('Searching - HTTP error', function(asyncDone) {

    beerApp.search('HTTP-ERROR', function(results) {
        
        assertNull(results);
        assertCalled(beerApp.notify);
        
        // ...
        
        asyncDone();
    });

});

test('Favorite - good ID, already favorite', function(asyncDone) {

    beerApp.toggleFavorite(13, function(id, isFavorite) {
        assertEqual(id, 13);
        assertEqual(isFavorite, false);
        assertCalled(beerApp.toggleBeerFavIcon);

        // ...
        
        asyncDone();
    });

});

test('Rating - good rating', function(asyncDone) {

    beerApp.rateBrew(13, 4, function(data) {
        assertEqual(data.id, 13);
        assertEqual(data.rating, 4);
        assertEqual(data.avgRating, 3.5);
        assertCalled(beerApp.showBeerRating);

        // ...
        
        asyncDone();
    });

});

beforeEach(function() {
    setupMockAjax({
        url: 'api/search',
        method: 'GET',
        data: { query: 'fhqwhgads' },
        respondWith: { results: [] }
    });
});

afterEach(function() {
    destroyAllMocks();
});

test('Searching - no results', function(asyncDone) {
        // ...
});

Idempotency

Just like real potency, only more idem.

jQuery Mockjax

Note: I maintain this one. ;)

Basic Query

beforeEach(function() {
    $.mockjax({
        url: 'api/search',
        data: { query: 'fhqwhgads' },
        responseText: { results: [] }
    });
});

afterEach(function() {
    
    $.mockjax.clear();

});

Changing Status

$.mockjax({
    url: 'api/search',
    data: { query: 'HTTP-ERROR' },
    status: 500,
    responseText: 'Uh oh...'
});

Custom Response Handler

$.mockjax({
    url: 'api/search',
    method: 'GET',
    response: function(req) {
        var data = [];

        if (req.data.query && req.data.query === 'foobar') {
            data.push({
                id: 13,
                name: 'Foobar',
            });
        }

        this.status = 200;
        this.responseText = { results: data };
    }
});

Generating Lots of Data

$.mockjax({
    // ...
    response: function(req) {
        var data = [];

        if (req.data.query && req.data.query === 'foobar') {
                // ...
        } else if (req.data.query && req.data.query === 'lots') {
            for (var i=0; i<100; ++i) {
                data.push({ /* ... */ });
            }
        }

        this.status = 200;
        this.responseText = { results: data };
    }
});

Dynamic URLs

$.mockjax({

    url: /api\/favorite\/\d+$/,
    method: 'POST',
    response: function(settings) {
        // ...
    }

});

Using URL Params

$.mockjax({
    url: /api\/favorite\/\d+$/,
    method: 'POST',
    response: function(settings) {
        var id = settings.url.split('/')[2],
            data = {
                'id': id,
                'isFavorite': true
            };

        this.status = 200;

        if (id === 13) {
            data.isFavorite = false;
        }

        this.responseText = data;
    }
});

Angular

(ng-mocks and $httpBackend)

Angular Setup

var testApp = angular.module('testApp', ['beerApp', 'ngMockE2E']);

testApp.run(function($httpBackend) {

});

<html ng-app='testApp'>
  <head>
    ...
    <script src="angular.js">
    <script src="angular-mocks.js">
    ...
  </head>

Basic Mock

testApp.run(function($httpBackend) {

    $httpBackend.whenGET('/api/search').respond({ results: [] });

});

Custom Handler

testApp.run(function($httpBackend) {

    $httpBackend.whenGET('/api/search')
      .respond(function(method, url) {
          var queryParams = customURLToJsonMethod(url);

          if (queryParams.query === 'HTTP-ERROR') {
            
              return [500, 'Uh oh...', {}];

          }
      });
});

Dynamic URL

testApp.run(function($httpBackend) {

    $httpBackend.whenPOST(/api\/rate\/\d+$/)
        .respond(function(method, url, data) {
            var beerId = url.split('/')[2],
                postData = JSON.parse(data);

            return [200, {
                id: beerId,
                rating: postData.rating,
                avgRating: 3.5
            }, {
                'X-Powered-By': 'Mocks'
            }];
        });

});

Jasmine

Installing the Ajax Server

describe('Toggling favorites', function() {

    beforeEach(function() {
      
        jasmine.Ajax.install();
        
        // ...
        
    });
    
    afterEach(function() {
        jasmine.Ajax.uninstall();
    });
    
});

Basic Stub

beforeEach(function() {
  
    jasmine.Ajax.install();
    
    
    jasmine.Ajax.stubRequest('api/rate/13', 'rating=5')
      .andReturn({
          responseText: JSON.stringify({ id: 13, rating: 5 })
      });
    
    // ...
    
});

Testing Errors

beforeEach(function() {
  
    jasmine.Ajax.install();
    
    jasmine.Ajax.stubRequest('api/search?query=fhqwhgads')
      .andReturn({
          status: 500,
          responseText: 'Uh oh...'
      });
    
});

Dynamically Composing Responses

it("should return the correct data", function() {
    var cb = jasmine.createSpy("callback");
    
    beerApp.rateBrew(13, 4, cb);
    
    var request = jasmine.Ajax.requests.mostRecent();
    var data = {
        id: request.url.split('/')[2],
        rating: 4,
        avgRating: 3.5
    };
    
    request.respondWith({
        status: 200,
        responseText: JSON.stringify(data)
    });
    
    expect(cb).toHaveBeenCalledWith(13, 4, 3.5);
});

Sinon

Creating the Fake Server

var server;
beforeEach(function() {

    server = sinon.fakeServer.create();
    
});

afterEach(function() {
    
    server.restore();

});

Basic Mock

var server;
beforeEach(function() {
    server = sinon.fakeServer.create();
    
    server.autoRespond = true;

    server.respondWith(
        'GET',
        'api/search?',
        [
            200,
            { 'Content-Type': 'application/json' },
            JSON.stringify({ "results": [] })
        ]
    );
});

Dynamic URL

beforeEach(function() {
    // ...

    server.respondWith(
        'POST',
        /api\/rate\/(\d+)/,
        function(request, beerId) {
            var postData = JSON.parse(request.requestBody);

            request.respond(
                200,
                { 'Content-Type': 'application/json' },
                JSON.stringify({
                    id: beerId,
                    rating: postData.rating,
                    avgRating: 3.75
                })
            );
        }
    );
});

MOAR EXAMPLES

jQuery Mockjax

asynchronous mock response

$.mockjax({
    url: /api\/rate\/\d+$/,
    method: 'POST',
    response: function(settings, done) {
        var mock = this;

        someCustomAsyncService(settings, function(data) {
            mock.status = 200;
            mock.responseText = data;
            done();
        });
    }
});

jQuery Mockjax

forced lag; response headers

$.mockjax({
    url: 'api/search',
    data: { query: 'foobar' },
    responseTime: 1200,
    headers: {
        'X-User-Token': '12345abcde'
    },
    responseText: { results: [ { id: 13, name: 'Foobar' } ] }
});

jQuery Mockjax

forced timeout

$.mockjax({
    url: 'api/favorite/1337',
    responseTime: 2000,
    isTimeout: true
});

jQuery Mockjax

external data (proxy)

$.mockjax({
    url: 'api/user/13',
    proxy: 'mocks/user-13.json'
});

jQuery Mockjax

custom matching; external data (proxy)

$.mockjax(function(settings) {

    var user = settings.url.match(/api\/user\/(\d+)$/);
    
    if ( user ) {
        return {
            proxy: 'mocks/user-' + user[1] + '.json'
        };
    }
  
    // If you get here, there was no url match
});

Request Header Matching

$.mockjax(function( requestSettings ) {
   // Here is our manual URL matching...
   if ( /api\/rate\/\d+$/.test(requestSettings.url) ) {
      // We have a match, so we return a response callback...

         response: function( handlerSettings ) {

            if ( handlerSettings.headers['Authentication'] === 'xyz123' ) {

               this.responseText = { id: 13, rating: 4, avgRating: 3.5 };

            } else {
               this.status = 403;
               this.responseText = "You are not authorized";
            }
         }
      };
   }
    // If you get here, there was no url match
});

Wrapping Things Up

Test your JavaScript code. ಠ_ಠ

Don't rely on external services (even your own).

Find a library that works for you!