progress indicators, bug fixes, after a while
This commit is contained in:
Kwesi Banson
494
public/assets/vendors/Flot/tests/jquery.flot.navigate-interaction.Test.js
vendored
Normal file
494
public/assets/vendors/Flot/tests/jquery.flot.navigate-interaction.Test.js
vendored
Normal file
@@ -0,0 +1,494 @@
|
||||
/* 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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user