123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211 |
- 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());
- });
- });
- });
|