sdjs-pretender

Fake it 'til You Make it

Building a Mock Server with Pretender

Heather Brysiewicz

Ember.js and JavaScript Consultant

ORD ✈ SAN

@caligoanimus

hbrysiewicz.github.io

trek/pretender

fake server endpionts

built on microlibraries

enables rapid prototyping

client-side developent parallel or before server-side

create some fixture data

var ANIMALS = {
  "1": {
    id: 1,
    type: 'cat',
    name: 'Bubbles',
    age: '10 months',
    gender: 'female',
    src: 'http://i.imgur.com/O2WhkzI.jpg'
  },
  "2": {
    id: 2,
    type: 'dog',
    name: 'Michiko',
    age: '3 months',
    gender: 'male',
    src: 'http://i.imgur.com/KNm9a.jpg'
  }
};

define some endpoints

var server = new Pretender(function() {
  this.get('/animals', function(request) {
    var animals = Object.keys(ANIMALS).map(function(k) {
      return ANIMALS[k];
    });
    var all =  JSON.stringify({ "animals": animals });
    return [200, {"Content-Type": "application/json"}, all];
  });

  this.get('/animals/:id', function(request) {
    var animal = JSON.stringify({ "animal": ANIMALS[request.params.id] });
    return [200, {"Content-Type": "application/json"}, animal];
  });
});

trek/fakexmlhttprequest

overrides the native xhr object and mimics its behavior

intercepts requests to server

native xhr object

used to retrieve data from url without page refresh

different protocals and response data types

var xmlhttp;

if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
} else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 ) {
    if(xmlhttp.status == 200){
      // do something with `xmlhttp.responseText`
    } else if(xmlhttp.status == 400) {
      // handle 400 error
    } else {
      // handle other errors
    }
  }
}

xmlhttp.open("get", "/animals", true);
xmlhttp.send();

jqXHR object

$.ajax(), $.get(), $.post()

http protocol

data types json, xml, text, html, script

$.ajax({ url: '/animals', dataType: 'json' }).done(function(data) {
  // do something
})

tildeio/route-recognizer

lightweight router

pretender uses unique instance for each endpoint

each possible request verb gets its own router

this.registry = {
  GET: new RouteRecognizer(),
  PUT: new RouteRecognizer(),
  POST: new RouteRecognizer(),
  DELETE: new RouteRecognizer(),
  PATCH: new RouteRecognizer(),
  HEAD: new RouteRecognizer()
};

register: function register(verb, path, handler){
  handler.numberOfCalls = 0;
  this.handlers.push(handler);

  var registry = this.registry[verb];
  registry.add([{path: path, handler: handler}])
},