Ajax Fixtures Plugin for jQuery

Are you developing jQuery hotness so fast that the slow-poke server team can’t supply you AJAX services fast enough? If so, you might be interested in the JavaScriptMVC-extracted jQuery.Fixture plugin. Fixtures simulate AJAX responses so you can keep developing JavaScript functionality even if the server’s services aren’t working. The fixture plugin is easy to setup and remove once the services are online.

Download

jquery.fixture.js - works with jQuery 1.2 and greater

Features

• Easy to toggle fixtures on and off (just remove the plugin)
• Dynamic fixtures
• Pre-made REST fixtures
• Fixture helpers

Demo

Fixture Messages Demo

Documentation

JavaScriptMVC’s jQuery.fixture documentation

Use

It’s easy to use fixtures. Just …

1. Add the script to your page.
2. Set the fixture parameter to your simulated response file.

For example ….

$.ajax({url: "/task.json",
  dataType: "json",
  type: "get",
  success: myCallback,

  fixture: "fixtures/task.json"
});

… uses “fixtures/task.json” as the response instead of “task.json”. The “fixtures/task.json” file might look like:

{
  "name" : "take out trash",
  "description" : "to the curb",
  "id" : 5
}

When the tasks service comes online, just remove the fixtures script tag and jQuery will make requests as normal.

Methods

The fixture plugin overwrites $.ajax, $.get and $.post to accept a fixture parameter or argument.

//... a property with $.ajax
$.ajax({fixture: FIXTURE_VALUE})

//... a parameter in $.get and $.post
$.get (  url, data, callback, type, FIXTURE_VALUE )
$.post(  url, data, callback, type, FIXTURE_VALUE )

Dynamic Fixtures

Services almost always return different results depending on the data sent to the service. Sometimes a single static file is unable to approximate the result of these services. In these cases, by providing a function as the fixture object, fixtures can dynamically generate the result of the request from the data passed into the service (just like your server would do).

$.ajax({
  type:     "get", 
  url:      "tasks",
  data:     {limit: 1000},
  dataType: "json",
  
  fixture: function( settings ){
    var tasks = [];
    for( var i=0; i < settings.data.limit; i++ ) {
      tasks.push({id: i, name: "task "+i})
    }
    return [tasks]
  }
})

Dynamic Fixtures are really helpful for performance testing your app. Wan’t 10k tasks? Make the fixture return 10k tasks. Want requests to take 5 seconds to return, set jQuery.fixture.delay to 5000.

Rest Helpers

The fixture plugin includes several pre-made fixtures (-restUpdate, -restCreate, -restDestroy) that simulate a REST interface. The following example uses -restCreate to simulate creating tasks.:

$.post(
  '/messages.php',
  messageData, 
  function(){ ... },
  'json',
  '-restCreate')

Fixture Helpers

$.fixture.make is used to create fixtures that retrieve JSON data from the server. The fixtures it generates supports limit, offset, filtering, and sorting. The following creates a fixture for 1000 threaded messages and then gets 100-150th child messages of message 5.

//makes a threaded list of messages
$.fixture.make(
  ["messages","message"],
  1000, 
  function(i, messages){
    return {
      subject: "This is message "+i,
      body: "Here is some text for this message",
      date: Math.floor( new Date().getTime() ),
      parentId: i < 100 ? null : Math.floor(Math.random()*i)
    }
})
//uses the messages fixture to return messages 
// limited by offset, limit, order, etc.
$.ajax({
  url: "messages",
  data:{ 
     offset: 100, 
     limit: 50, 
     order: "date ASC",
     parentId: 5},
  },
  success: function(messages){  ... },
  fixture: "-messages"
});

Conclusions

Fixtures are a big part of Bitovi and JavaScriptMVC’s “secret sauce”. In our years doing JavaScript consulting, rarely is the back-end complete. Instead of waiting around, we use fixtures to keep moving forward. The back-end teams can use these fixtures as documentation of the service they need to build.

Even after services are built, fixtures are useful for error, performance, and usability testing. And when new features are added, you can easily start developing from the fixtures again.

Fixtures kick ass.