mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
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.
223 lines
6.3 KiB
JavaScript
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);
|
|
});
|
|
|
|
});
|