Added an example of how to use this for testing SPAs

This commit is contained in:
Dan Hough
2014-03-16 22:05:26 +01:00
parent 26686356f9
commit 364afa9b06
6 changed files with 87 additions and 5 deletions

View File

@@ -0,0 +1,21 @@
<html>
<head>
<title>Interfake it 'til you make it</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#update').click(function (e) {
e.preventDefault();
$.getJSON('http://localhost:3000/update')
.done(function (data) {
$('#target').text(data.text)
});
});
});
</script>
</head>
<body>
<span id="target">Not updated!</span>
<a href="#" id="update">Update</a>
</body>
</html>

View File

@@ -0,0 +1,43 @@
var Interfake = require('..');
var Browser = require('zombie');
var assert = require('assert');
var path = require('path');
var filePath = path.join(__dirname, './');
console.log('Gonna open', filePath);
var interfake = new Interfake();
var browser = new Browser();
// Serve up this folder as a website so we can test it
interfake.serveStatic('/static', filePath);
// Create the /update endpoint
interfake.get('/update').body({ text : 'Updated text!'});
// Start the server
interfake.listen(3000);
// Use zombie to visit the page
browser.visit('http://localhost:3000/static/fluent-web-page-test.html')
.then(function() {
// When we start, the text of the #target element is 'Not updated!'
assert.equal(browser.text("#target"), 'Not updated!');
})
.then(function() {
// The 'Update' link will trigger an XHR call to /update and update the text with the response data
return browser.clickLink('Update');
})
.then(function () {
// Give it a sec...
return browser.wait(150);
})
.then(function () {
// Voila! It has updated. Magic.
assert.equal(browser.text('#target'), 'Updated text!');
})
.fail(function(error) {
console.log('Error', error);
browser.close();
})
.done(function() {
console.log('All asserts passed just fine!');
browser.close();
});

7
lib/cors.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
};

View File

@@ -1,6 +1,7 @@
var express = require('express');
var path = require('path');
var FluentInterface = require('./fluent');
var corsMiddleware = require('./cors');
function createInvalidDataException(data) {
return new Error('You have to provide a JSON object with the following structure: \n' + JSON.stringify({ request : { method : '[GET|PUT|POST|DELETE]', url : '(relative URL e.g. /hello)' }, response : { code : '(HTTP Response code e.g. 200/400/500)', body : '(a JSON object)' } }, null, 4) + ' but you provided: \n' + JSON.stringify(data, null, 4));
@@ -16,6 +17,7 @@ function Interfake(o) {
app.configure(function(){
app.use(express.json());
app.use(express.urlencoded());
app.use(corsMiddleware);
app.use(app.router);
});
@@ -125,6 +127,11 @@ function Interfake(o) {
this.put = fluentInterface.forMethod('put');
this.delete = fluentInterface.forMethod('delete');
this.serveStatic = function (path, directory) {
path = path || '/_static';
app.use(path, express.static(directory));
};
this.listen = function (port) {
port = port || 3000;
server = app.listen(port, function () {

View File

@@ -34,7 +34,7 @@
"url": "git@github.com:basicallydan/interfake.git"
},
"dependencies": {
"express": "^3.4.5",
"express": "^3.4.8",
"commander": "2.1.0"
},
"license": "MIT",
@@ -45,8 +45,10 @@
"bin": "./index.js",
"devDependencies": {
"api-easy": "^0.3.8",
"vows": "^0.7.0",
"mocha": "^1.18.0",
"request": "^2.34.0",
"q": "^1.0.1"
"q": "^1.0.1",
"zombie": "^2.0.0-alpha31",
"connect": "^2.14.2"
}
}

View File

@@ -1,4 +1,4 @@
# Interfake: Mocked JSON APIs for any platform
# Interfake: Quick APIs for any platform
Interfake is a tool which allows developers of client-side applications to easily create dummy APIs to develop against. Let's get started with a simple example.
@@ -142,6 +142,7 @@ interfake.listen(3030); // The server will listen on port 3030
* `#createRoute(route)`: Takes a JSON object with `request`, `response` and optionally `afterResponse` properties
* `#listen(port)`: Takes a port and starts the server
* `#stop()`: Stops the server if it's been started
* `#serveStatic(path, directory)`: Serve static (usually a website) files from a certain path. This is useful for testing [SPAs](http://en.wikipedia.org/wiki/Single-page_application). ([Example use.](/examples-javascript/fluent-web-page-test.js))
#### Fluent Interface
@@ -269,6 +270,8 @@ You can use Interfake to create dummy APIs which use data from your test setup w
The HTTP API is particularly useful for developing iOS Applications which uses Automated tests written in JavaScript, or developing Node.js applications which rely on external APIs.
For an example of how to do this, please see the [web page test example](/examples-javascript/fluent-web-page-test.js).
### Creating a static API
If you have a website or mobile application which only needs static data, deploy Interfake to a server somewhere with a JSON file serving up the data, and point your application at it.
@@ -308,4 +311,3 @@ Alun for reading this readme.
* Create a guide/some examples for how to integrate this with existing test frameworks, whether written in JavaScript or not
* Improve the templating, so that a response might include a repeated structure with an incrementing counter or randomized data
* Create a way to add static files in case you'd like to run a JavaScript application against it