describe("Public Method Tests", function() { var testSlider; describe("slider constructor", function() { describe("returns a jQuery object if it is called on a jQuery object with zero or more matching elements", function() { it("returns a jQuery object if it is called on with no matching elements", function() { testSlider = $(); expect(testSlider.slider() instanceof jQuery).toBe(true); }); it("returns a jQuery object if it is called on with one matching element", function() { testSlider = $('#testSlider1'); expect(testSlider.slider() instanceof jQuery).toBe(true); }); it("returns a jQuery object if it is called on with multiple matching elements", function() { testSlider = $('#testSlider1, #testSlider2'); expect(testSlider.slider() instanceof jQuery).toBe(true); }); }); it("reads and sets the 'id' attribute of the slider instance that is created", function() { var sliderId = "mySlider"; testSlider = $("#testSlider1").slider({ id : sliderId }); var sliderInstanceHasExpectedId = $("#testSlider1").siblings("div.slider").is("#" + sliderId); expect(sliderInstanceHasExpectedId).toBeTruthy(); }); it("generates multiple slider instances from selector", function() { $(".makeSlider").slider(); var sliderInstancesExists = $(".makeSlider").siblings().is(".slider"); expect(sliderInstancesExists).toBeTruthy(); var sliderInstancesCount = $(".makeSlider").siblings(".slider").length; expect(sliderInstancesCount).toEqual(2); $('.makeSlider').slider('destroy'); }); it("reads and sets the 'min' option properly", function() { var minVal = -5; testSlider = $("#testSlider1").slider({ min : minVal }); testSlider.slider('setValue', minVal); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(minVal); }); it("reads and sets the 'max' option properly", function() { var maxVal = 15; testSlider = $("#testSlider1").slider({ max : maxVal }); testSlider.slider('setValue', maxVal); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(maxVal); }); it("reads and sets the 'precision' option properly", function() { testSlider = $("#testSlider1").slider({ precision: 2 }); testSlider.slider('setValue', 8.115); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(8.12); }); it("reads and sets the 'orientation' option properly", function() { var orientationVal = "vertical"; testSlider = $("#testSlider1").slider({ orientation : orientationVal }); var orientationClassApplied = $("#testSlider1").siblings("div.slider").hasClass("slider-vertical"); expect(orientationClassApplied).toBeTruthy(); }); it("reads and sets the 'value' option properly", function() { var val = 8; testSlider = $("#testSlider1").slider({ value : val }); testSlider.slider('setValue', val); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(val); }); it("reads and sets the 'selection' option properly", function() { var selectionVal = "after", maxSliderVal = 10; testSlider = $("#testSlider1").slider({ selection : selectionVal }); testSlider.slider('setValue', maxSliderVal); var sliderSelectionWidthAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width(); expect(sliderSelectionWidthAtMaxValue).toBe(0); }); it("updates the 'selection' option properly", function() { var selectionVal = "none", maxSliderVal = 10; testSlider = $("#testSlider1").slider({ selection : selectionVal }); testSlider.slider('setValue', maxSliderVal); testSlider.slider('refresh'); var sliderSelectionHasHideClass_A = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-low").hasClass('hide'); expect(sliderSelectionHasHideClass_A).toBe(true); var sliderSelectionHasHideClass_B = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").hasClass('hide'); expect(sliderSelectionHasHideClass_B).toBe(true); var sliderSelectionHasHideClass_C = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-high").hasClass('hide'); expect(sliderSelectionHasHideClass_C).toBe(true); var newSelectionVal = 'after'; testSlider.slider('setAttribute', 'selection', newSelectionVal); testSlider.slider('refresh'); var sliderSelectionHasHideClass_D = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-low").hasClass('hide'); expect(sliderSelectionHasHideClass_D).toBe(false); var sliderSelectionHasHideClass_E = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").hasClass('hide'); expect(sliderSelectionHasHideClass_E).toBe(false); var sliderSelectionHasHideClass_F = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-track-high").hasClass('hide'); expect(sliderSelectionHasHideClass_F).toBe(false); }); it("reads and sets the 'handle' option properly", function() { var handleVal = "triangle"; testSlider = $("#testSlider1").slider({ handle : handleVal }); var handleIsSetToTriangle = $("#testSlider1").siblings(".slider").children("div.slider-handle").hasClass("triangle"); expect(handleIsSetToTriangle).toBeTruthy(); }); it("reads and sets the 'reversed' option properly", function() { var reversedVal = true, maxSliderVal = 10; testSlider = $("#testSlider1").slider({ reversed : reversedVal }); testSlider.slider('setValue', maxSliderVal); var sliderSelectionHeightAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width(); expect(sliderSelectionHeightAtMaxValue).toBe(0); }); it("reads and sets the 'formatter' option properly", function() { var tooltipFormatter = function(value) { return 'Current value: ' + value; }; testSlider = $("#testSlider1").slider({ formatter : tooltipFormatter }); testSlider.slider('setValue', 9); var tooltipMessage = $("#testSlider1").siblings(".slider").find("div.tooltip").children("div.tooltip-inner").text(); var expectedMessage = tooltipFormatter(9); expect(tooltipMessage).toBe(expectedMessage); }); it("reads and sets the 'enabled' option properly", function() { testSlider = $("#testSlider1").slider({ enabled: false }); var isEnabled = testSlider.slider('isEnabled'); expect(isEnabled).not.toBeTruthy(); }); describe("reads and sets the 'tooltip' option properly", function() { it("tooltip is not shown if set to 'hide'", function() { testSlider = $("#testSlider1").slider({ tooltip : "hide" }); var tooltipIsHidden = testSlider.siblings(".slider").children("div.tooltip").hasClass("hide"); expect(tooltipIsHidden).toBeTruthy(); }); it("tooltip is shown during sliding if set to 'show'", function() { testSlider = $("#testSlider1").slider({ tooltip : "show" }); var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in")); expect(tooltipIsHidden).toBeTruthy(); // Trigger hover var mouseenterEvent = document.createEvent("Events"); mouseenterEvent.initEvent("mouseenter", true, true); testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent); var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"); expect(tooltipIsShownAfterSlide).toBeTruthy(); }); it("tooltip is shown on mouse over and hides correctly after mouse leave", function() { testSlider = $("#testSlider1").slider({ tooltip : "show" }); var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in")); expect(tooltipIsHidden).toBeTruthy(); // Trigger hover var mouseenterEvent = document.createEvent("Events"); mouseenterEvent.initEvent("mouseenter", true, true); testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent); var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"); expect(tooltipIsShownAfterSlide).toBeTruthy(); // Trigger leave var mouseleaveEvent = document.createEvent("Events"); mouseleaveEvent.initEvent("mouseleave", true, true); testSlider.data('slider').sliderElem.dispatchEvent(mouseleaveEvent); var tooltipIsAgainHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in")); expect(tooltipIsAgainHidden).toBeTruthy(); }); it("tooltip is always shown if set to 'always'", function() { testSlider = $("#testSlider1").slider({ tooltip : "always" }); var tooltipIsShown = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"); expect(tooltipIsShown).toBeTruthy(); }); it("defaults to 'show' option if invalid value is passed", function() { testSlider = $("#testSlider1").slider({ tooltip : "invalid option value" }); var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in")); expect(tooltipIsHidden).toBeTruthy(); // Trigger hover var mouseenterEvent = document.createEvent("Events"); mouseenterEvent.initEvent("mouseenter", true, true); testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent); var tooltipIsShownOnHover = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"); expect(tooltipIsShownOnHover).toBeTruthy(); }); }); }); describe("'setValue()' tests", function() { var formatInvalidInputMsg = function(invalidValue) { return "Invalid input value '" + invalidValue + "' passed in"; }; describe("if slider is a single value slider", function() { beforeEach(function() { testSlider = $("#testSlider1").slider(); }); it("properly sets the value of the slider when given a numeric value", function() { var valueToSet = 5; testSlider.slider('setValue', valueToSet); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(valueToSet); }); it("properly sets the value of the slider when given a string value", function(){ var valueToSet = "5"; testSlider.slider('setValue', valueToSet); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(5); }); it("if a value passed in is greater than the max (10), the slider only goes to the max", function() { var maxValue = 10, higherThanSliderMaxVal = maxValue + 5; testSlider.slider('setValue', higherThanSliderMaxVal); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(maxValue); }); it("if a value passed in is less than the min (0), the slider only goes to the min", function() { var minValue = 0, lowerThanSliderMaxVal = minValue - 5; testSlider.slider('setValue', lowerThanSliderMaxVal); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(minValue); }); it("sets the 'value' property of the slider element", function() { var value = 9; testSlider.slider('setValue', value); var currentValue = document.querySelector("#testSlider1").value; currentValue = parseFloat(currentValue); expect(currentValue).toBe(value); }); it("sets the 'value' attribute of the slider element", function() { var value = 9; testSlider.slider('setValue', value); var currentValue = document.querySelector("#testSlider1").getAttribute("value"); currentValue = parseFloat(currentValue); expect(currentValue).toBe(value); }); describe("when an invalid value type is passed in", function() { var invalidValue; beforeEach(function() { invalidValue = "a"; }); it("throws an error and does not alter the slider value", function() { var originalSliderValue = testSlider.slider('getValue'); var settingValue = function() { testSlider.slider('setValue', invalidValue); }; expect(settingValue).toThrow(new Error( formatInvalidInputMsg(invalidValue) )); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(originalSliderValue); }); }); }); describe("if slider is a range slider", function() { beforeEach(function() { testSlider = $("#testSlider1").slider({ value : [3, 8] }); }); it("properly sets the values if both within the max and min", function() { var valuesToSet = [5, 7]; testSlider.slider('setValue', valuesToSet); var sliderValues = testSlider.slider('getValue'); expect(sliderValues[0]).toBe(valuesToSet[0]); expect(sliderValues[1]).toBe(valuesToSet[1]); }); describe("caps values to the min if they are set to be less than the min", function() { var minValue = -5, otherValue = 7; it("first value is capped to min", function() { testSlider.slider('setValue', [minValue, otherValue]); var sliderValues = testSlider.slider('getValue'); expect(sliderValues[0]).toBe(0); }); it("second value is capped to min", function() { testSlider.slider('setValue', [otherValue, minValue]); var sliderValues = testSlider.slider('getValue'); expect(sliderValues[1]).toBe(0); }); }); describe("caps values to the max if they are set to be higher than the max", function() { var maxValue = 15, otherValue = 7; it("first value is capped to max", function() { testSlider.slider('setValue', [maxValue, otherValue]); var sliderValues = testSlider.slider('getValue'); expect(sliderValues[0]).toBe(10); }); it("second value is capped to max", function() { testSlider.slider('setValue', [otherValue, maxValue]); var sliderValues = testSlider.slider('getValue'); expect(sliderValues[1]).toBe(10); }); }); describe("if either value is of invalid type", function() { var invalidValue = "a", otherValue = 7; it("first value is of invalid type", function() { var setSliderValueFn = function() { testSlider.slider('setValue', [invalidValue, otherValue]); }; expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) )); }); it("second value is of invalid type", function() { var setSliderValueFn = function() { testSlider.slider('setValue', [otherValue, invalidValue]); }; expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) )); }); }); }); describe("triggerSlideEvent argument", function() { it("if triggerSlideEvent argument is true, the 'slide' event is triggered", function() { var testSlider = $("#testSlider1").slider({ value : 3 }); var newSliderVal = 5; testSlider.on('slide', function(evt) { expect(newSliderVal).toEqual(evt.value); }); testSlider.slider('setValue', newSliderVal, true); }); it("if triggerSlideEvent argument is false, the 'slide' event is not triggered", function() { var newSliderVal = 5; var slideEventTriggered = false; var testSlider = $("#testSlider1").slider({ value : 3 }); testSlider.on('slide', function() { slideEventTriggered = true; }); testSlider.slider('setValue', newSliderVal, false); expect(slideEventTriggered).toEqual(false); }); }); describe("triggerChangeEvent argument", function() { it("if triggerChangeEvent argument is true, the 'change' event is triggered", function() { var testSlider = $("#testSlider1").slider({ value : 3 }); var newSliderVal = 5; testSlider.on('change', function(evt) { expect(newSliderVal).toEqual(evt.value.newValue); }); testSlider.slider('setValue', newSliderVal, true); }); it("if triggerChangeEvent argument is false, the 'change' event is not triggered", function() { var changeEventTriggered = false; var testSlider = $("#testSlider1").slider({ value : 3 }); testSlider.on('change', function() { changeEventTriggered = true; }); testSlider.slider('setValue', 5, false); expect(changeEventTriggered).toEqual(false); }); }); }); describe("'getValue()' tests", function() { it("returns the current value of the slider", function() { testSlider = $("#testSlider1").slider(); var valueToSet = 5; testSlider.slider('setValue', valueToSet); var sliderValue = testSlider.slider('getValue'); expect(sliderValue).toBe(valueToSet); }); }); describe("'enable()' tests", function() { it("correctly enables a slider", function() { testSlider = $("#testSlider1").slider({ enabled: false }); testSlider.slider("enable"); var isEnabled = testSlider.slider("isEnabled"); expect(isEnabled).toBeTruthy(); }); }); describe("'disable()' tests", function() { it("correctly disable a slider", function() { testSlider = $("#testSlider1").slider(); testSlider.slider("disable"); var isEnabled = testSlider.slider("isEnabled"); expect(isEnabled).not.toBeTruthy(); }); }); describe("'toggle()' tests", function() { it("correctly enables a disabled slider", function() { testSlider = $("#testSlider1").slider({ enabled: false }); testSlider.slider("toggle"); var isEnabled = testSlider.slider("isEnabled"); expect(isEnabled).toBeTruthy(); }); it("correctly disables an enabled slider", function() { testSlider = $("#testSlider1").slider(); testSlider.slider("toggle"); var isEnabled = testSlider.slider("isEnabled"); expect(isEnabled).not.toBeTruthy(); }); }); describe("'isEnabled()' tests", function() { it("returns true for an enabled slider", function() { testSlider = $("#testSlider1").slider({ id: "enabled", enabled: true }); var isEnabled = testSlider.slider("isEnabled"); var $slider = testSlider.siblings("#enabled"); var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("#enabled"); expect(isEnabled).toBeTruthy(); expect(hasDisabledClass).not.toBeTruthy(); }); it("returns false for a disabled slider", function() { testSlider = $("#testSlider1").slider({ id: "disabled", enabled: false }); var isEnabled = testSlider.slider("isEnabled"); var $slider = testSlider.siblings("#disabled"); var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("slider-disabled"); expect(isEnabled).not.toBeTruthy(); expect(hasDisabledClass).toBeTruthy(); }); }); it("get attribute", function() { testSlider = $("#testSlider1").slider(); var sliderMaxValue = testSlider.slider('getAttribute', 'max'); expect(sliderMaxValue).toBe(10); }); it("changes slider from basic to range", function() { testSlider = $("#makeRangeSlider").slider(); testSlider.slider('setAttribute', 'range', true).slider('refresh'); var isRangeSlider = $("#changeOrientationSlider").parent("div.slider").find('.slider-handle').last().hasClass('hide'); expect(isRangeSlider).toBeFalsy(); }); it("setAttribute: changes the 'data-slider-orientation' property from horizontal to vertical", function() { testSlider = $("#changeOrientationSlider").slider({ id: "changeOrientationSliderElem" }); testSlider.slider('setAttribute', 'orientation', 'vertical').slider('refresh'); var $slider = $("#changeOrientationSliderElem"); var orientationClassApplied = $slider.hasClass("slider-vertical"); expect(orientationClassApplied).toBeTruthy(); }); it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will not adjust the margin-left of the tooltip", function() { // Setup testSlider = new Slider("#relayoutSliderInput", { id: "relayoutSlider", min: 0, max: 10, value: 5 }); var mainTooltipDOMRef = document.querySelector("#relayoutSlider .tooltip-main"); var relayoutSliderContainerDOMRef = document.querySelector("#relayoutSliderContainer"); var tooltipMarginLeft; // Main tooltip margin-left offset should not be set on slider intialization tooltipMarginLeft = parseFloat(mainTooltipDOMRef.style.marginLeft); expect(tooltipMarginLeft).toBeNaN(); // Show slider and call relayout() relayoutSliderContainerDOMRef.style.display = "block"; testSlider.relayout(); // Main tooltip margin-left offset should not be set after relayout() is called. tooltipMarginLeft = Math.abs( parseFloat(mainTooltipDOMRef.style.marginLeft) ); expect(tooltipMarginLeft).toBeNaN(); }); it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will re-adjust the tick label width", function() { // Setup testSlider = new Slider("#relayoutSliderInputTickLabels", { id: "relayoutSliderTickLabels", min: 0, max: 10, ticks: [0, 5, 10], ticks_labels: ['low', 'mid', 'high'], value: 5 }); var $ticks = $('#relayoutSliderTickLabels').find('.slider-tick-label'); // Tick-Width should be 0 on slider intialization var i, $tick; for (i = 0; i < $ticks.length; i++) { $tick = $($ticks[i]); expect( parseInt($tick.css('width')) ).toBe(0); } // Show slider and call relayout() $('#relayoutSliderContainerTickLabels').css('display', 'block'); testSlider.relayout(); $('#relayoutSliderContainerTickLabels').css('display', 'none'); // Tick-Width should re-adjust to be > 0 for (i = 0; i < $ticks.length; i++) { $tick = $($ticks[i]); expect( parseInt($tick.css('width')) ).toBeGreaterThan(0); } }); afterEach(function() { if(testSlider) { if(testSlider instanceof jQuery) { testSlider.slider('destroy'); } if(testSlider instanceof Slider) { testSlider.destroy(); } testSlider = null; } }); });