Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

252 lines (205 sloc) 5.995 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="test.css">
<title>Zepto touch unit tests</title>
<script src="../vendor/evidence.js"></script>
<script src="evidence_runner.js"></script>
<script src="../src/polyfill.js"></script>
<script src="../src/zepto.js"></script>
<script src="../src/event.js"></script>
<script src="../src/touch.js"></script>
</head>
<body>
<h1>Touch tests</h1>
<p id="results">
Running… see browser console for results
</p>
<style>
#test {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 50px;
}
</style>
<script>
(function(){
// Fire a simulated touch event.
// While it is possible to fire real touch events,
// there are cross-browser issues, and this way we
// can test touch events in browsers that don't
// actually support touch input (like desktop Safari).
//
// Zepto's touch module only uses the `pageX/Y` and `target`
// properties of the first touch in the `touches` TouchList
function fire(type, element, x, y) {
var event = document.createEvent('Event'),
touch = { pageX: x, pageY: y, target: element }
event.initEvent('touch'+type, true, true)
event.touches = [touch]
element.dispatchEvent(event)
}
function down(element, x, y) {
fire('start', element, x, y)
}
function move(element, x,y) {
fire('move', element, x, y)
}
function up(element) {
fire('end', element)
}
Evidence('TouchTest', {
setUp: function(){
$('<div id=test>TEST ELEMENT</div>').appendTo('body')
},
tearDown: function(){
$('#test').off()
$('#test').remove()
},
testTap: function(t){
var count = 0, element = $('#test').get(0)
$('#test').on('tap', function(){
count++
})
down(element, 10, 10)
up(element)
t.pause()
setTimeout(function(){
t.resume(function(){
t.assertEqual(1, count)
})
}, 50)
},
testSingleTapDoesNotInterfereWithTappingTwice: function(t){
var count = 0, element = $('#test').get(0)
$('#test').on('tap', function(){
count++
})
down(element, 10, 10)
up(element)
t.pause()
setTimeout(function(){
down(element, 10, 10)
up(element)
t.resume(function(){
t.pause()
setTimeout(function(){
t.resume(function(){
t.assertEqual(2, count)
})
}, 200)
})
}, 200)
},
// should be fired if there is one tap within 250ms
testSingleTap: function(t){
var singleCount = 0, doubleCount = 0, element = $('#test').get(0)
$('#test').on('singleTap', function(){
singleCount++
}).on('doubleTap', function(){
doubleCount++
})
down(element, 10, 10)
up(element)
t.pause()
setTimeout(function(){
t.resume(function(){
t.assertEqual(1, singleCount)
t.assertEqual(0, doubleCount)
})
}, 300)
},
// should be fired if there are two taps within 250ms
testDoubleTap: function(t){
var singleCount = 0, doubleCount = 0, element = $('#test').get(0)
$('#test').on('singleTap', function(){
singleCount++
}).on('doubleTap', function(){
doubleCount++
})
down(element, 10, 10)
up(element)
t.pause()
setTimeout(function(){
down(element, 12, 12)
up(element)
t.resume(function(){
t.pause()
setTimeout(function(){
t.resume(function(){
t.assertEqual(0, singleCount)
t.assertEqual(1, doubleCount)
})
}, 100)
})
}, 100)
},
// should be fired if the finger is down in the same location for >750ms
testLongTap: function(t){
var count = 0, element = $('#test').get(0)
$('#test').on('longTap', function(){
count++
})
down(element, 10, 10)
t.pause()
setTimeout(function(){
up(element)
t.resume(function(){
t.assertEqual(1, count)
})
}, 900)
},
testLongTapDoesNotFireIfFingerIsMoved: function(t){
var count = 0, element = $('#test').get(0)
$('#test').on('longTap', function(){
count++
})
down(element, 10, 10)
t.pause()
setTimeout(function(){
move(element, 50, 10)
t.resume(function(){
t.pause()
setTimeout(function(){
up(element)
t.resume(function(){
t.assertEqual(0, count)
})
}, 450)
})
}, 450)
},
testSwipe: function(t){
var swipeCount = 0, element = $('#test').get(0), touchObject = {};
$('#test').on('swipe', function(e, touch){
swipeCount++
touchObject = touch
})
down(element, 10, 10)
t.pause()
setTimeout(function(){
move(element, 70, 10)
up(element)
t.resume(function(){
t.pause()
setTimeout(function(){
t.resume(function(){
t.assertEqual(1, swipeCount)
t.assertEqual(
[10, 10, 70, 10].join(','),
[touchObject.x1, touchObject.y1, touchObject.x2, touchObject.y2].join(','))
})
}, 50)
})
}, 50)
}
// TODO: test swipes in specific directions
})
})()
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.