jquery.flot.touch.Test.js

/* 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);
        });
    });
});