Last active
August 29, 2015 14:06
-
-
Save patkujawa-wf/347ab9ae66dd911d418b to your computer and use it in GitHub Desktop.
In-browser testing with requirejs, mocha, and the paw touch-emulation library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You can paste this code into a browser console and it should | |
// work (provided preconditions below are met). | |
// Preconditions: | |
// 1. The page you load uses requirejs (so that window.require is defined). | |
// 2. A local server is running inside a folder with the correct dep's. | |
// You can do that by dumping this package.json: | |
var packageJson = | |
{ | |
"name": "funTestingServer", | |
"version": "0.0.0", | |
"description": "Host stuff for functional testing in-browser.", | |
"main": "index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "Pat Kujawa", | |
"license": "ISC", | |
"dependencies": { | |
"mocha": "*", | |
"paw": "git://github.com/Workiva/paw", | |
"referee": "git://github.com/busterjs/referee" | |
} | |
} | |
// Then run `npm install` | |
// Finally, run `python -m SimpleHTTPServer` | |
// Put the element on the page for mocha to dump results into | |
// (using its default html reporter). | |
// Conventionally, give it an id of 'mocha' | |
var mochaDiv = document.getElementById('mocha') | |
if (!mochaDiv) { | |
mochaDiv = document.createElement('div'); | |
mochaDiv.id = 'mocha'; | |
mochaDiv.style.position = 'absolute'; | |
mochaDiv.style.backgroundColor = 'rgba(255,255,255,0.8)'; | |
document.body.appendChild(mochaDiv); | |
} | |
mochaDiv.style.display = 'none'; | |
// Set up loading of the necessary libs from the local server using | |
// requirejs (assumed to be on the page). | |
// http://stackoverflow.com/questions/23365972/require-js-lazy-loading-remote-url | |
var localRequire = require.config({ | |
baseUrl: 'http://0.0.0.0:8000/node_modules', | |
paths: { | |
paw: 'paw/src', | |
mocha: 'mocha/mocha', // NOTE: no .js | |
// expect() lib and dep's: | |
'referee/expect': 'referee/lib/expect', | |
referee: 'referee/lib/referee', | |
samsam: 'referee/node_modules/samsam/lib/samsam', | |
bane: 'referee/node_modules/bane/lib/bane', | |
}, | |
shim: { | |
mocha: { exports: 'mocha' }, // take the window-added object and name it mocha | |
}, | |
}); | |
// Use requirejs to load JS asynchronously | |
localRequire([mocha', 'referee/expect', 'paw/Paw'], | |
function(mocha, expect, Paw) { | |
// Have mocha add 'describe', and 'it' to the window | |
mocha.setup({ | |
ui: 'bdd', | |
reporter: 'html', | |
}); | |
// Test helpers | |
function log(msg) { | |
// return a function so we can close around args but | |
// still only expose as a zero-arg function to 'then()' | |
return function innerLog() { | |
console.log(msg); | |
}; | |
} | |
// Add specs to window | |
describe('paw', function() { | |
this.timeout(300100); // long time | |
it('should touch the page and drag up', function(done) { | |
new Paw() | |
.then(log('touch the page')) | |
.touch('center center') | |
.then(log('drag up')) | |
.drag('center 20%', 100) | |
.then(log('release')) | |
.release() | |
.then(log('wait a bit')) | |
.wait(3000) | |
.then(function() { | |
done(); | |
}); | |
}); | |
}); | |
// Run specs | |
var runner = mocha.run(function mochaRunDone(err) { | |
console.log('mocha done. err: ', err, ' runner: ', runner); | |
mochaDiv.style.display = 'inherit'; | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment