mirror of https://github.com/ColorlibHQ/gentelella
233 lines
8.8 KiB
JavaScript
233 lines
8.8 KiB
JavaScript
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));
|
|
});
|
|
});
|
|
});
|