Files
ionic-framework/js/ext/angular/test/service/ionicTap.unit.js
Adam Bradley 3ee5ea77a6 fix(tap): Deactivate elements during scroll at the same time click is ignored, #997
Previously I disabled the activation class immediately on a touchmove,
where as the click will still work if you touchstart and touchend
within a few pixels of each other. So visually it may have looked like
the click shouldn't have worked. I just updated it so the use the same
numbers. For example, if you hold down an item and move just 5 pixels,
the item will stay active (before it wouldn't have), and the click will
fire. But at the same time, if you hold down an item, and move a larger
distance, once it realizes that it went farther than 6 pixels it'll not
allow a click to happen, AND it'll not show the item as being active.
2014-04-03 23:24:31 -05:00

223 lines
6.3 KiB
JavaScript

describe('Ionic Tap', function() {
beforeEach(function() {
window.console.debug = function(){};
ionic.tap.reset();
});
it('Should not focus on an input if it has scrolled', function() {
var targetEle = {
dispatchEvent: function() {},
focus: function() { this.isFocused = true; }
};
ionic.tap.setStart({clientX: 100, clientY: 100});
targetEle.tagName = 'INPUT';
var e = {
clientX: 100, clientY: 200,
preventDefault: function() {}
};
ionic.tap.simulateClick(targetEle, e);
expect(targetEle.isFocused).toBeUndefined();
});
it('Should focus on an input if it hasnt scrolled', function() {
var targetEle = {
dispatchEvent: function() {},
focus: function() { this.isFocused = true; }
};
ionic.tap.setStart({clientX: 100, clientY: 100});
targetEle.tagName = 'INPUT';
var e = {
clientX: 100, clientY: 100,
preventDefault: function() {}
};
ionic.tap.simulateClick(targetEle, e);
expect(targetEle.isFocused).toEqual(true);
});
it('Should preventDefault on an input', function() {
var targetEle = {
dispatchEvent: function() {},
focus: function() {}
};
ionic.tap.setStart({ clientX: 100, clientY: 100 });
var e = {
clientX: 100, clientY: 100,
preventDefault: function() { this.preventedDefault = true }
};
targetEle.tagName = 'INPUT';
ionic.tap.simulateClick(targetEle, e);
expect(e.preventedDefault).toEqual(true);
e.preventedDefault = false;
targetEle.tagName = 'TEXTAREA';
ionic.tap.simulateClick(targetEle, e);
expect(e.preventedDefault).toEqual(true);
e.preventedDefault = false;
targetEle.tagName = 'DIV';
ionic.tap.simulateClick(targetEle, e);
expect(e.preventedDefault).toEqual(false);
e.preventedDefault = false;
});
it('Should setStart and hasScrolled true if >= touch tolerance', function() {
ionic.tap.setStart({ clientX: 100, clientY: 100 });
var s = ionic.tap.hasScrolled({ clientX: 111, clientY: 100 });
expect(s).toEqual(true);
s = ionic.tap.hasScrolled({ clientX: 89, clientY: 100 });
expect(s).toEqual(true);
s = ionic.tap.hasScrolled({ clientX: 100, clientY: 107 });
expect(s).toEqual(true);
s = ionic.tap.hasScrolled({ clientX: 100, clientY: 93 });
expect(s).toEqual(true);
s = ionic.tap.hasScrolled({ clientX: 100, clientY: 200 });
expect(s).toEqual(true);
});
it('Should setStart and hasScrolled false if less than touch tolerance', function() {
ionic.tap.setStart({ clientX: 100, clientY: 100 });
var s = ionic.tap.hasScrolled({ clientX: 100, clientY: 100 });
expect(s).toEqual(false);
s = ionic.tap.hasScrolled({ clientX: 104, clientY: 100 });
expect(s).toEqual(false);
s = ionic.tap.hasScrolled({ clientX: 96, clientY: 100 });
expect(s).toEqual(false);
s = ionic.tap.hasScrolled({ clientX: 100, clientY: 102 });
expect(s).toEqual(false);
s = ionic.tap.hasScrolled({ clientX: 100, clientY: 98 });
expect(s).toEqual(false);
});
it('Should not be hasScrolled if 0 coordinates', function() {
var s = ionic.tap.hasScrolled({ clientX: 0, clientY: 0 });
expect(s).toEqual(false);
});
it('Should dispatch a mouse event', function() {
var targetEle = {
dispatchEvent: function(clickEvent) {
this.clickEvent = clickEvent;
}
};
var e = { clientX: 99, clientY: 88 };
ionic.tap.simulateClick(targetEle, e);
expect(targetEle.clickEvent.clientX).toEqual(99);
expect(targetEle.clickEvent.clientY).toEqual(88);
});
it('Should get coordinates from client originalEvent changedTouches', function() {
var e = {
clientX: 99,
clientY: 99,
originalEvent: {
changedTouches: [{ clientX: 77, clientY: 77 }]
}
};
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:77, y: 77});
});
it('Should get coordinates from client mouse originalEvent', function() {
var e = {
clientX: 99,
clientY: 99,
originalEvent: {
clientX: 88,
clientY: 88,
}
};
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:88, y: 88});
});
it('Should get coordinates from page mouse event', function() {
var e = { pageX: 77, pageY: 77 };
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:77, y: 77});
});
it('Should get coordinates from client mouse event', function() {
var e = { clientX: 77, clientY: 77 };
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:77, y: 77});
});
it('Should get coordinates from changedTouches touches', function() {
var e = {
touches: [{ clientX: 99, clientY: 99 }],
changedTouches: [{ clientX: 88, clientY: 88 }]
};
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:88, y: 88});
});
it('Should get coordinates from page touches', function() {
var e = {
touches: [{ pageX: 99, pageY: 99 }]
};
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:99, y: 99});
});
it('Should get coordinates from client touches', function() {
var e = {
touches: [{ clientX: 99, clientY: 99 }]
};
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:99, y: 99});
});
it('Should get 0 coordinates', function() {
var e = {};
var c = ionic.tap.getCoordinates(e);
expect(c).toEqual({x:0, y: 0});
});
it('Should not fire a tap for disabled elements', function() {
// Disabled elements should not be tapped
var targetEle = document.createElement('input');
targetEle.disabled = true;
var event = {};
ionic.tap.simulateClick(targetEle, event);
expect(event.tapIgnored).toEqual(true);
});
it('Should not fire a tap for input[file] elements', function() {
// Reported that on Android input[file] does not open using the tap
var targetEle = document.createElement('input');
targetEle.type = 'file';
var event = {};
ionic.tap.simulateClick(targetEle, event);
expect(event.tapIgnored).toEqual(true);
});
it('Should not fire a tap for input[range] elements', function() {
// Range and tap do not agree, probably because it doesn't have a delay to begin with
var targetEle = document.createElement('input');
targetEle.type = 'range';
var event = {};
ionic.tap.simulateClick(targetEle, event);
expect(event.tapIgnored).toEqual(true);
});
});