StrongLoop

Node.js

Express

Loopback

The Situation:

"The Situation" http://theshorereporter.blogspot.com/p/cast.html

You have a data-driven application...

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

Diagram of data services architecture http://www.compositesw.com/data-virtualization/data-services/

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 http://www.aventure.ac.in/the-russian-riddle/
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?

Ajax

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
http://www.imdb.com/media/rm550033152/tt1951265?ref_=ttmd_md_pv

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...

Beer

Search for a beer

Mark a beer as a "favorite"

Rate a beer

http://pngimg.com/download/2330

Pseudo Test-code

Just like real tests, except they actually pass.

Build passing http://blakehall.github.io/tugboat-session-slides

But what happens when the server goes down?

Async mocking diagram

Idempotency

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

Angular

(ng-mocks and $httpBackend)

Angular Setup

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

Basic Mock

Custom Handler

Dynamic URL

Jasmine

Installing the Ajax Server

Basic Stub

Testing Errors

Dynamically Composing Responses

Sinon

Creating the Fake Server

Basic Mock

Dynamic URL

MOAR EXAMPLES

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!

http://chainchomp2.deviantart.com/art/Rapper-Ponies-450348867

Thank You!

Jordan Kasper | @jakerella

jordankasper.com/no-server | Example Code