openpdu/static/bower_components/seiyria-bootstrap-slider/test/specs/DraggingHandlesSpec.js

294 lines
10 KiB
JavaScript
Raw Normal View History

2020-12-23 09:11:11 +00:00
describe("Dragging handles tests", function() {
var testSlider;
var mouseEventArguments;
var tickOffsets;
// Create mouse events
function mouseEvent(type, offset) {
var ev = document.createEvent("MouseEvents");
mouseEventArguments[0] = type;
mouseEventArguments[7] = offset;
ev.initMouseEvent.apply(ev, mouseEventArguments);
return ev;
}
beforeEach(function() {
// Create slider
testSlider = new Slider(document.getElementById("testSlider1"), {
ticks: [0, 1, 2, 3, 4, 5, 6],
value: [4, 5],
step: 1,
range: true,
});
// Set up default set of mouse event arguments
mouseEventArguments = [
'mousemove', // type
true, // canBubble
true, // cancelable
document, // view,
0, // detail
0, // screenX
0, // screenY
undefined, // clientX
testSlider.sliderElem.offsetTop, // clientY,
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey,
0, // button
null // relatedTarget
];
// Calculate and store the 'clientX' for each tick in the slider
tickOffsets = testSlider.ticks.map(function (tick) {
return tick.offsetLeft + testSlider.sliderElem.offsetLeft;
});
});
afterEach(function() {
if(testSlider) {
if(testSlider instanceof Slider) { testSlider.destroy(); }
testSlider = null;
}
});
describe("Dragging handles over each other", function() {
it("should swap reliably given imprecision", function() {
// Create mouse event with position to the left of problem tick
var mouseLeft = document.createEvent('MouseEvents');
mouseEventArguments[7] = tickOffsets[4]; // clientX
mouseLeft.initMouseEvent.apply(mouseLeft, mouseEventArguments);
// Create mouse event with position on problem tick
var mouseOverlap = document.createEvent('MouseEvents');
mouseEventArguments[7] = tickOffsets[5]; // clientX
mouseOverlap.initMouseEvent.apply(mouseOverlap, mouseEventArguments);
// Create mouse event with position to the right of problem tick
var mouseRight = document.createEvent('MouseEvents');
mouseEventArguments[7] = tickOffsets[6]; // clientX
mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
// Same offset as 'mouseLeft'
var mouseUp = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseUp.initMouseEvent.apply(mouseUp, mouseEventArguments);
// Simulate drag without swapping
testSlider.mousedown(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate handle overlap
testSlider.mousemove(mouseOverlap);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulate left over right drag with imprecision in reported percentage
testSlider.mousemove(mouseRight);
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 6]);
// Simulate handle overlap
testSlider.mousemove(mouseOverlap);
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulator handle overlap with click
testSlider.mousemove(mouseOverlap);
testSlider.mousedown(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate right over left drag with imprecision in reported percentage
testSlider.mousemove(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// End with mouse up
testSlider.mouseup(mouseUp);
expect(testSlider._state.dragged).toBeNull();
expect(testSlider.getValue()).toEqual([4, 5]);
});
});
describe("Drag handles over each other and use keyboard to move handles over each other", function() {
var keyboardEvent;
function createMouseEvent(type, tickIdx) {
var mouseEvent = document.createEvent('MouseEvent');
mouseEventArguments[0] = type;
mouseEventArguments[7] = tickOffsets[tickIdx];
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
return mouseEvent;
}
beforeEach(function() {
// Create keyboard event
keyboardEvent = document.createEvent('Event');
keyboardEvent.initEvent('keydown', true, true);
});
afterEach(function() {
keyboardEvent = null;
});
it("should drag and keydown handles properly to the right then back to the left", function() {
// Simulate drag without swapping
testSlider.mousedown(createMouseEvent('mousedown', 4));
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate handle overlap
testSlider.mousemove(createMouseEvent('mousemove', 5));
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulate left over right drag
testSlider.mousemove(createMouseEvent('mousemove', 6));
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 6]);
// End with mouse up
testSlider.mouseup(createMouseEvent('mouseup', 6));
expect(testSlider._state.dragged).toBeNull();
expect(testSlider.getValue()).toEqual([5, 6]);
// Now move the handles past each other with the Left arrow key
keyboardEvent.keyCode = keyboardEvent.which = 37;
// Move handle2 to the left with keyboard
testSlider.handle2Keydown(keyboardEvent);
expect(testSlider._state.keyCtrl).toBeUndefined();
expect(testSlider.getValue()).toEqual([5, 5]);
// Move handle2 to the left again
testSlider.handle2Keydown(keyboardEvent);
expect(testSlider._state.keyCtrl).toBeUndefined();
expect(testSlider.getValue()).toEqual([4, 5]);
});
it("should drag and keydown handles properly to the left then back to the right", function() {
// Simulate drag without swapping
testSlider.mousedown(createMouseEvent('mousedown', 5));
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate handle overlap
testSlider.mousemove(createMouseEvent('mousemove', 4));
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([4, 4]);
// Simulate left over right drag
testSlider.mousemove(createMouseEvent('mousemove', 3));
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([3, 4]);
// End with mouse up
testSlider.mouseup(createMouseEvent('mouseup', 3));
expect(testSlider._state.dragged).toBeNull();
expect(testSlider.getValue()).toEqual([3, 4]);
// Now move the handles past each other with the Right arrow key
keyboardEvent.keyCode = keyboardEvent.which = 39;
// Move handle1 to the right with keyboard
testSlider.handle1Keydown(keyboardEvent);
expect(testSlider._state.keyCtrl).toBeUndefined();
expect(testSlider.getValue()).toEqual([4, 4]);
// Move handle1 to the right again
testSlider.handle1Keydown(keyboardEvent);
expect(testSlider._state.keyCtrl).toBeUndefined();
expect(testSlider.getValue()).toEqual([4, 5]);
});
});
it("Should snap to a tick within tick bounds when using the mouse navigation", function() {
testSlider.setAttribute('range', true);
testSlider.setAttribute('ticks_snap_bounds', 0.45);
testSlider.setAttribute('step', 0.1);
testSlider.refresh();
// Create mouse events
var mouseDown = document.createEvent("MouseEvents");
mouseEventArguments[7] = tickOffsets[1];
mouseDown.initMouseEvent.apply(mouseDown, mouseEventArguments);
var mouseRight = document.createEvent("MouseEvents");
mouseEventArguments[7] = tickOffsets[2] - 2;
mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
testSlider.mousedown(mouseDown);
expect(testSlider.getValue()).toEqual([0.7, 5]);
testSlider.mousemove(mouseRight);
expect(testSlider.getValue()).toEqual([2, 5]);
// FIXME: Use 'mouseup' event type
// End with mouse up
testSlider.mouseup(mouseRight);
expect(testSlider.getValue()).toEqual([2, 5]);
});
it("Should trigger change on mouseup", function(done) {
var changes = 0;
testSlider.on('slideStop', function(){
expect(changes).toBe(1);
expect(testSlider.getValue()).toEqual([2, 5]);
done();
});
testSlider.mousedown(mouseEvent('mousedown', tickOffsets[1]));
expect(testSlider.getValue()).toEqual([1, 5]);
testSlider.on('change', function(){
changes++;
});
testSlider.mouseup(mouseEvent('mouseup', tickOffsets[2]));
});
describe("Test 'mousemove' and 'mouseup' produces correct results", function() {
var $mySlider;
var $handle1;
function arraysEqual(a, b) {
if (a === b) { return true; }
if (a == null || b == null) { return false; }
if (a.length !== b.length) { return false; }
for (var i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) { return false; }
}
return true;
}
it("Last value changed in 'change' event should equal 'mouseup' event value for slider", function(done) {
// Change attributes for 'testSlider'
testSlider.setAttribute('value', 3);
testSlider.setAttribute('range', false);
testSlider.refresh();
$mySlider = $('#testSlider1');
function createMouseEvent(type, tickIdx) {
var mouseEvent = document.createEvent('MouseEvent');
mouseEventArguments[0] = type;
mouseEventArguments[7] = tickOffsets[tickIdx];
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
return mouseEvent;
}
var lastValue = 99; // Dummy value
$mySlider.on('change', function(eventData) {
lastValue = eventData.value.newValue;
});
$mySlider.on('slideStop', function(eventData) {
var value = eventData.value;
var isEqual = Array.isArray(value) ? arraysEqual(lastValue, value) : value === lastValue;
expect(isEqual).toBe(true);
done();
});
// Simulate drag and release from tick[1] to tick[4]
$handle1 = testSlider.$sliderElem.find('.slider-handle:first');
$handle1[0].dispatchEvent(createMouseEvent('mousedown', 1));
$handle1[0].dispatchEvent(createMouseEvent('mousemove', 4));
$handle1[0].dispatchEvent(createMouseEvent('mouseup', 4));
});
});
});