Permalink
Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (161 sloc) 5.85 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RunJS test</title>
<style>
section { margin: 0 0 20px; }
section,
section a { display: block; }
.ok { color: green; }
.error { color: red; }
</style>
</head>
<body>
<section id='hashbang'>
<h1>Hashbang</h1>
<a href="#!/hello/world">Hello World</a>
<a href="#!/page/123">Page 123</a>
<a href="#!/page/123/slideshow">Page 123 Slideshow</a>
<a href="#!/page/123/slideshow/123">Page 123 Slideshow 123</a>
</section>
<section id='selectors'>
<h1>Selector</h1>
<a href="javascript:$.run.again('body');">Run "body" again.</a>
<a href="javascript:$.run.again('body',true);">Run "body" again (now).</a>
<a href="javascript:$.run.again('script');">Run "script" again.</a>
<a href="javascript:$.run.again('script',true);">Run "script" again (now).</a>
</section>
<section id='pathname'>
<h1>Pathname</h1>
<small>(this requires a web server for the paths to work)</small>
<a href="javascript:History.pushState(null,null,'/hello/world')">Hello World</a>
<a href="javascript:History.pushState(null,null,'/page/123')">Page 123</a>
</section>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://raw.github.com/balupton/history.js/master/scripts/bundled/html5/jquery.history.js"></script>
<script src="../run.js"></script>
<script>
// Simple assertion function
// if only 1 argument it just checks that it's true-ish
// if 2 arguments it checks if they match
function assert(val){
if( arguments.length == 1 && !val )
throw new Error("AssertError: "+val);
if( arguments.length == 2 && val !== arguments[1] )
throw new Error("AssertError: "+val+" does not equal "+arguments[1]);
assert.passed = (assert.passed||0) + 1;
}
function test(){
$.run("/hello/world",function(url){
assert(url,"/hello/world")
})
assert($.run.routes.length,1)
assert($.run.routes[0].name,"/hello/world")
assert($.run.routes[0].pathname instanceof RegExp)
assert($.run.routes[0].pathname.source,/^\/hello\/world\/?$/.source)
$.run("/page/:id",function(id,url){
assert(id,"123")
assert(url,"/page/123")
})
assert($.run.routes.length,2)
assert($.run.routes[1].name,"/page/:id")
assert($.run.routes[1].pathname instanceof RegExp)
assert($.run.routes[1].pathname.source,/^\/page\/([^\/]+)\/?$/.source)
$.run("/*all/slideshow",function(all,url){
assert(all,"page/123")
assert(url,"/page/123/slideshow")
})
assert($.run.routes.length,3)
assert($.run.routes[2].name,"/*all/slideshow")
assert($.run.routes[2].pathname instanceof RegExp)
assert($.run.routes[2].pathname.source,/^\/(.+)\/slideshow\/?$/.source)
$.run("/*/slideshow(/:id)",function(all,id,url){
assert(all,"page/123")
if( id ) {
assert(id,"123")
assert(url,"/page/123/slideshow/123")
} else {
assert(id,undefined)
assert(url,"/page/123/slideshow")
}
})
assert($.run.routes.length,4)
assert($.run.routes[3].name,"/*/slideshow(/:id)")
assert($.run.routes[3].pathname instanceof RegExp)
assert($.run.routes[3].pathname.source,/^\/(.+)\/slideshow(?:\/([^\/]+))?\/?$/.source)
$.run({
"body": function(){
assert(this.length,1)
assert(this[0],document.body)
var color = '#'+Math.round(Math.random()*0xffffff).toString(16);
this.css('backgroundColor',color)
},
"script": function(){
assert(this.length,4)
}
})
assert($.run.routes.length,6)
$.run({})
assert($.run.routes.length,6)
$.run("/Users/slaskis/Work/Public%20Class/runjs/test/test-run.html",function(url){
assert(url,window.location.pathname)
})
assert($.run.routes.length,7)
$.run(function(url){
assert(url,window.location.hash.slice(2) || window.location.pathname)
})
assert($.run.routes[7].name,'^.*$')
assert($.run.routes[7].pathname instanceof RegExp)
assert($.run.routes.length,8)
// testing the sequence
var called = 0;
$.run('section',function(){called++; assert(this.length,3)})
$.run('section',function(){called++; assert(this.length,3)})
$.run('section',function(){called++; assert(this.length,3)})
$.run('section') // run all 3
assert(called,3)
$.run('section') // don't run any
assert(called,3)
$.run.again('section',true) // run all 3 again
assert(called,6)
}
// auto run on hash/state change
window.addEventListener("hashchange",function(){ $.run() })
History.Adapter.bind(window,'statechange',function(){ $.run() })
// benchmark
function bench(num){
// reset routes for each benchmark
$.run.routes.length = 0;
console.time('adding')
var called = 0;
for(var i=0;i<num;i++)
$.run('body',function(){called++})
console.timeEnd('adding')
console.time('running')
assert(called,0)
var matched = $.run.again('body',true)
assert(called,i)
assert(matched,num)
console.timeEnd('running')
}
try {
test();
document.write('<p class="ok">'+assert.passed+' tests passed!</p>')
} catch(e){
document.write('<p class="error">Error in test:</p>')
document.write('<pre>'+e.stack+'</pre>')
}
try {
var t = +new Date;
for(var i=0; i<10; i++ )
bench(100);
t = (+new Date)-t;
document.write('<p class="ok">Benchmark passed! ('+t+' ms total, '+t/i+' ms avg)</p>')
} catch(e){
document.write('<p class="error">Error in benchmark:</p>')
document.write('<pre>'+e.stack+'</pre>')
}
</script>
</body>
</html>