jQCon: Front-end Prototyping & Unit Testing with Mocking

Right after speaking at the Mix11 conference in Las Vegas, Nevada I flew to the jQuery Conference in San Francisco, California to present my next talk.

If you were able to attend my talk in person I would appreciate if you could give me some feedback on SpeakerRate. Thanks in advance! Unfortunately, the session was not recorded at the conference, but I plan to record the material soon and make the session available for to you to watch.

For this talk I focused on some prototyping and unit testing tools to help web developers quickly build their front-end while not depending on the back-end. Here is the abstract for the session:

Prototyping and Unit Testing with Mockjax, mockJSON, and Amplify

The front-end and back-end of your application inevitably progress at different speeds. In order for each layer to develop independently it is optimal if the front-end piece can work regardless of the back-end, which is where the Mockjax plugin or the Amplify Request component comes in. These tools can intercept and simulate ajax requests made with jQuery with minimal effort and impact to your code. Another tool that works well with these tools is mockJSON which provides a random data templating feature. This can be very handy when you want to mock a JSON response from a AJAX call, but instead of manually building the response you can build a template to do it for you.

As you are developing, Mockjax or Amplify Request can also be used to help Unit Test your front-end code. You can setup a static mock responses to your requests and then Unit Test your Ajax success and fail event handlers.

At the end of the presentation I went through a demo showing the various types of prototype and unit testing techniques you can utilize using Mockjax, mockJSON, and Amplify. The source code for all of the examples I presented can be found on my GitHub account.

The demonstration code goes through the following steps (they are outlined in the index.html comments):

1. Use a local JSON file with contacts and have $.getJSON refer to that endpoint
2. Update URL to use the real endpoint and use Mockjax to intercept and return the contacts
3. Use mockJSON and Mockjax to return a random set of contacts based on a template
4. Use Amplify Request and return an array of mock contacts (this part was mentioned, but not demonstrated)
5. Uses Amplify Request and mockJSON to return an random array of contacts*
6. Updates Amplify Request Definition to pull contacts from Whitepages instead*
7. Pulls out Amplify Request decoder and type to allow reuse for later requests*

* No code changes were made to the main application. The only changes made were to the amplify.request.define statement.

View Slides Download Code