77 lines
3.0 KiB
JavaScript
77 lines
3.0 KiB
JavaScript
|
describe("Dragging handles tests", function() {
|
||
|
|
var testSlider;
|
||
|
|
describe("Dragging handles over each other", function() {
|
||
|
|
it("should swap reliably given imprecision", function() {
|
||
|
|
testSlider = new Slider(document.getElementById("testSlider1"), {
|
||
|
|
ticks: [0, 1, 2, 3, 4, 5, 6],
|
||
|
|
value: [4, 5],
|
||
|
|
step: 1,
|
||
|
|
range: true,
|
||
|
|
});
|
||
|
|
var 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
|
||
|
|
];
|
||
|
|
// Create mouse event with position to the left of problem tick
|
||
|
|
var mouseLeft = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouseLeft.initMouseEvent.apply(mouseLeft, mouseEventArguments);
|
||
|
|
// Create mouse event with position on problem tick
|
||
|
|
var mouseOverlap = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[5].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouseOverlap.initMouseEvent.apply(mouseOverlap, mouseEventArguments);
|
||
|
|
// Create mouse event with position to the right of problem tick
|
||
|
|
var mouseRight = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[6].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouseRight.initMouseEvent.apply(mouseRight, 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();
|
||
|
|
expect(testSlider._state.dragged).toBe(0);
|
||
|
|
expect(testSlider.getValue()).toEqual([4, 5]);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
afterEach(function() {
|
||
|
|
if(testSlider) {
|
||
|
|
if(testSlider instanceof Slider) { testSlider.destroy(); }
|
||
|
|
testSlider = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|