short-url/public/vendor/seiyria-bootstrap-slider/test/specs/ElementDataAttributesSpec.js

211 lines
6.4 KiB
JavaScript
Raw Normal View History

2020-07-01 08:57:45 +00:00
describe("Element Data Attributes Tests", function() {
var slider;
it("reads the 'data-slider-min' property and sets it on slider", function() {
slider = $("#minSlider").slider();
slider.slider('setValue', 1);
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(5);
});
it("reads the 'data-slider-max' property and sets it on slider", function() {
slider = $("#maxSlider").slider();
slider.slider('setValue', 10);
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(5);
});
it("reads the 'data-slider-step' property and sets it on slider", function() {
slider = $("#stepSlider").slider();
//TODO How do you test this? Maybe manually trigger a slideChange event?
expect(true).toBeTruthy();
});
it("reads the 'data-slider-precision' property (which is set to 2) and sets it on slider", function() {
slider = $("#precisionSlider").slider();
slider.slider('setValue', 8.115);
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(8.12);
});
it("reads the 'data-slider-orientation' property and sets it on slider", function() {
slider = $("#orientationSlider").slider();
var orientationIsVertical = $("#orientationSlider").data('slider').options.orientation === 'vertical';
expect(orientationIsVertical).toBeTruthy();
});
it("reads the 'data-slider-value' property and sets it on slider", function() {
slider = $("#valueSlider").slider();
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(5);
});
it("reads the 'data-slider-ticks-labels' property and sets it on slider", function() {
slider = $("#sliderWithTickMarksAndLabels").slider();
var ticksLabelsAreCorrect = arraysEqual($("#sliderWithTickMarksAndLabels").data('slider').options.ticks_labels, ['$0', '$100', '$200', '$300', '$400']);
expect(ticksLabelsAreCorrect).toBeTruthy();
function arraysEqual(a, b) {
if (a === b) {return true;}
if (a == null || b == null){return false;}
if (a.length !== b.length) {return false;}
for (var i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) {return false;}
}
return true;
}
});
it("reads the 'data-slider-selection' property and sets it on slider", function() {
slider = $("#selectionSlider").slider({
id: "selectionSliderId"
});
slider.slider('setValue', 0);
var newSliderValue = slider.slider('getValue');
expect(newSliderValue).toBe(0);
});
it("reads the 'data-slider-tooltip' property and sets it on slider", function() {
slider = $("#tooltipSlider").slider({
id: "tooltipSliderElem"
});
var tooltipIsHidden = $("#tooltipSliderElem").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
});
describe("reads the 'data-slider-handle' property and sets it on slider", function() {
it("applies 'triangle' class tag to handle", function() {
slider = $("#handleSlider").slider({
id: "handleSliderElem"
});
var handleIsSetToTriangle = $("#handleSliderElem div.slider-handle").hasClass("triangle");
expect(handleIsSetToTriangle).toBeTruthy();
});
it("applies 'custom' class tag to handle", function() {
slider = $("#customHandleSlider").slider({
id: "customHandleSliderElem"
});
var handleIsSetToCustom = $("#customHandleSliderElem div.slider-handle").hasClass("custom");
expect(handleIsSetToCustom).toBeTruthy();
});
});
it("reads the 'data-slider-reversed' property and sets it on slider", function() {
slider = $("#reversedSlider").slider({
id: "reversedSliderElem"
});
slider.slider('setValue', 10);
var sliderSelectionHeightAtMaxValue = $("#reversedSliderElem div.slider-track").children("div.slider-selection").width();
expect(sliderSelectionHeightAtMaxValue).toBe(0);
});
it("reads the 'data-slider-enabled' property and sets it on slider", function() {
slider = $("#disabledSlider").slider();
var isEnabled = slider.slider('isEnabled');
expect(isEnabled).not.toBeTruthy();
});
it("always sets the 'value' attribute of the original <input> element to be the current slider value", function() {
var $slider = $("#testSliderGeneric");
var val = 7;
slider = $slider.slider({
value: val
});
var sliderValueAttrib = $slider.val();
var valAsString = val.toString();
expect(sliderValueAttrib).toBe(valAsString);
});
it("always sets the 'data-value' attribute of the original <input> element to be the current slider value", function() {
// Setup
var sliderInputElem = document.getElementById("testSliderGeneric");
var val = 7;
slider = new Slider(sliderInputElem, {
value: val
});
// Assert
expect(sliderInputElem.dataset.value).toBe( val.toString() );
// Cleanup
slider.destroy();
slider = null;
});
afterEach(function() {
if(slider) { slider.slider('destroy'); }
});
describe("Test element attribute values after calling 'setValue()'", function() {
var sliderObj;
afterEach(function() {
if (sliderObj) {
sliderObj.destroy();
sliderObj = null;
}
});
it("The 'data-value' attribute of the original <input> element should equal the new value", function() {
// Setup
var sliderInputElem = document.getElementById("testSliderGeneric");
var newVal = 7;
sliderObj = new Slider(sliderInputElem, {
min: 0,
max: 10,
value: 5
});
sliderObj.setValue(newVal);
expect(sliderInputElem.dataset.value).toBe(newVal.toString());
});
it("The 'value' attribute of the original <input> element should equal the new value", function() {
var sliderInputElem = document.getElementById("testSliderGeneric");
var newVal = 7;
sliderObj = new Slider(sliderInputElem, {
min: 0,
max: 10,
value: 5
});
sliderObj.setValue(newVal);
var sliderValueAttrib = sliderInputElem.getAttribute('value');
expect(sliderValueAttrib).toBe(newVal.toString());
});
it("The 'value' property of the original <input> element should equal the new value", function() {
var sliderInputElem = document.getElementById("testSliderGeneric");
var newVal = 7;
sliderObj = new Slider(sliderInputElem, {
min: 0,
max: 10,
value: 5
});
sliderObj.setValue(newVal);
expect(sliderInputElem.value).toBe(newVal.toString());
});
});
});