/* eslint-disable */
/* global $, describe, it, xit, xdescribe, after, afterEach, expect*/
describe("flot navigate 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, active: true, amount: 10 },
pan: { interactive: true, active: true, frameRate: -1 }
};
});
it('provides a zoom, zoomOut, pan, smartPan functions', function () {
plot = $.plot(placeholder, [
[]
], options);
expect(typeof plot.zoom).toBe('function');
expect(typeof plot.zoomOut).toBe('function');
expect(typeof plot.pan).toBe('function');
expect(typeof plot.smartPan).toBe('function');
});
describe('zoom', function () {
it('uses the provided amount', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.zoom({
amount: 2
});
expect(xaxis.min).toBe(2.5);
expect(xaxis.max).toBe(7.5);
expect(yaxis.min).toBeCloseTo(2.5, 7);
expect(yaxis.max).toBeCloseTo(7.5, 7);
});
it('works with autoScale', function () {
var xaxis, yaxis,
opts = {
xaxes: [{ autoScale: 'sliding-window' , min: 0, max: 100}],
yaxes: [{ autoScale: 'loose' }],
zoom: { interactive: true, amount: 10 },
pan: { interactive: true, frameRate: -1 }
};
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], opts);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.zoom({
amount: 4,
center: {
left: 0,
top: plot.height()/2
}
});
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(25);
expect(yaxis.min).toBeCloseTo(4.4, 7);
expect(yaxis.max).toBeCloseTo(5.8, 7);
plot.zoom({
amount: -2,
center: {
left: plot.width()/2,
top: plot.height()/2
}
});
expect(xaxis.min).toBeCloseTo(6.25, 2);
expect(xaxis.max).toBe(18.75);
expect(yaxis.min).toBeCloseTo(4.8, 7);
expect(yaxis.max).toBe(5.4);
});
it('uses the amount configured in the plot if none is provided', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.zoom();
expect(xaxis.min).toBe(4.5);
expect(xaxis.max).toBe(5.5);
expect(yaxis.min).toBeCloseTo(4.5, 7);
expect(yaxis.max).toBeCloseTo(5.5, 7);
});
it('uses the provided center', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
plot.zoom({
amount: 2,
center: {
left: 0,
top: plot.height()
}
});
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(5);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(5);
});
it('uses the provided axes', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
plot.zoom({
amount: 2,
center: {
left: 0,
top: plot.height()
},
axes: plot.getXAxes()
});
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(5);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
it ('doesn\'t got to Infinity and beyond', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[-1, -10e200 ],
[1, 10e200]
]
], options);
plot.zoom({
amount: 10e-200
});
yaxis = plot.getYAxes()[0];
expect(yaxis.min).not.toBe(-Infinity);
expect(yaxis.max).not.toBe(Infinity);
});
it('generates subunitary ticks for X axis', function () {
var xaxis, ticks, middle;
plot = $.plot(placeholder, [
[
[3, 0],
[9, 10]
]
], options);
plot.zoom({
amount: 4,
center: {
left: 0,
top: plot.height()
}
});
xaxis = plot.getXAxes()[0];
expect(xaxis.min).toBe(3);
expect(xaxis.max).toBe(4.5);
ticks = xaxis.ticks;
middle = Math.floor(ticks.length / 2);
expect(ticks[middle- 1].v).toBe(3.6);
expect(ticks[middle].v).toBe(3.8);
expect(ticks[middle + 1].v).toBe(4);
});
it('does not zoom for active false', 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(),
xaxis = plot.getXAxes()[0],
yaxis = plot.getYAxes()[0],
initialCoords = [
{x: 3, y: 5},
{x:7, y:9}
],
finalCoords = [
{x: 2, y: 4},
{x: 8, y: 10}
],
midPointCoords = {
x: (xaxis.c2p(finalCoords[0].x - plot.offset().left) + xaxis.c2p(finalCoords[1].x - plot.offset().left)) / 2,
y: (yaxis.c2p(finalCoords[0].y - plot.offset().top) + yaxis.c2p(finalCoords[1].y - plot.offset().top)) / 2
};
simulate.sendTouchEvents(initialCoords, eventHolder, 'touchstart');
simulate.sendTouchEvents(finalCoords, eventHolder, 'touchmove');
simulate.sendTouchEvents(finalCoords, eventHolder, 'touchend');
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
describe('with large numbers', function() {
it ('limits the navigation offsets', function () {
var yaxis;
plot = $.plot(placeholder, [
[
[0, -1e308],
[1000, 1e308]
]
], options);
yaxis = plot.getYAxes()[0];
plot.zoom({
amount: 10e-20
});
expect(yaxis.min).toBe(-Number.MAX_VALUE);
expect(yaxis.max).toBe(Number.MAX_VALUE);
expect(isFinite(plot.navigationState().yaxis.navigationOffset.below)).toBe(true);
expect(isFinite(plot.navigationState().yaxis.navigationOffset.above)).toBe(true);
});
})
});
describe('zoomOut', function () {
it('uses the provided amount', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.zoomOut({
amount: 0.5
});
expect(xaxis.min).toBe(2.5);
expect(xaxis.max).toBe(7.5);
expect(yaxis.min).toBeCloseTo(2.5, 7);
expect(yaxis.max).toBeCloseTo(7.5, 7);
});
it('uses the amount configured in the plot if none is provided', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.zoom();
expect(xaxis.min).toBe(4.5);
expect(xaxis.max).toBe(5.5);
expect(yaxis.min).toBeCloseTo(4.5, 7);
expect(yaxis.max).toBeCloseTo(5.5, 7);
});
it('uses the provided center', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
plot.zoomOut({
amount: 0.5,
center: {
left: 0,
top: plot.height()
}
});
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(5);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(5);
});
it ('doesn\'t got to Infinity and beyond', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[-1, -10e200 ],
[1, 10e200]
]
], options);
plot.zoomOut({
amount: 10e200
});
yaxis = plot.getYAxes()[0];
expect(yaxis.min).not.toBe(-Infinity);
expect(yaxis.max).not.toBe(Infinity);
});
it ('can be disabled per axis for zoom on plot', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
xaxis.options.plotZoom = false;
plot.zoomOut({
amount: 0.5
});
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBeCloseTo(2.5, 7);
expect(yaxis.max).toBeCloseTo(7.5, 7);
});
it ('can be disabled per axis for zoom on axis', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
xaxis.options.axisZoom = false;
plot.zoomOut({
amount: 0.5,
axes: [xaxis]
});
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
});
describe('smartPan', function () {
it('uses the provided x delta', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.smartPan({
x: -plot.width(),
y: 0
}, plot.navigationState());
expect(xaxis.min).toBe(-10);
expect(xaxis.max).toBe(0);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
it('uses the provided y delta', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.smartPan({
x: 0,
y: plot.height(),
}, plot.navigationState());
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBe(-10);
expect(yaxis.max).toBe(0);
});
it('snaps to the x direction when delta y is small', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.smartPan({
x: -plot.width(),
y: 1
}, plot.navigationState());
expect(xaxis.min).toBe(-10);
expect(xaxis.max).toBe(0);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
it('snaps to the y direction when delta x is small', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
plot.smartPan({
x: 1,
y: plot.height(),
}, plot.navigationState());
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBe(-10);
expect(yaxis.max).toBe(0);
});
it('restore xaxis offset on snap on y direction if returns from diagonal snap', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
var initialState = plot.navigationState(0, 0);
plot.smartPan({
x: plot.width(),
y: plot.height(),
}, initialState);
expect(xaxis.min).toBe(10);
expect(xaxis.max).toBe(20);
expect(yaxis.min).toBe(-10);
expect(yaxis.max).toBe(0);
plot.smartPan({
x: plot.width(),
y: 2,
}, initialState);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
it ('can be disabled per axis for panning the etire plot', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
xaxis.options.plotPan = false;
plot.smartPan({
x: plot.width(),
y: plot.height(),
}, plot.navigationState());
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBe(-10);
expect(yaxis.max).toBe(0);
});
it ('can be disabled per axis for pan on that axis', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
xaxis.options.axisPan = false;
plot.smartPan({
x: plot.width(),
y: plot.height(),
}, plot.navigationState(), [xaxis]);
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
it('can pan close to 0 for logaxis', function () {
var xaxis, yaxis;
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], {
xaxes: [{ autoScale: 'exact', mode : 'log'}],
yaxes: [{ autoScale: 'exact' }],
zoom: { interactive: true, active: true, amount: 10 },
pan: { interactive: true, active: true, frameRate: -1 }
});
xaxis = plot.getXAxes()[0];
yaxis = plot.getYAxes()[0];
expect(xaxis.min).toBe(0.1);
expect(xaxis.max).toBe(10);
plot.smartPan({
x: -plot.width(),
y: 0
}, plot.navigationState());
expect(xaxis.min).toBeCloseTo(0.001, 4);
expect(xaxis.max).toBeCloseTo(0.1, 4);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
describe('with large numbers', function() {
it ('limits the navigation offsets', function () {
var yaxis;
plot = $.plot(placeholder, [
[
[0, -1e308],
[1000, 1e308]
]
], options);
yaxis = plot.getYAxes()[0];
plot.smartPan({
x: 0,
y: plot.height(),
}, plot.navigationState());
expect(yaxis.min).toBe(-1e308);
expect(yaxis.max).toBeLessThan(0);
expect(isFinite(plot.navigationState().yaxis.navigationOffset.below)).toBe(true);
expect(isFinite(plot.navigationState().yaxis.navigationOffset.above)).toBe(true);
});
})
});
describe('mousePan', function() {
it ('pans on xaxis only', function () {
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
var xaxis = plot.getXAxes()[0],
yaxis = plot.getYAxes()[0],
initialXmin = xaxis.min,
initialXmax = xaxis.max,
eventHolder = plot.getEventHolder(),
pointCoords = [
{ x: xaxis.p2c(4), y: xaxis.box.top + plot.offset().top + 10 },
{ x: xaxis.p2c(5), y: xaxis.box.top + plot.offset().top + 15 }
];
simulate.mouseDown(eventHolder, pointCoords[0].x, pointCoords[0].y);
simulate.mouseMove(eventHolder, pointCoords[0].x, pointCoords[0].y);
simulate.mouseMove(eventHolder, pointCoords[1].x, pointCoords[1].y);
simulate.mouseUp(eventHolder, pointCoords[1].x, pointCoords[1].y);
expect(xaxis.min).toBeCloseTo(xaxis.c2p(xaxis.p2c(initialXmin) + (pointCoords[0].x - pointCoords[1].x)), 0);
expect(xaxis.max).toBeCloseTo(xaxis.c2p(xaxis.p2c(initialXmax) + (pointCoords[0].x - pointCoords[1].x)), 0);
expect(yaxis.min).toBe(0);
expect(yaxis.max).toBe(10);
});
it ('pans on yaxis only', function () {
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], options);
var xaxis = plot.getXAxes()[0],
yaxis = plot.getYAxes()[0],
initialYmin = yaxis.min,
initialYmax = yaxis.max,
eventHolder = plot.getEventHolder(),
pointCoords = [
{ x: xaxis.box.left - 10, y: yaxis.p2c(4) },
{ x: yaxis.p2c(3), y: yaxis.p2c(8) }
];
simulate.mouseDown(eventHolder, pointCoords[0].x, pointCoords[0].y);
simulate.mouseMove(eventHolder, pointCoords[0].x, pointCoords[0].y);
simulate.mouseMove(eventHolder, pointCoords[1].x, pointCoords[1].y);
simulate.mouseUp(eventHolder, pointCoords[1].x, pointCoords[1].y);
expect(xaxis.min).toBe(0);
expect(xaxis.max).toBe(10);
expect(yaxis.min).toBeCloseTo(yaxis.c2p(yaxis.p2c(initialYmin) + (pointCoords[0].y - pointCoords[1].y)), 0);
expect(yaxis.max).toBeCloseTo(yaxis.c2p(yaxis.p2c(initialYmax) + (pointCoords[0].y - pointCoords[1].y)), 0);
});
});
describe('click', function(){
it('on plot activates plot\'s zoom and pan active propriety', function() {
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], {
zoom: { interactive: true, active: false, amount: 10 },
pan: { interactive: true, active: false}
});
var eventHolder = plot.getEventHolder(),
pointCoords = { x: 0, y: plot.height() };
simulate.click(eventHolder, pointCoords.x, pointCoords.y);
expect(plot.getOptions().pan.active).toBe(true);
expect(plot.getOptions().zoom.active).toBe(true);
});
});
describe('mouse dblclick', function(){
it('on plot activates plot\'s zoom and pan active propriety', function() {
plot = $.plot(placeholder, [
[
[0, 0],
[10, 10]
]
], {
zoom: { interactive: true, active: false, amount: 10 },
pan: { interactive: true, active: false}
});
var eventHolder = plot.getEventHolder(),
pointCoords = { x: 0, y: plot.height() };
simulate.dblclick(eventHolder, pointCoords.x, pointCoords.y);
expect(plot.getOptions().pan.active).toBe(true);
expect(plot.getOptions().zoom.active).toBe(true);
});
it('sends touched axis for double click on axis', function(){
plot = $.plot(placeholder, [
[
[-1, 2],
[11, 12]
]
], options);
var eventHolder = plot.getEventHolder(),
xaxis = plot.getXAxes()[0],
coords = { x: xaxis.p2c(4), y: xaxis.box.top + 10 };
var spyRecenter = jasmine.createSpy('spy');
$(plot.getPlaceholder()).on('re-center', spyRecenter);
simulate.dblclick(eventHolder, coords.x, coords.y);
expect(spyRecenter).toHaveBeenCalled();
expect(spyRecenter.calls.all()[0].args[0].detail.axisTouched).toEqual(xaxis);
});
});
});
|