siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
433 lines (337 loc) • 14.8 kB
JavaScript
StartTest(function (t) {
var supportsPointerEnterLeaveEvents = !t.bowser.safari;
var tapSequence = [
'pointerover',
'pointerenter',
'pointerdown',
'touchstart',
'pointerup',
'pointerout',
'pointerleave',
'touchend',
'mouseover',
// 'mouseenter', // Seems only fired on first page touchstart only, we skip it
'mousemove',
'mousedown',
'mouseup',
'click'
].filter(e => supportsPointerEnterLeaveEvents || (e !== 'pointerenter' && e !== 'pointerleave'));
var tapSequenceWithTouchStartPrevented = [
'pointerover',
'pointerenter',
'pointerdown',
'touchstart',
'pointerup',
'pointerout',
'pointerleave',
'touchend'
].filter(e => supportsPointerEnterLeaveEvents || (e !== 'pointerenter' && e !== 'pointerleave'));
var tapSequenceWithPointerDownPrevented = [
'pointerover',
'pointerenter',
'pointerdown',
'touchstart',
'pointerup',
'pointerout',
'pointerleave',
'touchend',
'mouseover',
// 'mouseenter', // Seems only fired on first page touchstart only, we skip it
'click',
].filter(e => supportsPointerEnterLeaveEvents || (e !== 'pointerenter' && e !== 'pointerleave'));
var dragSequence = [
'pointerover',
'pointerenter',
'pointerdown',
'touchstart',
'pointerup',
'pointerout',
'pointerleave',
'touchend'
].filter(e => supportsPointerEnterLeaveEvents || (e !== 'pointerenter' && e !== 'pointerleave'));
var longPressSequence = [
'pointerover',
'pointerenter',
'pointerdown',
'touchstart',
'mouseover',
// 'mouseenter', // Seems only fired on first page touchstart only, we skip it
'mousemove',
'contextmenu'
].filter(e => supportsPointerEnterLeaveEvents || (e !== 'pointerenter' && e !== 'pointerleave'));
t.describe('tap', t => {
document.body.innerHTML = '<div id="tapme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
t.it('Should fire correct events for normal tap gesture', async t => {
var el = document.getElementById('tapme');
var count = 0;
tapSequence.forEach(event => {
t.firesOnce(el, event);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
await t.tap('#tapme');
});
t.it('Should not fire mouseover event for normal tap gesture when tap was made on same target as last touchstart', async t => {
var el = document.getElementById('tapme');
var count = 0;
tapSequence.filter(event => event !== 'mouseover').forEach(event => {
t.firesOnce(el, event);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
t.wontFire(el, 'mouseover');
await t.tap('#tapme');
});
t.it('Should fire correct events for tap gesture when `touchstart` is prevented', async t => {
var el = document.getElementById('tapme');
// Tapping on same target
tapSequenceWithTouchStartPrevented.filter(e => e !== 'mouseover').forEach(event => {
t.firesOnce(el, event);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
// NOT EXPECTED
[
'mouseover',
'mouseenter',
'mousemove',
'mousedown',
'mouseup',
'click',
].forEach(event => {
t.wontFire(el, event);
// For testing
el.addEventListener(event, e => console.log(e.type))
});
el.addEventListener('touchstart', e => event.preventDefault());
await t.tap('#tapme');
});
t.it('Should fire correct events for tap gesture when `pointerdown` is prevented', async t => {
var el = document.getElementById('tapme');
tapSequenceWithTouchStartPrevented.filter(e => e !== 'mouseover').forEach(event => {
t.firesOnce(el, event);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
el.addEventListener('pointerdown', e => event.preventDefault());
await t.tap('#tapme');
});
})
t.describe('doubletap', t => {
t.it('Should fire correct events for double tap gesture', async t => {
document.body.innerHTML = '<div id="tapme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
var el = document.getElementById('tapme');
tapSequence.forEach(event => {
if (event === 'mouseover') {
t.willFireNTimes(el, event, 1);
} else {
t.willFireNTimes(el, event, 2);
}
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
t.firesOnce(el, 'dblclick');
await t.doubleTap('#tapme');
});
});
t.describe('drag', t => {
t.it('Should fire correct events for drag gesture', async t => {
document.body.innerHTML = '<div id="dragme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
var el = document.getElementById('dragme');
// EXPECTED
dragSequence.forEach(event => {
t.firesOnce(el, event);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
['touchmove', 'pointermove'].forEach(event => {
t.firesAtLeastNTimes(el, event, 5);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
// NOT EXPECTED
[
'mousedown',
'mouseover',
'mouseenter',
'mousemove',
'mouseup',
'click',
].forEach(event => {
t.wontFire(el, event);
// For testing
el.addEventListener(event, e => console.log(e.type))
});
var startX, startY, movedXAxis, movedYAxis, touchMoveEvent, pointerDownEvent, pointerUpEvent;
el.addEventListener('pointerdown', function (e) {
pointerDownEvent = e;
startX = e.clientX;
startY = e.clientY;
});
el.addEventListener('pointerup', function (e) {
pointerUpEvent = e;
});
el.addEventListener('touchmove', function (e) {
touchMoveEvent = e;
if (e.changedTouches[0].clientX > startX) {
movedXAxis = true;
}
if (e.changedTouches[0].clientY > startY) {
movedYAxis = true;
}
});
await t.touchDragBy('#dragme', [30, 30]);
t.ok(movedXAxis, 'Moved along X-axis');
t.ok(movedYAxis, 'Moved along Y-axis');
t.is(touchMoveEvent.changedTouches[0].clientX, pointerUpEvent.clientX, 'last touchMove fired at correct X position')
t.is(touchMoveEvent.changedTouches[0].clientY, pointerUpEvent.clientY, 'last touchMove fired at correct X position')
t.isNot(touchMoveEvent.changedTouches[0].clientX, pointerDownEvent.clientX, 'last touchMove fired at correct X position')
t.isNot(touchMoveEvent.changedTouches[0].clientY, pointerDownEvent.clientY, 'last touchMove fired at correct X position')
});
t.it('Should fire correct events for drag gesture when doing the steps manually', async t => {
document.body.innerHTML = '<div id="dragme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
var el = document.getElementById('dragme');
// EXPECTED
dragSequence.forEach(event => {
t.firesOnce(el, event);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
['touchmove', 'pointermove'].forEach(event => {
t.firesAtLeastNTimes(el, event, 5);
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
// NOT EXPECTED
[
'mousedown',
'mouseover',
'mouseenter',
'mousemove',
'mouseup',
'click',
].forEach(event => {
t.wontFire(el, event);
// For testing
el.addEventListener(event, e => console.log(e.type))
});
var startX, startY, movedXAxis, movedYAxis, touchMoveEvent, pointerDownEvent, pointerUpEvent;
el.addEventListener('pointerdown', function (e) {
pointerDownEvent = e;
startX = e.clientX;
startY = e.clientY;
});
el.addEventListener('pointerup', function (e) {
pointerUpEvent = e;
});
el.addEventListener('touchmove', function (e) {
touchMoveEvent = e;
if (e.changedTouches[0].clientX > startX) {
movedXAxis = true;
}
if (e.changedTouches[0].clientY > startY) {
movedYAxis = true;
}
});
await t.touchStart('#dragme');
await t.movePointerBy([30, 30]);
t.touchEnd();
t.ok(movedXAxis, 'Moved along X-axis');
t.ok(movedYAxis, 'Moved along Y-axis');
t.is(touchMoveEvent.changedTouches[0].clientX, pointerUpEvent.clientX, 'last touchMove fired at correct X position')
t.is(touchMoveEvent.changedTouches[0].clientY, pointerUpEvent.clientY, 'last touchMove fired at correct X position')
t.isNot(touchMoveEvent.changedTouches[0].clientX, pointerDownEvent.clientX, 'last touchMove fired at correct X position')
t.isNot(touchMoveEvent.changedTouches[0].clientY, pointerDownEvent.clientY, 'last touchMove fired at correct X position')
});
});
t.describe('longpress', t => {
t.it('Should fire correct events for longpress', async t => {
document.body.innerHTML = '<div id="pressme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
var el = document.getElementById('pressme');
var nbrEventsFired = 0;
// EXPECTED
longPressSequence.forEach(event => {
t.firesOnce(el, event);
el.addEventListener(event, e => {
t.is(e.type, longPressSequence[nbrEventsFired], 'correct type: ' + e.type);
nbrEventsFired++;
})
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
// NOT EXPECTED
[
'mouseenter',
'mousedown',
'mouseup',
'click',
'touchend',
'pointerup'
].forEach(event => {
t.wontFire(el, event);
// For testing
el.addEventListener(event, e => console.log(e.type))
});
await t.longPress('#pressme');
t.is(nbrEventsFired, longPressSequence.length, 'Correct number of events fired')
});
t.it('Should use correct target / clientX / clientY for longpress', async t => {
document.body.innerHTML = '<div id="pressme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
var el = document.getElementById('pressme');
var nbrEventsFired = 0;
longPressSequence.forEach(event => {
t.firesOnce(el, event);
el.addEventListener(event, e => {
t.is(e.clientX || e.touches[0].clientX, 60, e.type + ': correct clientX');
t.is(e.clientY || e.touches[0].clientY, 60, e.type + ': correct clientY');
t.is(e.target, el, e.type + ': correct target');
t.is(e.type, longPressSequence[nbrEventsFired], 'correct type: ' + e.type);
nbrEventsFired++;
})
});
await t.longPress('#pressme', null, null, null, [10, 10]);
});
t.it('Should fire correct events for longpress with touchstart prevented', async t => {
document.body.innerHTML = '<div id="pressme" style="height:100px;width:100px;background:#999;margin:50px">HELLO</div>';
var el = document.getElementById('pressme');
var nbrEventsFired = 0;
// EXPECTED
var expectedEvents = [
'pointerdown',
'touchstart',
'mousemove',
'contextmenu'
];
el.addEventListener('touchstart', e => {
setTimeout(() => {
e.preventDefault();
}, 10)
});
expectedEvents.forEach(event => {
t.firesOnce(el, event);
el.addEventListener(event, e => {
t.is(e.type, expectedEvents[nbrEventsFired], 'correct type: ' + e.type);
nbrEventsFired++;
})
// For testing
// el.addEventListener(event, e => console.log(e.type))
});
// NOT EXPECTED
[
'mouseover',
'mouseenter',
'mousedown',
'mouseup',
'click',
'touchend',
'pointerup'
].forEach(event => {
t.wontFire(el, event);
// For testing
el.addEventListener(event, e => console.log(e.type))
});
await t.longPress('#pressme');
t.is(nbrEventsFired, expectedEvents.length, 'Correct number of events fired')
});
});
})