Tomasz Ducin
independent consultant, architect, developer, trainer, speaker #architecture #performance #javascript #typescript #react #angular
Tomasz Ducin
28th October 2014, Warsaw
Tomasz Ducin
13th October 2014, Warsaw
senior software engineer @ Hewlett-Packard
blah, blah, blah...
focus on interface
mocking browser features
// create and setup filters
this.fs = sinon.fakeServer.create();
this.fs.xhr.useFilters = true;
this.fs.xhr.addFilter(
function(method, url, async, username, password) {
return !(new RegExp(this.urlRoot)).test(url);
});
// configure model list resource
this.fs.respondWith("GET", this.urlRoot + '/todo',
[200, { "Content-Type": "application/json" },
JSON.stringify(inMemoryData) ]);
// configure single model item resource
this.fs.respondWith("POST", this.urlRoot + '/todo',
function (xhr) {
var todo,
obj = JSON.parse(xhr.requestBody);
if (obj.order === null) { // new object
delete obj.order;
inMemoryData.push(obj);
} else if (obj.oldTitle) { // "title" attribute changed
todo = _.find(inMemoryData, function(item){
return item.title == obj.oldTitle; });
todo.title = obj.title;
} else { // "completed" attribute changed
todo = _.find(inMemoryData, function(item){
return item.title == obj.title; });
todo.completed = obj.completed;
}
console.log(inMemoryData);
xhr.respond(200, { "Content-Type": "application/json" });
});
mocking framework features
// define standard BB models and collections
var Book = Backbone.Model.extend({
defaults: {
title: "Unknown title",
author: "Unknown author"
}
});
var Books = Backbone.Collection.extend({
model: Book,
url: "library-app/books"
});
fauxServer.addRoute("createBook", "library-app/books", "POST",
function (context) {
// Every handler receives a 'context' parameter.
// Use context.data (a hash of Book attributes)
// to create the Book entry in your persistence layer:
context.data.id = newId(); // assign an id to the new book
books.push(context.data); // save to persistence layer
return context.data;
});
fauxServer.addRoutes({
createBook: {
urlExp: "library-app/books",
httpMethod: "POST",
handler: function (context) {
// Create book using context.data
// Save to persistence layer
// Return attributes of newly created book
}
},
readBook: {
urlExp: "library-app/books/:id",
httpMethod: "GET",
handler: function (context, bookId) {
// Return attributes of book with id 'bookId'
}
},
// ...
//...
updateBook: {
urlExp: "library-app/books/:id",
httpMethod: "PUT",
handler: function (context, bookId) {
// Update stored book with id 'bookId'
// using attributes in context.data
// Return updated attributes
}
},
deleteBook: {
urlExp: "library-app/books/:id",
httpMethod: "DELETE",
handler: function (context, bookId) {
// Delete stored book of id 'bookId'
}
}
}
Mocking the API tries to solve three problems:
attribution
images used in this presentation are scenes from the magnificent 'Back to the Future' trilogy (1985, 1989, 1990) by Robert Zemeckis
By Tomasz Ducin
independent consultant, architect, developer, trainer, speaker #architecture #performance #javascript #typescript #react #angular