ryanzec-mocked-backend
v0.2.7
Published
Mock network request responses in the browser
Downloads
2
Readme
backend.js
No API? No problem!
The What
Based on AngularJS's $httpBackend, backend.js allows you to mock API responses in the browser. Written in vanilla JavaScript, it has 0 dependencies, so you should be able to use it in combination with any library and/or framework.
backend.js does not require any configurations. Simply drop the script in and start mocking up some responses. It works by monkey patching the XMLHttpRequest constructor, allowing all requests to be intercepted. If a request is made and a mocked response is found, backend.js simply serves up that response. Alternatively, if no mocked response is found, then the real XHR object is called to allow your request to pass through.
The Why
Originally, this project was started out of boredom! Then one day I found a need to stub responses in Web Workers, so I decided to revisit it and so it is.
Installation
npm
$ npm install --save-dev mocked-backend
Then just require it!
var backend = require('mocked-backend');
Note: backend is only intended to be used within a browser, an npm option is available for things like browserify
bower
$ bower install --save-dev backend
You just need to include the backend.js
file that comes with the bower install.
Examples
Stub a response:
// supports globbing patterns!
backend.when('GET', '/api/users/*').respond({
name: 'Jake',
species: 'Dog',
magicPowers: true,
location: 'Ooooo'
});
Then use XHR per usual:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
var data = JSON.parse(xhr.responseText);
var msg = '<p>Hello, ' + data.name + ' the ' + data.species + '</p>';
document.body.innerHTML += msg;
}
};
xhr.open('GET', '/api/users/jake');
xhr.send();
It also plays nicely with jQuery, so if VanillaJS isn't your thing, that's ok!
$.getJSON('/api/users/jake', function (response) {
$('body').append('<p>Hello, ' + response.name + ' the ' + response.species + '</p>');
});
Async requests are delay by default for 100ms however you can specific a different value if you need:
backend
.when('GET', '/api/users/*')
.options({
delay: 2000
})
.respond({
name: 'Jake',
species: 'Dog',
magicPowers: true,
location: 'Ooooo'
});
License
MIT license