todo/public/vendor/seiyria-bootstrap-slider/test/specs/KeyboardSupportSpec.js

769 lines
22 KiB
JavaScript
Raw Normal View History

2020-06-23 04:40:37 +00:00
describe("Keyboard Support Tests", function() {
var testSlider,
handle1,
handle2,
keyboardEvent,
initialMinVal = 0,
initialMaxVal = 10,
initialStepVal = 1,
initialSliderVal = 5;
/*
Before/After setup
*/
beforeEach(function() {
// Create keyboard event
keyboardEvent = document.createEvent("Events");
keyboardEvent.initEvent("keydown", true, true);
});
afterEach(function() {
if(testSlider) { testSlider.slider('destroy'); }
keyboardEvent = null;
keyboardEvent = null;
});
/*
Begin Tests
*/
describe("Clicking on slider handle automatically gives it focus", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider'
});
handle1 = $("#testSlider").find(".slider-handle:first");
});
it("clicking on handle1 gives focus to handle1", function(done) {
handle1.focus(function() {
expect(true).toBeTruthy();
done();
});
handle1.focus();
});
});
describe("When slider handle has TAB focus", function() {
it("should display it's tooltip if 'tooltip' option is set to 'show'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'show'
});
handle1 = $("#testSlider").find(".slider-handle:first");
// Check for no tooltip before focus
var tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeFalsy();
handle1.focus();
// Tooltip should be present after focus
tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
it("should not display it's tooltip if 'tooltip' option is set to 'hide'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'hide'
});
handle1 = $("#testSlider").find(".slider-handle:first");
// Check for hidden tooltip before focus
var tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
handle1.focus();
// Tooltip should remain hidden after focus
tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
});
it("should not affect the tooltip display if 'tooltip' option is set to 'always'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'always'
});
handle1 = $("#testSlider").find(".slider-handle:first");
var $tooltip = $("#testSlider").children("div.tooltip");
// Check for shown tooltip before focus
var tooltipIsShown = $tooltip.hasClass("in");
expect(tooltipIsShown).toBeTruthy();
handle1.focus();
// Tooltip should remain present after focus
tooltipIsShown = $tooltip.hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
});
describe("For horizontal sliders where its handle has focus", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
orientation: 'horizontal',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider .min-slider-handle");
handle1.focus();
});
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = $("#testSlider1").slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = $("#testSlider1").slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For vertical sliders where its handle has focus", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
orientation: 'vertical',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves down by the 'step' value when the LEFT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves up by the 'step' value when the RIGHT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves down by the 'step' value when the DOWN arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves up by the 'step' value when the UP arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For a reversed slider (regardless of 'orientation')", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
reversed: true,
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For a range slider (regardless of 'orientation')", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: [initialSliderVal, initialSliderVal]
});
});
describe("when handle1 tries to overtake handle2 from the left", function() {
beforeEach(function() {
handle1 = $("#testSlider").find(".slider-handle:first");
handle2 = $("#testSlider").find(".slider-handle:last");
handle1.focus();
});
it("handle2 moves to the right by the step value", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue[1]).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("handle1's value remains unchanged", function(done) {
var sliderValue = testSlider.slider('getValue');
handle1.on("keydown", function() {
expect(sliderValue[0]).toBe(initialSliderVal);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("Should give focus to handle2 after overtaking from the left", function(done) {
handle2.on("focus", function() {
expect(true).toBe(true);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("when handle2 tries to overtake handle1 from the right", function() {
beforeEach(function() {
handle1 = $("#testSlider").find(".slider-handle:first");
handle2 = $("#testSlider").find(".slider-handle:last");
handle2.focus();
});
it("handle1 moves to the left by the step value", function(done) {
handle2.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue[0]).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle2[0].dispatchEvent(keyboardEvent);
});
it("handle2's value remains unchanged", function(done) {
var sliderValue = testSlider.slider('getValue');
handle2.on("keydown", function() {
expect(sliderValue[1]).toBe(initialSliderVal);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle2[0].dispatchEvent(keyboardEvent);
});
it("Should give focus to handle1 after overtaking from the right", function(done) {
handle1.on("focus", function() {
expect(true).toBe(true);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle2[0].dispatchEvent(keyboardEvent);
});
});
});
describe("For the natural arrow keys", function() {
var testCases = [{
reversed: false,
keyEvent: 37,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'horizontal',
key: 'left'
}, {
reversed: true,
keyEvent: 37,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'horizontal',
key: 'left'
}, {
reversed: false,
keyEvent: 39,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'horizontal',
key: 'right'
}, {
reversed: true,
keyEvent: 39,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'horizontal',
key: 'right'
}, {
reversed: false,
keyEvent: 38,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'vertical',
key: 'up'
}, {
reversed: true,
keyEvent: 38,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'vertical',
key: 'up'
}, {
reversed: false,
keyEvent: 40,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'vertical',
key: 'down'
}, {
reversed: true,
keyEvent: 40,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'vertical',
key: 'down'
}];
testCases.forEach(function(testCase) {
describe("A"+((testCase.reversed)? " reversed" : "")+testCase.orientation+" slider is used for the arrow keys", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal,
natural_arrow_keys: true,
reversed: testCase.reversed,
orientation: testCase.orientation
});
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves to the "+testCase.key+" by the 'step' value when the "+testCase.key+" arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = testCase.expectedSliderValue;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = testCase.keyEvent;
handle1[0].dispatchEvent(keyboardEvent);
});
});
});
});
});
describe("Navigating slider with the keyboard", function() {
var mySlider;
var keyboardEvent;
var options;
var $handle1;
var $handle2;
describe("Does not trigger 'change' event when values do not change", function() {
var initialValues = [0, 1];
beforeEach(function() {
options = {
id: 'mySlider',
min: -100,
max: 100,
step: 1,
value: initialValues,
range: true
};
// Create keyboard event
keyboardEvent = document.createEvent('Event');
keyboardEvent.initEvent('keydown', true, true);
});
afterEach(function() {
if (mySlider) {
if (mySlider instanceof Slider) { mySlider.destroy(); }
mySlider = null;
}
});
it("Should not trigger 'change' event", function(done) {
var hasSlideStarted = false;
var hasChanged = false;
options.value = [-100, 0];
mySlider = new Slider($('#testSlider1')[0], options);
$handle1 = $('#mySlider').find('.slider-handle:first');
mySlider.on('slideStart', function() {
hasSlideStarted = true;
});
mySlider.on('change', function() {
hasChanged = true;
});
mySlider.on('slideStop', function() {
var value = mySlider.getValue();
expect(hasSlideStarted).toBe(true);
expect(hasChanged).toBe(false);
expect(value).toEqual([-100, 0]);
done();
});
// Move the handle to the left
keyboardEvent.keyCode = keyboardEvent.which = 37;
$handle1[0].dispatchEvent(keyboardEvent);
});
it("Should not trigger 'change' event via `setValue()`", function(done) {
var isSliding = false;
var hasChanged = false;
mySlider = new Slider($('#testSlider1')[0], options);
$handle1 = $('#mySlider').find('.slider-handle:first');
mySlider.on('slide', function() {
isSliding = true;
});
mySlider.on('change', function() {
hasChanged = true;
});
// Change both values of the range slider
mySlider.setValue(initialValues, true, true);
window.setTimeout(function() {
var value = mySlider.getValue();
expect(isSliding).toBe(true);
expect(hasChanged).toBe(false);
expect(value).toEqual(initialValues);
done();
});
});
});
describe("Does trigger 'change' event when either value changes for range sliders", function() {
beforeEach(function() {
options = {
id: 'mySlider',
min: -100,
max: 100,
step: 1,
value: [-10, 10],
range: true
};
// Create keyboard event
keyboardEvent = document.createEvent('Event');
keyboardEvent.initEvent('keydown', true, true);
});
afterEach(function() {
if (mySlider) {
if (mySlider instanceof Slider) { mySlider.destroy(); }
mySlider = null;
}
});
it("Should trigger 'change' event when the moving the lower handle", function(done) {
var hasSlideStarted = false;
var hasChanged = false;
mySlider = new Slider($('#testSlider1')[0], options);
$handle1 = $('#mySlider').find('.slider-handle:first');
mySlider.on('slideStart', function() {
hasSlideStarted = true;
});
mySlider.on('change', function() {
hasChanged = true;
});
mySlider.on('slideStop', function() {
var value = mySlider.getValue();
expect(hasSlideStarted).toBe(true);
expect(hasChanged).toBe(true);
expect(value).toEqual([-11, 10]);
done();
});
// Move the handle to the left
keyboardEvent.keyCode = keyboardEvent.which = 37;
$handle1[0].dispatchEvent(keyboardEvent);
});
it("Should trigger 'change' event when moving the upper handle", function(done) {
var hasSlideStarted = false;
var hasChanged = false;
mySlider = new Slider($('#testSlider1')[0], options);
$handle2 = $('#mySlider').find('.slider-handle:last');
mySlider.on('slideStart', function() {
hasSlideStarted = true;
});
mySlider.on('change', function() {
hasChanged = true;
});
mySlider.on('slideStop', function() {
var value = mySlider.getValue();
expect(hasSlideStarted).toBe(true);
expect(hasChanged).toBe(true);
expect(value).toEqual([-10, 11]);
done();
});
// Move the handle to the right
keyboardEvent.keyCode = keyboardEvent.which = 39;
$handle2[0].dispatchEvent(keyboardEvent);
});
it("Should trigger 'change' event when both values change via `setValue()`", function(done) {
var isSliding = false;
mySlider = new Slider($('#testSlider1')[0], options);
$handle2 = $('#mySlider').find('.slider-handle:last');
mySlider.on('slide', function() {
isSliding = true;
});
mySlider.on('change', function() {
var value = mySlider.getValue();
expect(isSliding).toBe(true);
expect(value).toEqual([-50, 50]);
done();
});
// Change both values of the range slider
mySlider.setValue([-50, 50], true, true);
});
});
});
describe("Navigating range sliders with the keyboard", function() {
var mySlider;
var keyboardEvent;
var options;
var $handle1;
var $handle2;
describe("Range slider values", function() {
beforeEach(function() {
options = {
id: 'mySlider',
min: -100,
max: 100,
step: 1,
value: [0, 1],
range: true
};
// Create keyboard event
keyboardEvent = document.createEvent('Event');
keyboardEvent.initEvent('keydown', true, true);
});
afterEach(function() {
if (mySlider) {
if (mySlider instanceof Slider) { mySlider.destroy(); }
mySlider = null;
}
});
it("Should not go below minimum at 'slideStart'", function(done) {
options.value = [-100, 0];
mySlider = new Slider($('#testSlider1')[0], options);
$handle1 = $('#mySlider').find('.slider-handle:first');
mySlider.on('slideStart', function(newVal) {
expect(newVal).toEqual([-100, 0]);
done();
});
// Move the handle to the left
keyboardEvent.keyCode = keyboardEvent.which = 37;
$handle1[0].dispatchEvent(keyboardEvent);
});
it("Should not go above maximum at 'slideStart'", function(done) {
options.value = [0, 100];
mySlider = new Slider($('#testSlider1')[0], options);
$handle2 = $('#mySlider').find('.slider-handle:last');
mySlider.on('slideStart', function(newVal) {
expect(newVal).toEqual([0, 100]);
done();
});
// Move the handle to the right
keyboardEvent.keyCode = keyboardEvent.which = 39;
$handle2[0].dispatchEvent(keyboardEvent);
});
});
});