todo/public/vendor/seiyria-bootstrap-slider/test/specs/RangeHighlightsSpec.js
Supan Adit Pratama 35d8715ab4 first commit
2020-06-23 11:40:37 +07:00

225 lines
6.3 KiB
JavaScript
Executable File
Vendored

/*
RangeHighlights Render Tests
*/
describe("RangeHighlights Render Tests", function() {
var testSlider1;
var testSlider2;
var testSlider3;
var testSlider4;
//setup
beforeEach(function() {
var rangeHighlightsOpts1 = [
{ "start": 2, "end": 5, "class": "category1" }, // left: 10%; width: 15%
{ "start": 7, "end": 8, "class": "category2" }, // left: 35%; width: 5%
{ "start": 17, "end": 19 }, // left: 85%; width: 10%
{ "start": 17, "end": 24 }, //out of range - not visible
{ "start": -3, "end": 19 } //out of range - not visible
];
var rangeHighlightsOpts2 = [
{ "start": 2, "end": 5, "class": "category1" }, // top: 10%; height: 15%
{ "start": 7, "end": 8, "class": "category2" }, // top: 35%; height: 5%
{ "start": 17, "end": 19 }, // top: 85%; height: 10%
{ "start": 7, "end": -4 }, //out of range - not visible
{ "start": 23, "end": 15 } //out of range - not visible
];
testSlider1 = $('#testSlider1').slider({
id: 'slider1',
min: 0,
max: 20,
step: 1,
value: 14,
rangeHighlights: rangeHighlightsOpts1
});
testSlider2 = $('#testSlider2').slider({
id: 'slider2',
min: 0,
max: 20,
step: 1,
value: 14,
orientation: 'vertical',
rangeHighlights: rangeHighlightsOpts2
});
testSlider3 = $('#testSlider3').slider({
id: 'slider3',
min: 0,
max: 20,
step: 1,
value: 14,
reversed: true,
rangeHighlights: rangeHighlightsOpts1
});
testSlider4 = $('#testSlider4').slider({
id: 'slider4',
min: 0,
max: 20,
step: 1,
value: 14,
reversed: true,
orientation: 'vertical',
rangeHighlights: rangeHighlightsOpts2
});
});
//cleanup
afterEach(function() {
testSlider1.slider('destroy');
testSlider1 = null;
testSlider2.slider('destroy');
testSlider2 = null;
testSlider3.slider('destroy');
testSlider3 = null;
testSlider4.slider('destroy');
testSlider4 = null;
});
//test the visibility of ranges e.g. : { "start": 23, "end": 15 } - out of range - not visible
function testHighlightedElements(sliderId, isHorizontal, expections) {
//check elements exist
it("Highlighted ranges are rendered - " + sliderId, function() {
expect($(sliderId).length).toBe(1);
expect($(sliderId + ' .slider-rangeHighlight').length).toBe(5);
expect($(sliderId + ' .slider-rangeHighlight.category1').length).toBe(1);
expect($(sliderId + ' .slider-rangeHighlight.category2').length).toBe(1);
});
//check elements exist within proper display value
it("Highlighted ranges render inside the slider's bounds " + sliderId, function() {
expect($(sliderId).length).toBe(1);
var ranges = $(sliderId + ' .slider-rangeHighlight');
expect(ranges.length).toBe(5);
for (var i = 0; i < ranges.length; i++) {
expect($(ranges[i]).is(":visible")).toBe(expections[i].isVisible);
if (expections[i].isVisible) {
if(isHorizontal) {
expect(_getLeftPercent($(ranges[i]))).toBe(expections[i].start);
expect(_getWidthPercent($(ranges[i]))).toBe(expections[i].size);
} else {
expect(_getTopPercent($(ranges[i]))).toBe(expections[i].start);
expect(_getHeightPercent($(ranges[i]))).toBe(expections[i].size);
}
}
}
});
}
function _getLeftPercent(element) {
return Math.round(100 * element.position().left / element.parent().width()) + '%';
}
function _getWidthPercent(element) {
var width = element.width();
var parentWidth = element.offsetParent().width();
return Math.round(100 * width / parentWidth) + '%';
}
function _getTopPercent(element) {
return Math.round(100 * element.position().top / element.parent().height()) + '%';
}
function _getHeightPercent(element) {
var height = element.height();
var parentHeight = element.offsetParent().height();
return Math.round(100 * height / parentHeight) + '%';
}
//test both testSlider
testHighlightedElements('#slider1', true, [{
isVisible: true,
start: '10%',
size: '15%'
}, {
isVisible: true,
start: '35%',
size: '5%'
}, {
isVisible: true,
start: '85%',
size: '10%'
}, {
isVisible: false,
start: '85%',
size: '10%'
}, {
isVisible: false,
start: '85%',
size: '10%'
}]);
testHighlightedElements('#slider2', false, [{
isVisible: true,
start: '10%',
size: '15%'
}, {
isVisible: true,
start: '35%',
size: '5%'
}, {
isVisible: true,
start: '85%',
size: '10%'
}, {
isVisible: false,
start: '85%',
size: '10%'
}, {
isVisible: false,
start: '85%',
size: '10%'
}]);
testHighlightedElements('#slider3', true, [{
isVisible: true,
start: '75%',
size: '15%'
}, {
isVisible: true,
start: '60%',
size: '5%'
}, {
isVisible: true,
start: '5%',
size: '10%'
}, {
isVisible: false,
start: '5%',
size: '10%'
}, {
isVisible: false,
start: '5%',
size: '10%'
}]);
testHighlightedElements('#slider4', false, [{
isVisible: true,
start: '75%',
size: '15%'
}, {
isVisible: true,
start: '60%',
size: '5%'
}, {
isVisible: true,
start: '5%',
size: '10%'
}, {
isVisible: false,
start: '5%',
size: '10%'
}, {
isVisible: false,
start: '5%',
size: '10%'
}]);
});