mirror of https://github.com/ColorlibHQ/gentelella
517 lines
18 KiB
JavaScript
517 lines
18 KiB
JavaScript
/* eslint-disable */
|
|
/* global $, describe, it, xit, xdescribe, after, afterEach, expect*/
|
|
|
|
describe("flot touch plugin", function () {
|
|
var placeholder, plot, options;
|
|
|
|
beforeEach(function () {
|
|
placeholder = setFixtures('<div id="test-container" style="width: 600px;height: 400px">')
|
|
.find('#test-container');
|
|
options = {
|
|
xaxes: [{ autoScale: 'exact' }],
|
|
yaxes: [{ autoScale: 'exact' }],
|
|
zoom: { interactive: true, amount: 10, active: true },
|
|
pan: { interactive: true, frameRate: -1, enableTouch: true, active: true }
|
|
};
|
|
});
|
|
|
|
it('shows that the eventHolder is cleared through shutdown when the plot is replaced', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventPlaceholder = plot.getEventHolder();
|
|
spy = spyOn(eventPlaceholder, 'removeEventListener').and.callThrough();
|
|
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
expect(spy).toHaveBeenCalledWith('touchstart', jasmine.any(Function))
|
|
expect(spy).toHaveBeenCalledWith('touchmove', jasmine.any(Function));
|
|
expect(spy).toHaveBeenCalledWith('touchend', jasmine.any(Function));
|
|
});
|
|
|
|
it('do not stop origin touch event propagation if it is allowed', () => {
|
|
jasmine.clock().install().mockDate();
|
|
|
|
var oldPropagateSupportedGesture = options.propagateSupportedGesture ;
|
|
options.propagateSupportedGesture = true;
|
|
|
|
plot = $.plot(placeholder, [[]], options);
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('origin touch event handler');
|
|
|
|
eventHolder.parentNode.addEventListener('touchstart', spy, { once: true });
|
|
eventHolder.parentNode.addEventListener('touchmove', spy, { once: true });
|
|
eventHolder.parentNode.addEventListener('touchend', spy, { once: true });
|
|
|
|
var bubbleTouchEvents = [
|
|
new UIEvent('touchstart', { bubbles: true }),
|
|
new UIEvent('touchmove', { bubbles: true }),
|
|
new UIEvent('touchend', { bubbles: true }),
|
|
];
|
|
bubbleTouchEvents.forEach((event) => {
|
|
event.touches = [{ identifier: 0, target: eventHolder }];
|
|
eventHolder.dispatchEvent(event);
|
|
});
|
|
|
|
expect(spy).toHaveBeenCalledTimes(3);
|
|
|
|
options.propagateSupportedGesture = oldPropagateSupportedGesture;
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
describe('long tap', function() {
|
|
|
|
beforeEach(function() {
|
|
jasmine.clock().install().mockDate();
|
|
});
|
|
|
|
afterEach(function() {
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
it('should trigger the long tap event',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('long tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('longtap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(1600);
|
|
jasmine.clock().tick(1600);
|
|
jasmine.clock().tick(1600);
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should trigger the long tap event even when there is a small move of the touch point',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('long tap handler'),
|
|
initialCoords = [{x: 10, y: 20}],
|
|
finalCoords = [{x: 11, y: 21}];
|
|
|
|
eventHolder.addEventListener('longtap', spy);
|
|
|
|
simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart');
|
|
simulate.sendTouchEvents(finalCoords, eventHolder, 'touchmove');
|
|
jasmine.clock().tick(1600);
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should not trigger the long tap event when there is a large move of the touch point',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('long tap handler'),
|
|
initialCoords = [{x: 10, y: 20}],
|
|
finalCoords = [{x: 100, y: 200}];
|
|
|
|
eventHolder.addEventListener('longtap', spy);
|
|
|
|
simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart');
|
|
simulate.sendTouchEvents(finalCoords, eventHolder, 'touchmove');
|
|
jasmine.clock().tick(1600);
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not trigger the long tap event when the touch ends too soon',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('long tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('longtap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(1400);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchend');
|
|
jasmine.clock().tick(200);
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not trigger the long tap event when the plot is replaced', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('long tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('longtap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
plot = $.plot(placeholder, [[]], options);
|
|
jasmine.clock().tick(1600);
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should trigger multiple long tap events',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('long tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('longtap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(1600);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchend');
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(1600);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchend');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(2);
|
|
});
|
|
});
|
|
|
|
describe('pinch', function() {
|
|
|
|
beforeEach(function() {
|
|
jasmine.clock().install().mockDate();
|
|
});
|
|
|
|
afterEach(function() {
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
it('should be able to trigger pinchstart event',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('pinch handler'),
|
|
coords = [{x: 10, y: 20}, {x: 15, y: 20}];
|
|
|
|
eventHolder.addEventListener('pinchstart', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should not trigger pinch event for plot not active',function() {
|
|
plot = $.plot(placeholder, [
|
|
[
|
|
[0, 0],
|
|
[10, 10]
|
|
]
|
|
], {
|
|
xaxes: [{ autoScale: 'exact' }],
|
|
yaxes: [{ autoScale: 'exact' }],
|
|
zoom: { interactive: true, active: false, amount: 10 },
|
|
pan: { interactive: true, active: false, frameRate: -1 }
|
|
});
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('pinch handler'),
|
|
coords = [{x: 10, y: 20}, {x: 15, y: 20}];
|
|
|
|
eventHolder.addEventListener('pinchstart', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
|
|
it('should not trigger pinch event for only one touch',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('pinch handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('pinchstart', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
|
|
it('should not trigger pinch event for touch outside plot',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
mockEventHolder = {},
|
|
spy = jasmine.createSpy('pinch handler'),
|
|
coords = [{x: 10, y: 20}, {x: 15, y: 20}];
|
|
|
|
eventHolder.addEventListener('pinchstart', spy);
|
|
|
|
mockEventHolder.dispatchEvent = function() {};
|
|
|
|
simulate.sendTouchEvents(coords, mockEventHolder, 'touchstart');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
|
|
it('allows default propagation for three touches',function() {
|
|
plot = $.plot(placeholder, [], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
touchCoords = [{pageX: 10, pageY: 20}, {pageX: 15, pageY: 20}, {pageX: 20, pageY: 25}],
|
|
touchStartEvent = new CustomEvent('touchstart'),
|
|
touchMoveEvent = new CustomEvent('touchmove');
|
|
|
|
touchStartEvent.touches = touchCoords;
|
|
touchStartEvent.preventDefault = jasmine.createSpy();
|
|
touchMoveEvent.touches = touchCoords;
|
|
touchMoveEvent.preventDefault = jasmine.createSpy();
|
|
|
|
eventHolder.dispatchEvent(touchStartEvent);
|
|
eventHolder.dispatchEvent(touchMoveEvent);
|
|
|
|
expect(touchStartEvent.preventDefault).not.toHaveBeenCalled();
|
|
expect(touchMoveEvent.preventDefault).not.toHaveBeenCalled();
|
|
|
|
});
|
|
});
|
|
|
|
describe('pan', function() {
|
|
|
|
beforeEach(function() {
|
|
jasmine.clock().install().mockDate();
|
|
});
|
|
|
|
afterEach(function() {
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
it('should be able to trigger pan event',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('pan handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('pan', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'pan');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should not trigger pan event for plot not active',function() {
|
|
plot = $.plot(placeholder, [
|
|
[
|
|
[0, 0],
|
|
[10, 10]
|
|
]
|
|
], {
|
|
xaxes: [{ autoScale: 'exact' }],
|
|
yaxes: [{ autoScale: 'exact' }],
|
|
zoom: { interactive: true, active: false, amount: 10 },
|
|
pan: { interactive: true, active: false, frameRate: -1 }
|
|
});
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('pan handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('pan', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
|
|
it('should not trigger pan event for touch outside plot',function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
mockEventHolder = {},
|
|
spy = jasmine.createSpy('pan handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('panstart', spy);
|
|
|
|
mockEventHolder.dispatchEvent = function() {};
|
|
|
|
simulate.sendTouchEvents(coords, mockEventHolder, 'touchstart');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
});
|
|
|
|
describe('doubletap', function() {
|
|
|
|
beforeEach(function() {
|
|
jasmine.clock().install().mockDate();
|
|
});
|
|
|
|
afterEach(function() {
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
it('should trigger the double tap event', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('double tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('doubletap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(200);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should trigger the double tap event even when there is a different touch point', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('double tap handler'),
|
|
initialCoords = [{x: 10, y: 20}],
|
|
finalCoords = [{x: 11, y: 21}];
|
|
|
|
eventHolder.addEventListener('doubletap', spy);
|
|
|
|
simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(300);
|
|
simulate.sendTouchEvents(finalCoords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should not trigger the double tap event for a big interval between taps', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('double tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('doubletap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(1000);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
|
|
it('should not trigger the double tap event for one of the touches outside plot area', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
mockEventHolder = {},
|
|
spy = jasmine.createSpy('double tap handler'),
|
|
initialCoords = [{x: 10, y: 20}],
|
|
finalCoords = [{x: 100, y: 200}];
|
|
|
|
mockEventHolder.dispatchEvent = function() {};
|
|
|
|
eventHolder.addEventListener('doubletap', spy);
|
|
|
|
simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(100);
|
|
simulate.sendTouchEvents(finalCoords, mockEventHolder, 'touchmove');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('tap', function() {
|
|
|
|
beforeEach(function() {
|
|
jasmine.clock().install().mockDate();
|
|
});
|
|
|
|
afterEach(function() {
|
|
jasmine.clock().uninstall();
|
|
});
|
|
|
|
it('should trigger the tap event', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('tap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(50);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchend');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should trigger the tap event even when there is a different touch point', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('tap handler'),
|
|
initialCoords = [{x: 10, y: 20}],
|
|
finalCoords = [{x: 11, y: 21}];
|
|
|
|
eventHolder.addEventListener('tap', spy);
|
|
|
|
simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(50);
|
|
simulate.sendTouchEvents(finalCoords, eventHolder, 'touchend');
|
|
|
|
expect(spy).toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(1);
|
|
});
|
|
|
|
it('should not trigger the tap event for a big interval between taps', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('tap handler'),
|
|
coords = [{x: 10, y: 20}];
|
|
|
|
eventHolder.addEventListener('tap', spy);
|
|
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchstart');
|
|
jasmine.clock().tick(200);
|
|
simulate.sendTouchEvents(coords, eventHolder, 'touchend');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
|
|
it('should not trigger the tap event for a big interval between taps', function() {
|
|
plot = $.plot(placeholder, [[]], options);
|
|
|
|
var eventHolder = plot.getEventHolder(),
|
|
spy = jasmine.createSpy('tap handler'),
|
|
initalCoords = [{x: 10, y: 20}],
|
|
moveCoords = [{x: 30, y: 60}];;
|
|
|
|
eventHolder.addEventListener('tap', spy);
|
|
|
|
simulate.sendTouchEvents(initalCoords, eventHolder, 'touchstart');
|
|
simulate.sendTouchEvents(moveCoords, eventHolder, 'touchmove');
|
|
jasmine.clock().tick(30);
|
|
simulate.sendTouchEvents(moveCoords, eventHolder, 'touchend');
|
|
|
|
expect(spy).not.toHaveBeenCalled();
|
|
expect(spy.calls.count()).toBe(0);
|
|
});
|
|
});
|
|
});
|