445 lines
13 KiB
JavaScript
445 lines
13 KiB
JavaScript
|
describe("'ticks_tooltip' Option tests", function() {
|
||
|
|
var testSlider;
|
||
|
|
var mouseEventArguments;
|
||
|
|
|
||
|
|
beforeEach(function() {
|
||
|
|
// 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
|
||
|
|
undefined, // clientY,
|
||
|
|
false, // ctrlKey
|
||
|
|
false, // altKey
|
||
|
|
false, // shiftKey
|
||
|
|
false, // metaKey,
|
||
|
|
0, // button
|
||
|
|
null // relatedTarget
|
||
|
|
];
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("ticks_tooltip states", function() {
|
||
|
|
it("should have the tooltip above the last hovered over element", function() {
|
||
|
|
testSlider = new Slider(document.getElementById("testSlider1"), {
|
||
|
|
ticks: [0, 1, 2, 3, 4, 5, 6],
|
||
|
|
ticks_positions: [0, 19, 29, 39, 49, 95, 100],
|
||
|
|
step: 1,
|
||
|
|
value: 4,
|
||
|
|
ticks_tooltip: true,
|
||
|
|
orientation: 'horizontal'
|
||
|
|
});
|
||
|
|
mouseEventArguments[8] = testSlider.sliderElem.offsetTop; // clientY
|
||
|
|
var mouse49 = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouse49.initMouseEvent.apply(mouse49, mouseEventArguments);
|
||
|
|
var mouse95 = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[5].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouse95.initMouseEvent.apply(mouse95, mouseEventArguments);
|
||
|
|
var mouse100 = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[6].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouse100.initMouseEvent.apply(mouse100, mouseEventArguments);
|
||
|
|
var mouseStart = document.createEvent('MouseEvents');
|
||
|
|
mouseEventArguments[7] = testSlider.ticks[0].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouseStart.initMouseEvent.apply(mouseStart, mouseEventArguments);
|
||
|
|
|
||
|
|
//Simulate random movements
|
||
|
|
testSlider.mousedown(mouse49);
|
||
|
|
testSlider.mousemove(mouse95);
|
||
|
|
// FIXME: Use 'mouseup' event type
|
||
|
|
testSlider.mouseup(mouse95);
|
||
|
|
testSlider.mousedown(mouse49);
|
||
|
|
testSlider.mousemove(mouse100);
|
||
|
|
testSlider.mousemove(mouse95);
|
||
|
|
testSlider.mousemove(mouse95);
|
||
|
|
testSlider.mousemove(mouseStart);
|
||
|
|
expect(testSlider.tooltip.style.left).toBe("0%");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Always show the tooltip", function() {
|
||
|
|
it("Should always display the tooltip after hovering over a tick", function(done) {
|
||
|
|
testSlider = new Slider(document.getElementById("testSlider1"), {
|
||
|
|
id: 'mySlider',
|
||
|
|
min: 0,
|
||
|
|
max: 10,
|
||
|
|
step: 1,
|
||
|
|
value: 1,
|
||
|
|
ticks: [0, 5, 10],
|
||
|
|
tooltip: 'always',
|
||
|
|
ticks_tooltip: true,
|
||
|
|
orientation: 'horizontal'
|
||
|
|
});
|
||
|
|
var bigOffset = 100000;
|
||
|
|
|
||
|
|
var isTooltipVisible = $('#mySlider').find('.tooltip.tooltip-main').hasClass('in');
|
||
|
|
expect(isTooltipVisible).toBe(true);
|
||
|
|
|
||
|
|
var mouseenter = document.createEvent('MouseEvent');
|
||
|
|
mouseEventArguments[0] = 'mouseenter';
|
||
|
|
mouseEventArguments[7] =
|
||
|
|
testSlider.ticks[1].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
|
||
|
|
mouseenter.initMouseEvent.apply(mouseenter, mouseEventArguments);
|
||
|
|
|
||
|
|
var mouseleave = document.createEvent('MouseEvent');
|
||
|
|
mouseEventArguments[0] = 'mouseleave';
|
||
|
|
mouseEventArguments[7] = testSlider.sliderElem.offsetLeft + bigOffset;
|
||
|
|
mouseleave.initMouseEvent.apply(mouseleave, mouseEventArguments);
|
||
|
|
|
||
|
|
testSlider.ticks[1].addEventListener('mouseleave', function() {
|
||
|
|
isTooltipVisible = $('#mySlider').find('.tooltip.tooltip-main').hasClass('in');
|
||
|
|
expect(isTooltipVisible).toBe(true);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
testSlider.ticks[1].dispatchEvent(mouseenter);
|
||
|
|
testSlider.ticks[1].dispatchEvent(mouseleave);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(function() {
|
||
|
|
if(testSlider) {
|
||
|
|
if(testSlider instanceof Slider) { testSlider.destroy(); }
|
||
|
|
testSlider = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The mouse navigation tests are based on the following slider properties:
|
||
|
|
*
|
||
|
|
* initial value: 3 or [3, 7]
|
||
|
|
* ticks: [0, 3, 5, 7, 10]
|
||
|
|
* step: 1
|
||
|
|
*
|
||
|
|
* When the `ticks_tooltip` option is set to `true`, hovering over the ticks or handles
|
||
|
|
* should show the tooltip above it with the value of the tick/handle.
|
||
|
|
*
|
||
|
|
* The test logic for sliders:
|
||
|
|
* 1. Hover over the 1st tick
|
||
|
|
* 2. Check if the tooltip is positioned correctly (left, top, right)
|
||
|
|
* 3. Check if the tooltip should be showing
|
||
|
|
* 4. Check if the tooltip contains the correct value
|
||
|
|
* 5. Check if the slider value(s) haven't changed
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
describe("`ticks_tooltip: true` mouse navigation test cases", function() {
|
||
|
|
var initialValue = 3;
|
||
|
|
var initialRangeValues = [3, 7];
|
||
|
|
var tickValues = [0, 3, 5, 7, 10];
|
||
|
|
var stepValue = 1;
|
||
|
|
|
||
|
|
var orientations = ['horizontal', 'vertical'];
|
||
|
|
var reversed = [false, true];
|
||
|
|
var sliderTypes = ['single', 'range'];
|
||
|
|
var rtl = [false, true];
|
||
|
|
var testCases = [];
|
||
|
|
var mouseEventArguments;
|
||
|
|
|
||
|
|
function calcMouseEventCoords(element) {
|
||
|
|
var elementBB = element.getBoundingClientRect();
|
||
|
|
|
||
|
|
return {
|
||
|
|
clientX: elementBB.left,
|
||
|
|
clientY: elementBB.top
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function createMouseEvent(type, clientX, clientY) {
|
||
|
|
var mouseEvent = document.createEvent('MouseEvent');
|
||
|
|
mouseEventArguments[0] = type;
|
||
|
|
mouseEventArguments[7] = clientX;
|
||
|
|
mouseEventArguments[8] = clientY;
|
||
|
|
mouseEvent.initMouseEvent.apply(mouseEvent, mouseEventArguments);
|
||
|
|
return mouseEvent;
|
||
|
|
}
|
||
|
|
|
||
|
|
beforeEach(function() {
|
||
|
|
// 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
|
||
|
|
undefined, // clientY,
|
||
|
|
false, // ctrlKey
|
||
|
|
false, // altKey
|
||
|
|
false, // shiftKey
|
||
|
|
false, // metaKey,
|
||
|
|
0, // button
|
||
|
|
null // relatedTarget
|
||
|
|
];
|
||
|
|
});
|
||
|
|
|
||
|
|
sliderTypes.forEach(function(sliderType) {
|
||
|
|
orientations.forEach(function(orientation) {
|
||
|
|
rtl.forEach(function(isRTL) {
|
||
|
|
reversed.forEach(function(isReversed) {
|
||
|
|
var isHorizontal = orientation === 'horizontal';
|
||
|
|
var isVertical = orientation === 'vertical';
|
||
|
|
var isRange = sliderType === 'range';
|
||
|
|
var whichStyle;
|
||
|
|
|
||
|
|
if (isHorizontal) {
|
||
|
|
if (isRTL) {
|
||
|
|
whichStyle = 'right';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
whichStyle = 'left';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (isVertical) {
|
||
|
|
whichStyle = 'top';
|
||
|
|
}
|
||
|
|
|
||
|
|
testCases.push({
|
||
|
|
value: isRange ? initialRangeValues : initialValue,
|
||
|
|
step: stepValue,
|
||
|
|
range: isRange,
|
||
|
|
orientation: orientation,
|
||
|
|
reversed: isReversed,
|
||
|
|
rtl: 'auto',
|
||
|
|
isRTL: isRTL,
|
||
|
|
inputId: isRTL ? 'rtlSlider' : 'testSlider1',
|
||
|
|
expectedValue: isRange ? initialRangeValues : initialValue,
|
||
|
|
stylePos: whichStyle
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
testCases.forEach(function(testCase) {
|
||
|
|
describe("range=" + testCase.range + ", orientation=" + testCase.orientation +
|
||
|
|
", rtl=" + testCase.isRTL + ", reversed=" + testCase.reversed, function() {
|
||
|
|
var $testSlider;
|
||
|
|
var sliderElem;
|
||
|
|
var $handle1;
|
||
|
|
var $handle2;
|
||
|
|
var $ticks;
|
||
|
|
var sliderId;
|
||
|
|
var sliderOptions;
|
||
|
|
var $tooltip;
|
||
|
|
var $tooltipInner;
|
||
|
|
var lastTickIndex;
|
||
|
|
var mouseEventType = 'mouseenter';
|
||
|
|
|
||
|
|
beforeEach(function() {
|
||
|
|
sliderId = testCase.range ? 'myRangeSlider' : 'mySlider';
|
||
|
|
|
||
|
|
sliderOptions = {
|
||
|
|
id: sliderId,
|
||
|
|
step: testCase.step,
|
||
|
|
orientation: testCase.orientation,
|
||
|
|
value: testCase.value,
|
||
|
|
range: testCase.range,
|
||
|
|
reversed: testCase.reversed,
|
||
|
|
rtl: 'auto',
|
||
|
|
ticks: tickValues,
|
||
|
|
ticks_tooltip: true
|
||
|
|
};
|
||
|
|
|
||
|
|
$testSlider = $('#'+testCase.inputId).slider(sliderOptions);
|
||
|
|
sliderElem = $('#'+sliderId)[0];
|
||
|
|
$ticks = $(sliderElem).find('.slider-tick');
|
||
|
|
$handle1 = $(sliderElem).find('.slider-handle:first');
|
||
|
|
$handle2 = $(sliderElem).find('.slider-handle:last');
|
||
|
|
$tooltip = $(sliderElem).find('.tooltip.tooltip-main');
|
||
|
|
$tooltipInner = $tooltip.find('.tooltip-inner');
|
||
|
|
lastTickIndex = sliderOptions.ticks.length - 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(function() {
|
||
|
|
// Clean up any associated event listeners
|
||
|
|
$ticks = null;
|
||
|
|
$handle1 = null;
|
||
|
|
$handle2 = null;
|
||
|
|
|
||
|
|
if ($testSlider) {
|
||
|
|
$testSlider.slider('destroy');
|
||
|
|
$testSlider = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should position the tooltip correctly", function(done) {
|
||
|
|
$ticks.each(function(index, tickElem) {
|
||
|
|
var coords = calcMouseEventCoords(tickElem);
|
||
|
|
|
||
|
|
var tickCallback = function() {
|
||
|
|
// Check position
|
||
|
|
expect($tooltip.css(testCase.stylePos)).toBe($(this).css(testCase.stylePos));
|
||
|
|
|
||
|
|
if (index === lastTickIndex) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Set up listener and dispatch event
|
||
|
|
this.addEventListener(mouseEventType, tickCallback, false);
|
||
|
|
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should show the tooltip", function(done) {
|
||
|
|
$ticks.each(function(index, tickElem) {
|
||
|
|
var coords = calcMouseEventCoords(tickElem);
|
||
|
|
|
||
|
|
var tickCallback = function() {
|
||
|
|
// Check that tooltip shows
|
||
|
|
expect($tooltip.hasClass('in')).toBe(true);
|
||
|
|
|
||
|
|
if (index === lastTickIndex) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this.addEventListener(mouseEventType, tickCallback, false);
|
||
|
|
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should not show the tooltip", function(done) {
|
||
|
|
var bigOffset = 100000;
|
||
|
|
|
||
|
|
$ticks.each(function(index, tickElem) {
|
||
|
|
var coords = calcMouseEventCoords(tickElem);
|
||
|
|
|
||
|
|
var tickCallback = function() {
|
||
|
|
// Check that tooltip shows
|
||
|
|
expect($tooltip.hasClass('in')).toBe(false);
|
||
|
|
|
||
|
|
if (index === lastTickIndex) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this.addEventListener('mouseleave', tickCallback, false);
|
||
|
|
this.dispatchEvent(createMouseEvent('mouseleave', coords.clientX + bigOffset, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should contain the correct value for the tooltip", function(done) {
|
||
|
|
$ticks.each(function(index, tickElem) {
|
||
|
|
var coords = calcMouseEventCoords(tickElem);
|
||
|
|
|
||
|
|
var tickCallback = function() {
|
||
|
|
// Check value of tooltip
|
||
|
|
expect($tooltipInner.text()).toBe(''+sliderOptions.ticks[index]);
|
||
|
|
|
||
|
|
if (index === lastTickIndex) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this.addEventListener(mouseEventType, tickCallback, false);
|
||
|
|
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should not modify the value(s) of the slider when displaying the tooltip", function(done) {
|
||
|
|
$ticks.each(function(index, tickElem) {
|
||
|
|
var coords = calcMouseEventCoords(tickElem);
|
||
|
|
|
||
|
|
var tickCallback = function() {
|
||
|
|
var value = $testSlider.slider('getValue');
|
||
|
|
|
||
|
|
// Check value of slider
|
||
|
|
expect(value).toEqual(testCase.expectedValue);
|
||
|
|
|
||
|
|
if (index === lastTickIndex) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this.addEventListener(mouseEventType, tickCallback, false);
|
||
|
|
this.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe("Test position and values of the tooltip when hovering over the handle(s)", function() {
|
||
|
|
|
||
|
|
if (testCase.range) {
|
||
|
|
it("Should position for the tooltip correctly (range)", function(done) {
|
||
|
|
var handleElems = [$handle1[0], $handle2[0]];
|
||
|
|
|
||
|
|
$.each(handleElems, function(index, handleElem) {
|
||
|
|
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||
|
|
|
||
|
|
var handleCallback = function() {
|
||
|
|
// Check position
|
||
|
|
expect($tooltip.css(testCase.stylePos)).toBe($(handleElem).css(testCase.stylePos));
|
||
|
|
|
||
|
|
if (index === 1) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||
|
|
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should contain the correct values for the tooltip (range)", function(done) {
|
||
|
|
var handleElems = [$handle1[0], $handle2[0]];
|
||
|
|
|
||
|
|
$.each(handleElems, function(index, handleElem) {
|
||
|
|
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||
|
|
|
||
|
|
var handleCallback = function() {
|
||
|
|
// Check value of tooltip
|
||
|
|
expect($tooltipInner.text()).toBe(''+testCase.expectedValue[index]);
|
||
|
|
|
||
|
|
if (index === 1) {
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||
|
|
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
it("Should position for the tooltip correctly (single)", function(done) {
|
||
|
|
var handleElem = $handle1[0];
|
||
|
|
|
||
|
|
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||
|
|
|
||
|
|
var handleCallback = function() {
|
||
|
|
// Check position
|
||
|
|
expect($tooltip.css(testCase.stylePos)).toBe($(handleElem).css(testCase.stylePos));
|
||
|
|
done();
|
||
|
|
};
|
||
|
|
|
||
|
|
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||
|
|
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
|
||
|
|
it("Should contain the correct value for the tooltip (single)", function(done) {
|
||
|
|
var handleElem = $handle1[0];
|
||
|
|
|
||
|
|
var coords = calcMouseEventCoords(handleElem, testCase.orientation);
|
||
|
|
|
||
|
|
var handleCallback = function() {
|
||
|
|
// Check value of tooltip
|
||
|
|
expect($tooltipInner.text()).toBe(''+testCase.expectedValue);
|
||
|
|
done();
|
||
|
|
};
|
||
|
|
|
||
|
|
handleElem.addEventListener(mouseEventType, handleCallback, false);
|
||
|
|
handleElem.dispatchEvent(createMouseEvent(mouseEventType, coords.clientX, coords.clientY));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|