gentelella/vendors/flot/tests/jquery.flot.hover.Test.js

describe("flot hover plugin", function () {
    var placeholder, plot, options;

    var rgba = window.colors.rgba;
    var getEntireCanvasData = window.colors.getEntireCanvasData;
    var canvasData = window.colors.canvasData;

    beforeEach(function () {
        placeholder = setFixtures('<div id="test-container" style="width: 600px;height: 400px">')
            .find('#test-container');
        options = {
            grid: { hoverable: true, clickable: true },
            pan: { enableTouch: true, active: true },
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: false
                }
            }
        };

        jasmine.clock().install().mockDate();

        jasmine.addMatchers(window.colors.jasmineMatchers);
    });

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

    describe('touch hover', function() {
        it('tap on plot triggers plothover event', function() {
            plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                coords = [{x: axisx.p2c(0.5), y: axisy.p2c(-3.5)}],
                spy = jasmine.createSpy('spy');

            $(plot.getPlaceholder()).on('plothover', 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('pan plot triggers plothovercleanup event', function() {
            plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                coords = [{x: axisx.p2c(0.5), y: axisy.p2c(-3.5)}],
                spy = jasmine.createSpy('spy');

            $(plot.getPlaceholder()).on('plothovercleanup', spy);

            simulate.sendTouchEvents(coords, eventHolder, 'touchstart');

            expect(spy).toHaveBeenCalled();
            expect(spy.calls.count()).toBe(1);
        });

        it('set data to the plot triggers plothovercleanup event', function() {
            plot = $.plot(placeholder, [ [ [0, 0], [10, 10] ] ], options);

            var spy = jasmine.createSpy('spy');

            $(plot.getPlaceholder()).on('plothovercleanup', spy);

            plot.setData([1, 2, 3, 4]);

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

    describe('mouse hover', function() {
        beforeEach(function() {
            options.series.hoverable = true;
            options.series.highlightColor = 'rgba(10, 20, 30, 1)';
        });

        it('should highlight the point when hovered', function() {
            plot = $.plot(placeholder, [ [ [0, 0], [2, 3], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                canvas = eventHolder,
                offset = plot.getPlotOffset(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x = axisx.p2c(2) + offset.left,
                y = axisy.p2c(3) + offset.top,
                noButton = 0;

            simulate.mouseMove(eventHolder, x, y, noButton);
            jasmine.clock().tick(100);

            expect(getEntireCanvasData(canvas)).toContainPixelColor(rgba(10, 20, 30, 1));
        });

        it('should highlight the point when hovered from a small distance', function() {
            plot = $.plot(placeholder, [ [ [0, 0], [2, 3], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                canvas = eventHolder,
                offset = plot.getPlotOffset(),
                epsilon = 2,
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x = axisx.p2c(2) + offset.left + epsilon,
                y = axisy.p2c(3) + offset.top - epsilon,
                noButton = 0;

            simulate.mouseMove(eventHolder, x, y, noButton);
            jasmine.clock().tick(100);

            expect(getEntireCanvasData(canvas)).toContainPixelColor(rgba(10, 20, 30, 1));
        });

        it('should not highlight the point when hovered and the grid is not hoverable', function() {
            options.grid.hoverable = false;
            plot = $.plot(placeholder, [ [ [0, 0], [2, 3], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                canvas = eventHolder,
                offset = plot.getPlotOffset(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x = axisx.p2c(2) + offset.left,
                y = axisy.p2c(3) + offset.top,
                noButton = 0;

            simulate.mouseMove(eventHolder, x, y, noButton);
            jasmine.clock().tick(100);

            expect(getEntireCanvasData(canvas)).not.toContainPixelColor(rgba(10, 20, 30, 1));
        });

        it('should not highlight the point when hovered and the series is not hoverable', function() {
            options.series.hoverable = false;
            plot = $.plot(placeholder, [ [ [0, 0], [2, 3], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                canvas = eventHolder,
                offset = plot.getPlotOffset(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x = axisx.p2c(2) + offset.left,
                y = axisy.p2c(3) + offset.top,
                noButton = 0;

            simulate.mouseMove(eventHolder, x, y, noButton);
            jasmine.clock().tick(100);

            expect(getEntireCanvasData(canvas)).not.toContainPixelColor(rgba(10, 20, 30, 1));
        });

        it('should unhighlight the previouse point when hovering a new one', function() {
            plot = $.plot(placeholder, [ [ [0, 0], [2, 3], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                canvas = eventHolder,
                offset = plot.getPlotOffset(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x1 = axisx.p2c(2) + offset.left,
                y1 = axisy.p2c(3) + offset.top,
                x2 = axisx.p2c(10) + offset.left,
                y2 = axisy.p2c(10) + offset.top,
                r = 5,
                noButton = 0;

            simulate.mouseMove(eventHolder, x1, y1, noButton);
            jasmine.clock().tick(100);

            expect(canvasData(canvas, x1 - r, y1 - r, 2 * r, 2 * r)).toContainPixelColor(rgba(10, 20, 30, 1));
            expect(canvasData(canvas, x2 - r, y2 - r, 2 * r, 2 * r)).not.toContainPixelColor(rgba(10, 20, 30, 1));

            simulate.mouseMove(eventHolder, x2, y2, noButton);
            jasmine.clock().tick(100);

            expect(canvasData(canvas, x1 - r, y1 - r, 2 * r, 2 * r)).not.toContainPixelColor(rgba(10, 20, 30, 1));
            expect(canvasData(canvas, x2 - r, y2 - r, 2 * r, 2 * r)).toContainPixelColor(rgba(10, 20, 30, 1));
        });

        it('should update the current hover point to the placeholder when the plot created again', function () {
            plot = $.plot(placeholder, [ [ [0, 0], [2, 3], [10, 10] ] ], options);

            var eventHolder = plot.getEventHolder(),
                offset = plot.getPlotOffset(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x = axisx.p2c(2) + offset.left,
                y = axisy.p2c(3) + offset.top,
                noButton = 0;

            let evt = simulate.mouseMove(eventHolder, x, y, noButton);
            jasmine.clock().tick(1000);

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

            expect(plot.getPlaceholder()[0].lastMouseMoveEvent.originalEvent.x).toEqual(evt.x);
            expect(plot.getPlaceholder()[0].lastMouseMoveEvent.originalEvent.y).toEqual(evt.y);
        });

        it('should highlight a bar when hovered', function() {
            options.series.bars = { show: true, barWidth: 0.5 };
            options.series.lines = undefined;
            plot = $.plot(placeholder, [ [ [0, 3], [1, 5], [2, 4] ] ], options);

            var eventHolder = plot.getEventHolder(),
                canvas = eventHolder,
                offset = plot.getPlotOffset(),
                axisx = plot.getXAxes()[0],
                axisy = plot.getYAxes()[0],
                x = axisx.p2c(1.25) + offset.left,
                y = axisy.p2c(2) + offset.top,
                noButton = 0;

            simulate.mouseMove(eventHolder, x, y, noButton);
            jasmine.clock().tick(100);

            expect(getEntireCanvasData(canvas)).toContainPixelColor(rgba(10, 20, 30, 1));
        });
    });
});