The Situation:

"The Situation"

You have a data-driven application...

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

Diagram of data services architecture

And you have JavaScript tests...

// /test/front-end.js

// Note to future self: write tests.

// Note from future self: thanks, jerk.

Well, you want to have JavaScript Tests...

Look of disapproval

Web Application Testing

Nested Russian dolls
Web app flow diagram
Web app flow diagram - what to test
Web app flow diagram - no server

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?


Web app flow diagram - brief
Async mocking diagram

The Hunger Tests: Mockingjax

  1. Intercept the XMLHttpRequest
  2. Inspect the URL, headers, and data
  3. Execute callbacks with mock data

The Execution:

Tools Galore

What should I use?

Whatever makes your workflow easier.

Not Helpful.

Look of disapproval

Yes, it is.

Let's look at some sample code...


Search for a beer

Mark a beer as a "favorite"

Rate a beer

Pseudo Test-code

Just like real tests, except they actually pass.

Build passing

But what happens when the server goes down?

Async mocking diagram


Just like real potency, only more idem.

This is great, but I don't
live in the pseudo world...

... or do you?

jQuery Mockjax

Note: I maintain this one. ;)

Basic Query

Changing Status

Custom Response Handler

Generating Lots of Data

Dynamic URLs

Using URL Params


(ng-mocks and $httpBackend)

Angular Setup

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

Basic Mock

Custom Handler

Dynamic URL


Installing the Ajax Server

Basic Stub

Testing Errors

Dynamically Composing Responses


Creating the Fake Server

Basic Mock

Dynamic URL


jQuery Mockjax

asynchronous mock response

jQuery Mockjax

forced lag; response headers

jQuery Mockjax

forced timeout

jQuery Mockjax

external data (proxy)

jQuery Mockjax

custom matching; external data (proxy)

Request Header Matching

Wrapping Things Up

Test your JavaScript code. ಠ_ಠ

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

Find a library that works for you!