forked from OpenPDU/openpdu
first mockup in go
This commit is contained in:
253
static/bower_components/seiyria-bootstrap-slider/test/specs/TickLabelSpec.js
vendored
Normal file
253
static/bower_components/seiyria-bootstrap-slider/test/specs/TickLabelSpec.js
vendored
Normal file
@@ -0,0 +1,253 @@
|
||||
/*
|
||||
Tick label Render Tests - Tests that labels render in correct positions in both horizontal and vertical orientation
|
||||
*/
|
||||
|
||||
describe("Tick Label Render Tests", function() {
|
||||
var testSliderH;
|
||||
var testSliderV;
|
||||
|
||||
//setup
|
||||
beforeEach(function() {
|
||||
testSliderH = $('#testSlider1').slider({
|
||||
id: 'slider1',
|
||||
ticks: [0, 1, 2],
|
||||
ticks_labels:['x', 'y', 'z'],
|
||||
orientation:'horizontal'
|
||||
});
|
||||
|
||||
testSliderV = $('#testSlider2').slider({
|
||||
id: 'slider2',
|
||||
ticks: [0, 1, 2],
|
||||
ticks_labels:['x', 'y', 'z'],
|
||||
orientation:'vertical'
|
||||
});
|
||||
});
|
||||
|
||||
//cleanup
|
||||
afterEach(function() {
|
||||
testSliderH.slider('destroy');
|
||||
testSliderH = null;
|
||||
|
||||
testSliderV.slider('destroy');
|
||||
testSliderV = null;
|
||||
});
|
||||
|
||||
//e.g. testOrientation('horizontal', 2) will test the horizontal
|
||||
//code path using control with the id testSlider2
|
||||
function testOrientation(orientation) {
|
||||
var sliderIndex = orientation.toLowerCase() === 'horizontal' ? 1 : 2;
|
||||
var isVertical = orientation.toLowerCase() === 'horizontal' ? false : true;
|
||||
var sliderId = '#slider' + sliderIndex;
|
||||
|
||||
//check elements exist
|
||||
it("Tick labels are rendered - " + orientation, function() {
|
||||
expect($(sliderId).length).toBe(1);
|
||||
|
||||
var length = $(sliderId + ' .slider-tick-label').length;
|
||||
expect(length).toBe(3);
|
||||
});
|
||||
|
||||
//check elements exist within the bounds of the slider
|
||||
it("Tick labels render inside the slider's bounds" + orientation, function() {
|
||||
expect($(sliderId).length).toBe(1);
|
||||
|
||||
var sliderRect = $(sliderId)[0].getBoundingClientRect();
|
||||
var tickLabels = $(sliderId + ' .slider-tick-label');
|
||||
|
||||
for (var i = 0; i < tickLabels.length; i++) {
|
||||
var labelRect = tickLabels[i].getBoundingClientRect();
|
||||
|
||||
if (isVertical) {
|
||||
expect(labelRect.left).toBeGreaterThan(sliderRect.left);
|
||||
expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy();
|
||||
} else {
|
||||
expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy();
|
||||
expect(labelRect.width / 2 + labelRect.left >= sliderRect.left).toBeTruthy();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//test both horizontal and vertical orientations
|
||||
testOrientation('horizontal');
|
||||
testOrientation('vertical');
|
||||
});
|
||||
|
||||
describe("Tick Labels 'is-selection' and 'in-selection' Tests", function() {
|
||||
var $inputSlider;
|
||||
var options;
|
||||
var keyboardEvent;
|
||||
var $slider;
|
||||
var $handle1;
|
||||
var $handle2;
|
||||
var $tickLabels;
|
||||
var tickLabelCount;
|
||||
|
||||
// Setup
|
||||
beforeEach(function() {
|
||||
options = {
|
||||
id: 'slider1',
|
||||
ticks: [0, 1, 2, 3, 4],
|
||||
value: 2,
|
||||
ticks_labels:['$0', '$1', '$2', '$3', '$4'],
|
||||
};
|
||||
|
||||
tickLabelCount = options.ticks_labels.length;
|
||||
|
||||
// Create keyboard event
|
||||
keyboardEvent = document.createEvent('Event');
|
||||
keyboardEvent.initEvent('keydown', true, true);
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
afterEach(function() {
|
||||
$inputSlider.slider('destroy');
|
||||
$inputSlider = null;
|
||||
});
|
||||
|
||||
describe("Tick Labels 'is-selection' Tests", function() {
|
||||
|
||||
describe("'options.selection = 'before'", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
options.selection = 'before';
|
||||
$inputSlider = $('#testSlider1').slider(options);
|
||||
$slider = $('#slider1');
|
||||
$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection'", function() {
|
||||
// There should only be one tick label with the 'label-is-selection' class
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
// Only the third tick label should have the 'label-is-selection' class
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection' when keying to the left", function(done) {
|
||||
$handle1 = $('#slider1').find('.slider-handle:first');
|
||||
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
|
||||
$handle1.on('keydown', function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(1).hasClass('label-is-selection')).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle1 to the left with keyboard
|
||||
$handle1.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
|
||||
describe("'options.selection = 'after'", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
options.selection = 'after';
|
||||
$inputSlider = $('#testSlider1').slider(options);
|
||||
$slider = $('#slider1');
|
||||
$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection'" , function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'is-selection' when keying to the right" , function(done) {
|
||||
$handle1 = $('#slider1').find('.slider-handle:first');
|
||||
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(2).hasClass('label-is-selection')).toBe(true);
|
||||
|
||||
$handle1.on('keydown', function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(1);
|
||||
expect($tickLabels.eq(3).hasClass('label-is-selection')).toBe(true);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle1 to the right with keyboard
|
||||
$handle1.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Tick Labels 'in-selection' Tests", function() {
|
||||
|
||||
function checkTickLabels($labels, expectedLabels) {
|
||||
var next = 0;
|
||||
|
||||
// There are only 5 tick labels.
|
||||
expect($labels.length).toBe(tickLabelCount);
|
||||
|
||||
for (var i = 0; i < tickLabelCount; i++) {
|
||||
if (i === expectedLabels[next]) {
|
||||
expect($labels.eq(i).hasClass('label-in-selection')).toBe(true);
|
||||
next++;
|
||||
}
|
||||
else {
|
||||
expect($labels.eq(i).hasClass('label-in-selection')).toBe(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Setup
|
||||
beforeEach(function() {
|
||||
options.value = [1, 3];
|
||||
$inputSlider = $('#testSlider1').slider(options);
|
||||
$slider = $('#slider1');
|
||||
$tickLabels = $slider.find('.slider-tick-label-container div.slider-tick-label');
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'in-selection'", function() {
|
||||
expect($slider.find('.label-is-selection').length).toBe(3);
|
||||
checkTickLabels($tickLabels, [1, 2, 3]);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'in-selection' when keying to the left", function(done) {
|
||||
$handle1 = $('#slider1').find('.slider-handle:first');
|
||||
|
||||
// There should be 3 tick labels with the 'label-in-selection' class
|
||||
expect($slider.find('.label-in-selection').length).toBe(3);
|
||||
|
||||
// Check that the correct tick labels have the 'label-in-selection' class
|
||||
checkTickLabels($tickLabels, [1, 2, 3]);
|
||||
|
||||
$handle1.on('keydown', function() {
|
||||
expect($slider.find('.label-in-selection').length).toBe(4);
|
||||
|
||||
// Check the labels again
|
||||
checkTickLabels($tickLabels, [0, 1, 2, 3]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle1 to the left with keyboard
|
||||
$handle1.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 37;
|
||||
$handle1[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
|
||||
it("Should show the correct tick labels as 'in-selection' when keying to the right" , function(done) {
|
||||
$handle2 = $('#slider1').find('.slider-handle:last');
|
||||
|
||||
expect($slider.find('.label-in-selection').length).toBe(3);
|
||||
|
||||
checkTickLabels($tickLabels, [1, 2, 3]);
|
||||
|
||||
$handle2.on('keydown', function() {
|
||||
expect($slider.find('.label-in-selection').length).toBe(4);
|
||||
checkTickLabels($tickLabels, [1, 2, 3, 4]);
|
||||
done();
|
||||
});
|
||||
|
||||
// Move handle2 to the right with keyboard
|
||||
$handle2.focus();
|
||||
keyboardEvent.keyCode = keyboardEvent.which = 39;
|
||||
$handle2[0].dispatchEvent(keyboardEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user