gentelella/vendors/flot/tests/jquery.flot.navigate-interaction.Test.js

/* eslint-disable */
/* global $, describe, it, xit, xdescribe, after, afterEach, expect*/

describe("flot navigate plugin interactions", function () {
    'use strict';

    var placeholder, plot, eventHolder;
    var options = {
        xaxes: [{
            autoScale: 'exact'
        }],
        yaxes: [{
            autoScale: 'exact'
        }],
        zoom: {
            interactive: true,
            active: true,
            amount: 10
        },
        pan: {
            interactive: true,
            active: true
        }
    };

    beforeEach(function () {
        placeholder = setFixtures('<div id="test-container" style="width: 600px;height: 400px">')
            .find('#test-container');
        jasmine.clock().install();
    });

    afterEach(function () {
        jasmine.clock().uninstall();
    });

    it('do smart pans on mouse drag by default', function () {
        var oldFrameRate = options.pan.frameRate;
        options.pan.frameRate = -1;

        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        eventHolder = plot.getEventHolder();
        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        // drag almost horizontally snap to x direction
        simulate.mouseDown(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50 + plot.width(), 80);

        expect(xaxis.min).toBe(-10);
        expect(xaxis.max).toBe(0);
        expect(yaxis.min).toBe(0);
        expect(yaxis.max).toBe(10);

        simulate.mouseUp(eventHolder, 50 + plot.width(), 80);

        expect(xaxis.min).toBe(-10);
        expect(xaxis.max).toBe(0);
        expect(yaxis.min).toBe(0);
        expect(yaxis.max).toBe(10);

        // drag almost vertically snap to y direction
        simulate.mouseDown(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 60, 70 + plot.height());

        expect(xaxis.min).toBe(-10);
        expect(xaxis.max).toBe(0);
        expect(yaxis.min).toBe(10);
        expect(yaxis.max).toBe(20);

        simulate.mouseUp(eventHolder, 60, 70 + plot.height());

        expect(xaxis.min).toBe(-10);
        expect(xaxis.max).toBe(0);
        expect(yaxis.min).toBe(10);
        expect(yaxis.max).toBe(20);

        // cover finite frame rate case
        plot.destroy();
        options.pan.frameRate = 10;
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        eventHolder = plot.getEventHolder();
        xaxis = plot.getXAxes()[0];
        yaxis = plot.getYAxes()[0];

        // drag diagonally do not snap
        simulate.mouseDown(eventHolder, plot.width() - 50, plot.height() - 70);
        simulate.mouseMove(eventHolder, plot.width() - 50, plot.height() - 70);
        jasmine.clock().tick(100);
        simulate.mouseMove(eventHolder, -50, -70);
        jasmine.clock().tick(100);

        expect(xaxis.min).toBe(10);
        expect(xaxis.max).toBe(20);
        expect(yaxis.min).toBe(-10);
        expect(yaxis.max).toBe(0);

        simulate.mouseUp(eventHolder, -50, -70);

        expect(xaxis.min).toBe(10);
        expect(xaxis.max).toBe(20);
        expect(yaxis.min).toBe(-10);
        expect(yaxis.max).toBe(0);

        options.pan.frameRate = oldFrameRate;
    });

    it('do non-smart pans on mouse drag in non-smart pan mode', function () {
        var oldPanMode = options.pan.mode;
        options.pan.mode = 'manual';
        var oldFrameRate = options.pan.frameRate;
        options.pan.frameRate = -1;

        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        eventHolder = plot.getEventHolder();
        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        // drag almost horizontally do not snap
        var movement = { x: [50, 50 + plot.width()], y: [70, 80] };
        simulate.mouseDown(eventHolder, movement.x[0], movement.y[0]);
        simulate.mouseMove(eventHolder, movement.x[0], movement.y[0]);
        simulate.mouseMove(eventHolder, movement.x[1], movement.y[1]);

        expect(xaxis.min).toBe(-10);
        expect(xaxis.max).toBe(0);
        expect(yaxis.min).toBeGreaterThan(0);
        expect(yaxis.max).toBeGreaterThan(10);
        simulate.mouseUp(eventHolder, movement.x[1], movement.y[1]);

        // cover finite frame rate case
        plot.destroy();
        options.pan.frameRate = 10;
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        eventHolder = plot.getEventHolder();
        xaxis = plot.getXAxes()[0];
        yaxis = plot.getYAxes()[0];

        // drag almost vertically do not snap
        movement = { x: [50, 60], y: [70, 70 + plot.height()] };
        simulate.mouseDown(eventHolder, movement.x[0], movement.y[0]);
        simulate.mouseMove(eventHolder, movement.x[0], movement.y[0]);
        jasmine.clock().tick(100);
        simulate.mouseMove(eventHolder, movement.x[1], movement.y[1]);
        jasmine.clock().tick(100);

        expect(xaxis.min).toBeLessThan(0);
        expect(xaxis.max).toBeLessThan(10);
        expect(yaxis.min).toBe(10);
        expect(yaxis.max).toBe(20);
        simulate.mouseUp(eventHolder, movement.x[1], movement.y[1]);

        options.pan.mode = oldPanMode;
        options.pan.frameRate = oldFrameRate;
    });

    it('lock smart pan snap direction on mouse drag in smart-lock pan mode', function () {
        var oldPanMode = options.pan.mode;
        options.pan.mode = 'smartLock';
        var oldFrameRate = options.pan.frameRate;
        options.pan.frameRate = -1;

        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        eventHolder = plot.getEventHolder();
        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];
        var initialXmin = xaxis.min,
            initialXmax = xaxis.max,
            initialYmin = yaxis.min,
            initialYmax = yaxis.max;

        // drag almost horizontally then vertically snap to x direction
        simulate.mouseDown(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50 + plot.width() / 2, 80);
        simulate.mouseMove(eventHolder, 50 + plot.width(), 70 + plot.height());
        simulate.mouseUp(eventHolder, 50 + plot.width(), 70 + plot.height());

        expect(xaxis.min).toBeLessThan(initialXmin);
        expect(xaxis.max).toBeLessThan(initialXmax);
        expect(yaxis.min).toBe(initialYmin);
        expect(yaxis.max).toBe(initialYmax);

        // drag almost vertically then horizontally snap to y direction
        plot.recenter({});

        simulate.mouseDown(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 60, 70 + plot.height());
        simulate.mouseMove(eventHolder, 50 + plot.width(), 70 + plot.height());
        simulate.mouseUp(eventHolder, 50 + plot.width(), 70 + plot.height());

        expect(xaxis.min).toBe(initialXmin);
        expect(xaxis.max).toBe(initialXmax);
        expect(yaxis.min).toBeGreaterThan(initialYmin);
        expect(yaxis.max).toBeGreaterThan(initialYmax);

        options.pan.mode = oldPanMode;
        options.pan.frameRate = oldFrameRate;
    });

    it('do not move graph on mouse drag if pan mode is invalid', function () {
        var oldPanMode = options.pan.mode;
        options.pan.mode = '';
        var oldFrameRate = options.pan.frameRate;
        options.pan.frameRate = -1;

        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        eventHolder = plot.getEventHolder();
        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];
        var initialXmin = xaxis.min,
            initialXmax = xaxis.max,
            initialYmin = yaxis.min,
            initialYmax = yaxis.max;

        // do not drag in all cases
        simulate.mouseDown(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50 + plot.width() / 2, 70);
        simulate.mouseUp(eventHolder, 50 + plot.width(), 70);

        expect(xaxis.min).toBe(initialXmin);
        expect(xaxis.max).toBe(initialXmax);
        expect(yaxis.min).toBe(initialYmin);
        expect(yaxis.max).toBe(initialYmax);
        
        simulate.mouseDown(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70);
        simulate.mouseMove(eventHolder, 50, 70 + plot.height());
        simulate.mouseUp(eventHolder, 50, 70 + plot.height());
        
        expect(xaxis.min).toBe(initialXmin);
        expect(xaxis.max).toBe(initialXmax);
        expect(yaxis.min).toBe(initialYmin);
        expect(yaxis.max).toBe(initialYmax);

        options.pan.mode = oldPanMode;
        options.pan.frameRate = oldFrameRate;
    });

    it('zooms out on mouse scroll down', function () {
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        var clientX = plot.getPlotOffset().left + xaxis.p2c(0);
        var clientY = plot.getPlotOffset().top + yaxis.p2c(0);

        eventHolder = plot.getEventHolder();
        simulate.mouseWheel(eventHolder, clientX, clientY, 0, 100);

        /*
            I would really like better precission but:
                * the browsers may place the graph to fractional pixel coordinates
                * we can only deliver mouse events at integer coordinates
                * so we can't align precisely our mouse clicks with a point specified in plot coordinates
            hence our precission sucks.

            But this test isn't about precission, so we are fine
         */
        expect(xaxis.min).toBeCloseTo(0, 0);
        expect(xaxis.max).toBeCloseTo(100, 0);
        expect(yaxis.min).toBeCloseTo(0, 0);
        expect(yaxis.max).toBeCloseTo(100, 0);
    });

    it('zooms in on mouse scroll up', function () {
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        var clientX = plot.getPlotOffset().left + xaxis.p2c(0);
        var clientY = plot.getPlotOffset().top + yaxis.p2c(0);

        eventHolder = plot.getEventHolder();
        simulate.mouseWheel(eventHolder, clientX, clientY, 0, -100);

        /*
            I would really like better precission but:
                * the browsers may place the graph to fractional pixel coordinates
                * we can only deliver mouse events at integer coordinates
                * so we can't align precisely our mouse clicks with a point specified in plot coordinates
            hence our precission sucks.

            But this test isn't about precission, so we are fine
         */
        expect(xaxis.min).toBeCloseTo(0, 1);
        expect(xaxis.max).toBeCloseTo(1, 1);
        expect(yaxis.min).toBeCloseTo(0, 1);
        expect(yaxis.max).toBeCloseTo(1, 1);
    });

    it('constrains the mouse scroll zoom to the hovered axis ', function () {
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        var clientX = plot.getPlotOffset().left + xaxis.p2c(0);
        var clientY = xaxis.box.top + xaxis.box.height/2;

        eventHolder = plot.getEventHolder();
        simulate.mouseWheel(eventHolder, clientX, clientY, 0, -100);

        expect(xaxis.min).toBeCloseTo(0, 1);
        expect(xaxis.max).toBeCloseTo(1, 1);
        expect(yaxis.min).toBeCloseTo(0, 1);
        expect(yaxis.max).toBeCloseTo(10, 1);
    });

    it('zooms out proportional with the deltaY on Mac platforms', function () {
        var smallAmount = 0.4,
            largerAmount = 0.8,
            plot1Ranges = plotAndScroll(smallAmount),
            plot2Ranges = plotAndScroll(largerAmount);
        expect(plot1Ranges.xaxisMin).toBeLessThan(plot2Ranges.xaxisMin);
        expect(plot1Ranges.xaxisMax).toBeGreaterThan(plot2Ranges.xaxisMax);
        expect(plot1Ranges.yaxisMin).toBeLessThan(plot2Ranges.yaxisMin);
        expect(plot1Ranges.yaxisMax).toBeGreaterThan(plot2Ranges.yaxisMax);
    });

    it('zooms out regardless the deltaY value on non Mac platforms', function () {
        var smallAmount = 40,
            largerAmount = 80,
            plot1Ranges = plotAndScroll(smallAmount),
            plot2Ranges = plotAndScroll(largerAmount);
        expect(plot2Ranges.xaxisMin).toBeCloseTo(plot1Ranges.xaxisMin);
        expect(plot2Ranges.xaxisMax).toBeCloseTo(plot1Ranges.xaxisMax);
        expect(plot2Ranges.yaxisMin).toBeCloseTo(plot1Ranges.yaxisMin);
        expect(plot2Ranges.yaxisMax).toBeCloseTo(plot1Ranges.yaxisMax);
    });

    function plotAndScroll(amount) {
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], options);

        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        var clientX = plot.getPlotOffset().left + xaxis.p2c(5);
        var clientY = plot.getPlotOffset().top + yaxis.p2c(5);

        eventHolder = plot.getEventHolder();
        simulate.mouseWheel(eventHolder, clientX, clientY, 0, amount);

        return {
            xaxisMin: xaxis.min,
            xaxisMax: xaxis.max,
            yaxisMin: yaxis.min,
            yaxisMax: yaxis.max
        };
    }

    it('zooms mode handles event on mouse dblclick', function () {
        plot = $.plot(placeholder, [
            [[0, 0],
            [10, 10]]
        ], {
        xaxes: [{
            autoScale: 'exact'
        }],
        yaxes: [{
            autoScale: 'exact'
        }],
        zoom: {
            interactive: false,
            highlighted: true
        },
        pan: {
            interactive: true,
            highlighted: true
        },
        selection: {
            mode: 'smart',
        }});

        var xaxis = plot.getXAxes()[0];
        var yaxis = plot.getYAxes()[0];

        var clientX = plot.getPlotOffset().left + xaxis.p2c(0);
        var clientY = plot.getPlotOffset().top + yaxis.p2c(0);

        eventHolder = plot.getEventHolder();
        var spy = spyOn(eventHolder, 'ondblclick').and.callThrough();

        var spyRecenter = jasmine.createSpy('spy');
        $(plot.getPlaceholder()).on('re-center', spyRecenter);

        simulate.dblclick(eventHolder, 10, 20);

        expect(spy).toHaveBeenCalled();
        expect(spyRecenter).toHaveBeenCalled();
    });

    it('shows that the eventHolder is cleared through shutdown when the plot is replaced', function() {
        plot = $.plot(placeholder, [[]], options);

        var eventHolder = plot.getEventHolder(),
            spy = spyOn(eventHolder, 'removeEventListener').and.callThrough();

        plot = $.plot(placeholder, [[]], options);

        expect(spy).toHaveBeenCalledWith('mousewheel', jasmine.any(Function), jasmine.any(Boolean))
        expect(spy).toHaveBeenCalledWith('dblclick', jasmine.any(Function), jasmine.any(Boolean));
    });

    it('do recenter for double click by default', () => {
        plot = $.plot(placeholder, [
            [[0, 0], [10, 10]]
        ], {
            xaxes: [{ autoScale: 'exact' }],
            yaxes: [{ autoScale: 'exact' }],
        });

        var eventHolder = plot.getEventHolder(),
            xaxis = plot.getXAxes()[0],
            yaxis = plot.getYAxes()[0],
            spyRecenter = jasmine.createSpy('spy');
        $(plot.getPlaceholder()).on('re-center', spyRecenter);

        plot.pan({ left: 10, top: 10});

        simulate.dblclick(eventHolder, 200, 150);

        expect(xaxis.options.offset).toEqual({ below: 0, above: 0 });
        expect(yaxis.options.offset).toEqual({ below: 0, above: 0 });
        expect(spyRecenter).toHaveBeenCalled();
    });

    it('do not recenter for double click if recenter is disabled', () => {
        plot = $.plot(placeholder, [
            [[0, 0], [10, 10]]
        ], {
            xaxes: [{ autoScale: 'exact' }],
            yaxes: [{ autoScale: 'exact' }],
            pan: { interactive: true },
            zoom: { interactive: true },
            recenter: { interactive: false },
        });

        var eventHolder = plot.getEventHolder(),
            xaxis = plot.getXAxes()[0],
            yaxis = plot.getYAxes()[0],
            spyRecenter = jasmine.createSpy('spy');
        $(plot.getPlaceholder()).on('re-center', spyRecenter);

        plot.pan({ left: 10, top: 10});

        simulate.dblclick(eventHolder, 200, 150);

        expect(xaxis.options.offset).not.toEqual({ below: 0, above: 0 });
        expect(yaxis.options.offset).not.toEqual({ below: 0, above: 0 });
        expect(spyRecenter).not.toHaveBeenCalled();
    });
});