Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • faproietti/XRF-App
  • chnet/XRF-App
2 results
Show changes
Showing
with 0 additions and 3135 deletions
$slider-line-height: 20px !default;
$slider-border-radius: 4px !default;
$slider-horizontal-width: 210px !default;
$slider-vertical-height: 210px !default;
/*! =========================================================
* bootstrap-slider.js
*
* Maintainers:
* Kyle Kemp
* - Twitter: @seiyria
* - Github: seiyria
* Rohit Kalkur
* - Twitter: @Rovolutionary
* - Github: rovolution
*
* =========================================================
*
* bootstrap-slider is released under the MIT License
* Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*
* ========================================================= */
@import "variables";
@import "mixins";
@import "rules";
\ No newline at end of file
/////////////////////////////////////
// Taken from ariya/phantomjs#10522
//
Function.prototype.bind = function bind(that) { // .length is 1
var target = this;
if (typeof target != "function") {
throw new TypeError("Function.prototype.bind called on incompatible " + target);
}
var args = Array.prototype.slice.call(arguments, 1); // for normal call
var bound = function () {
if (this instanceof bound) {
var result = target.apply(
this,
args.concat(Array.prototype.slice.call(arguments))
);
if (Object(result) === result) {
return result;
}
return this;
} else {
return target.apply(
that,
args.concat(Array.prototype.slice.call(arguments))
);
}
};
function Empty() {};
if(target.prototype) {
Empty.prototype = target.prototype;
bound.prototype = new Empty();
Empty.prototype = null;
}
return bound;
};
\ No newline at end of file
describe("Accessibility Tests", function() {
var sliderA;
var sliderB;
it("Should have the slider role", function() {
sliderA = $('#accessibilitySliderA').slider();
sliderB = $('#accessibilitySliderB').slider();
var $sliderElementA = $(sliderA.slider('getElement'));
var $sliderElementB = $(sliderB.slider('getElement'));
expect($sliderElementA.find('.min-slider-handle').attr('role')).toBe('slider');
expect($sliderElementB.find('.min-slider-handle').attr('role')).toBe('slider');
expect($sliderElementB.find('.max-slider-handle').attr('role')).toBe('slider');
expect($sliderElementA.find('.tooltip-main').attr('role')).toBe('presentation');
expect($sliderElementA.find('.tooltip-min').attr('role')).toBe('presentation');
expect($sliderElementA.find('.tooltip-max').attr('role')).toBe('presentation');
});
it('Should have an aria-labelledby attribute', function() {
sliderA = $('#accessibilitySliderA').slider();
sliderB = $('#accessibilitySliderB').slider();
expect($(sliderA.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
expect($(sliderB.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
expect($(sliderB.slider('getElement')).find('.max-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelB');
});
it('Should have an aria-valuemax and aria-valuemin value', function() {
sliderA = $('#accessibilitySliderA').slider({ min: 5, max: 10 });
sliderB = $('#accessibilitySliderB').slider({ min: 5, max: 10 });
var $sliderElementA = $(sliderA.slider('getElement'));
var $sliderElementB = $(sliderB.slider('getElement'));
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemin')).toBe('5');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemax')).toBe('10');
});
it('Should have an aria-valuenow with the current value', function() {
sliderA = $('#accessibilitySliderA').slider({ min: 5, value: 7 });
sliderB = $('#accessibilitySliderB').slider({ min: 5, value: [2, 8] });
var $sliderElementA = $(sliderA.slider('getElement'));
var $sliderElementB = $(sliderB.slider('getElement'));
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('7');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('8');
// Change the value and check if aria-valuenow is still the same
sliderA.slider('setValue', 1);
sliderB.slider('setValue', [4, 9]);
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('9');
});
afterEach(function() {
if(sliderA) { sliderA.slider('destroy'); }
if(sliderB) { sliderB.slider('destroy'); }
});
});
describe("Aria-valuetext Tests", function() {
it("Sets the aria-valuetext to 'formatter' value", function() {
var textValArrayA = new Array('Monday','Wednesday','Friday');
var tooltipFormatterA = function(value) {
var arrActiveValueA = value;
return textValArrayA[arrActiveValueA-1];
};
//Formatter is used
var testSliderA = $("#accessibilitySliderA").slider({
formatter : tooltipFormatterA
});
testSliderA.slider('setValue', 2);
var tooltipMessageA = $("#accessibilitySliderA").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
var expectedMessageA = tooltipFormatterA(2);
expect(tooltipMessageA).toBe(expectedMessageA);
});
it("Does not use aria-valuetext if 'formatter' is not used", function() {
//Formatter is not used
var testSliderB = $("#accessibilitySliderB").slider({});
testSliderB.slider('setValue', 1);
var ariaValueTextB = $("#accessibilitySliderB").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
expect(ariaValueTextB).not.toBeDefined();
});
it("aria-valuetext if 'formatter' is used and has min & max value", function() {
var textValArrayC = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday');
var tooltipFormatterC = function(value) {
if(value[1]){
var arrActiveValueC0 = value[0];
var arrActiveValueC1 = value[1];
return [ textValArrayC[arrActiveValueC0-1], textValArrayC[arrActiveValueC1-1] ];
} else {
var arrActiveValueC = value;
return textValArrayC[arrActiveValueC-1];
}
};
//Formatter is used for ranges
var testSliderC = $("#accessibilitySliderC").slider({
range: true,
formatter : tooltipFormatterC
});
var valuesToSet = [2,4];
testSliderC.slider('setValue', valuesToSet);
var expectedMessageC = tooltipFormatterC([2,4]);
var ttminMessage = $("#accessibilitySliderC").prev(".slider").children(".min-slider-handle").attr("aria-valuetext");
var ttmaxMessage = $("#accessibilitySliderC").prev(".slider").children(".max-slider-handle").attr("aria-valuetext");
expect(ttminMessage).toBe(expectedMessageC[0]);
expect(ttmaxMessage).toBe(expectedMessageC[1]);
});
});
describe("Auto register data-provide Tests", function() {
it("checks that the autoregister Slider was automatically registerd", function() {
var $el = $("#autoregisterSlider");
var sliderInstancesExists = $el.siblings().is(".slider");
expect(sliderInstancesExists).toBeTruthy();
var sliderInstancesCount = $el.siblings(".slider").length;
expect(sliderInstancesCount).toEqual(1);
});
it("checks that the autoregistered Slider can be accessed", function() {
var $el = $("#autoregisterSlider");
expect($el.slider('getValue')).toBe(1);
$el.slider('setValue', 2);
expect($el.slider('getValue')).toBe(2);
});
});
\ No newline at end of file
/*
*************************
Conflicting Options Tests
*************************
This spec has tests for checking if two or more options do not conflict with one another
As option conflicts are reported and resolved, write tests for them here.
This will help ensure that they are accounted for and do not arise again.
*/
describe("Conflicting Options Tests", function() {
var testSlider;
it("Should have the value zero when it is slided to zero", function() {
testSlider = $("#testSlider1").slider({
value: 0,
step: 1
});
var flag = false;
var mouse = document.createEvent('MouseEvents');
testSlider.on('slide', function(slideEvt) {
expect(slideEvt.value).toBe(0);
flag = true;
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).toBeTruthy();
});
it("should set the `precision` to be the number of digits after the decimal of the `step` (assuming no `precision` is specified)", function() {
// Create Slider
testSlider = $("#testSlider1").slider({
value: 8.115,
step: 0.01
});
// Retrieve slider value
var value = testSlider.slider("getValue");
// Run tests
expect(value).toBe(8.12);
});
it("should properly allow for a slider that has `range` set to true and `reversed` set to true", function() {
// Create Slider
testSlider = new Slider("#testSlider1", {
reversed: true,
range: true,
min: -5,
max: 20
});
// Set Value
testSlider.setValue([-5, 20]);
// Assert that selection slider section is 100% of slider width
var selectedSectionWidth = testSlider.sliderElem.querySelector(".slider-selection").style.width;
expect(selectedSectionWidth).toBe("100%");
// Cleanup
testSlider.destroy();
testSlider = null;
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("'destroy()' Method tests", function() {
var testSlider;
function createSliderFn() {
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider"
});
}
it("removes the extra DOM elements associated with a slider", function() {
createSliderFn();
testSlider.destroy();
var sliderParentElement = $("#testSlider1").parent('div.slider').length;
var sliderChildrenElements = $("#testSlider1").siblings('div.slider-track, div.tooltip').length;
expect(sliderParentElement).toBe(0);
expect(sliderChildrenElements).toBe(0);
});
describe("unbinds all slider events", function() {
var flag, evtName;
beforeEach(function() {
createSliderFn();
flag = false;
});
it("unbinds from 'slideStart' event", function() {
evtName = 'slideStart';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds from 'slide' event", function() {
evtName = 'slide';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds from 'slideStop' event", function() {
evtName = 'slideStop';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds from 'slideChange' event", function() {
evtName = 'slideChange';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds all slider events and allows you to re-create the slider without runtime error", function() {
// Setup
var createSliderAndBindEvent = function () {
$("#testSlider1").bootstrapSlider({
min: 0,
max: 1000 * 1000,
step: 1000
});
testSlider = $("#testSlider1").data("bootstrapSlider");
testSlider.on("slideStop", function() {});
};
// Destroy existing slider from default bootstrap step
testSlider.destroy();
// Create new Slider
createSliderAndBindEvent();
// Destroy slider
testSlider.destroy();
// Re-create Slider and try to re-bind event
var throwsRuntimeError = false;
try {
createSliderAndBindEvent();
}
catch (e) {
throwsRuntimeError = true;
}
// reCreateSliderAndBindEvent(): Assert error is not thrown
expect(throwsRuntimeError).toBeFalsy();
});
});
describe("DOM event listener removal tests", function() {
describe("When tooltips are always hidden for single value sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "hide"
});
});
it("does not try to remove 'focus' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
describe("When tooltips are always shown for single value sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "always"
});
});
it("does not try to remove 'focus' event listener from handle1 when tooltip is always shown for single handle sliders", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1 when tooltip is always shown for single handle sliders", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider is always shown for single handle slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider is always shown for single handle slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
describe("When tooltips are always hidden for range sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "always",
value: [2,5]
});
});
it("does not try to remove 'focus' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'focus' event listener from handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'blur' event listener from handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
describe("When tooltips are always shown for range sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "always",
value: [2,5]
});
});
it("does not try to remove 'focus' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'focus' event listener from handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1 and handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
});
});
\ No newline at end of file
describe("Dragging handles tests", function() {
var testSlider;
describe("Dragging handles over each other", function() {
it("should swap reliably given imprecision", function() {
testSlider = new Slider(document.getElementById("testSlider1"), {
ticks: [0, 1, 2, 3, 4, 5, 6],
value: [4, 5],
step: 1,
range: true,
});
var mouseEventArguments = [
'mousemove', // type
true, // canBubble
true, // cancelable
document, // view,
0, // detail
0, // screenX
0, // screenY
undefined, // clientX
testSlider.sliderElem.offsetTop, // clientY,
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey,
0, // button
null // relatedTarget
];
// Create mouse event with position to the left of problem tick
var mouseLeft = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseLeft.initMouseEvent.apply(mouseLeft, mouseEventArguments);
// Create mouse event with position on problem tick
var mouseOverlap = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[5].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseOverlap.initMouseEvent.apply(mouseOverlap, mouseEventArguments);
// Create mouse event with position to the right of problem tick
var mouseRight = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[6].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
// Simulate drag without swapping
testSlider.mousedown(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate handle overlap
testSlider.mousemove(mouseOverlap);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulate left over right drag with imprecision in reported percentage
testSlider.mousemove(mouseRight);
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 6]);
// Simulate handle overlap
testSlider.mousemove(mouseOverlap);
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulator handle overlap with click
testSlider.mousemove(mouseOverlap);
testSlider.mousedown(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate right over left drag with imprecision in reported percentage
testSlider.mousemove(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// End with mouse up
testSlider.mouseup();
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
});
});
afterEach(function() {
if(testSlider) {
if(testSlider instanceof Slider) { testSlider.destroy(); }
testSlider = null;
}
});
});
\ No newline at end of file
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'); }
});
});
\ No newline at end of file
describe("Event Tests", function() {
var testSlider, flag, mouse;
beforeEach(function() {
flag = false;
mouse = document.createEvent('MouseEvents');
});
describe("JQuery version", function() {
beforeEach(function() {
testSlider = $("#testSlider2").slider({
value: 1
});
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
describe("Mouse Events", function() {
it("'slideStart' event is triggered properly and can be binded to", function() {
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(mouse);
expect(flag).toBeTruthy();
});
it("'slide' event is triggered properly and can be binded to", function() {
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).toBeTruthy();
});
it("'slide' event sets the right value on the input", function() {
testSlider.on('slide', function() {
flag = true;
expect(isNaN(testSlider.val())).not.toBeTruthy();
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).toBeTruthy();
});
it("'slide' event value and input value properties are synchronous", function() {
testSlider.on('slide', function(e) {
flag = true;
expect(e.value.toString()).toEqual(this.value);
});
testSlider.slider("setValue", 3, true, false);
expect(flag).toBeTruthy();
});
it("'change' event value and input value properties are synchronous", function() {
testSlider.on('change', function(e) {
flag = true;
expect(e.value.newValue.toString()).toEqual(testSlider.val());
});
testSlider.slider("setValue", 3, false, true);
expect(flag).toBeTruthy();
});
it("'slideStop' event is triggered properly and can be binded to", function() {
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup(mouse);
expect(flag).toBeTruthy();
});
it("slider should not have duplicate events after calling 'refresh'", function() {
flag = 0;
testSlider.on('slideStop', function() {
flag += 1;
});
testSlider.slider('refresh');
testSlider.data('slider')._mouseup();
expect(flag).toEqual(1);
});
describe("Disabled Slider Event Tests", function() {
beforeEach(function() {
testSlider.slider('disable');
});
it("should not trigger 'slideStart' event when disabled", function() {
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(mouse);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slide' event when disabled", function() {
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slideStop' event when disabled", function() {
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup();
expect(flag).not.toBeTruthy();
});
});
});
describe("Touch Events", function() {
var touch;
beforeEach(function() {
touch = document.createEvent('Event');
var dummyTouchEvent = document.createEvent('MouseEvents');
touch.touches = [dummyTouchEvent];
window.ontouchstart = true;
});
afterEach(function() {
window.ontouchstart = null;
});
it("'slideStart' event is triggered properly and can be binded to", function() {
touch.initEvent("touchstart");
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(touch);
expect(flag).toBeTruthy();
});
it("'slide' event is triggered properly and can be binded to", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(touch);
expect(flag).toBeTruthy();
});
it("'slide' event sets the right value on the input", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function() {
flag = true;
expect(isNaN(testSlider.val())).not.toBeTruthy();
});
testSlider.data('slider')._mousemove(touch);
expect(flag).toBeTruthy();
});
it("'slide' event value and input value properties are synchronous", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function(e) {
flag = true;
expect(e.value.toString()).toEqual(testSlider.val());
});
testSlider.slider("setValue", 3, true, false);
expect(flag).toBeTruthy();
});
it("'change' event value and input value properties are synchronous", function() {
touch.initEvent("touchmove");
testSlider.on('change', function(e) {
flag = true;
expect(e.value.newValue.toString()).toEqual(testSlider.val());
});
testSlider.slider("setValue", 3, false, true);
expect(flag).toBeTruthy();
});
it("'slideStop' event is triggered properly and can be binded to", function() {
touch.initEvent("touchstop");
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup();
expect(flag).toBeTruthy();
});
it("slider should not have duplicate events after calling 'refresh'", function() {
touch.initEvent("touchstop");
flag = 0;
testSlider.on('slideStop', function() {
flag += 1;
});
testSlider.slider('refresh');
testSlider.data('slider')._mouseup();
expect(flag).toEqual(1);
});
it("slider should not bind multiple touchstart events after calling 'refresh'", function() {
touch.initEvent("touchstart", true, true);
flag = 0;
testSlider.on('slideStart', function() {
flag += 1;
});
testSlider.slider('refresh');
$('.slider .slider-handle').get(0).dispatchEvent(touch);
expect(flag).toEqual(1);
});
describe("Disabled Slider Event Tests", function() {
beforeEach(function() {
testSlider.slider('disable');
});
it("should not trigger 'slideStart' event when disabled", function() {
touch.initEvent("touchstart");
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(touch);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slide' event when disabled", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(touch);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slideStop' event when disabled", function() {
touch.initEvent("touchend");
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup();
expect(flag).not.toBeTruthy();
});
});
});
describe("Enabled/Disabled tests", function() {
it("'slideDisabled' event is triggered properly and can be binded to", function() {
testSlider.on('slideDisabled', function() {
flag = true;
});
testSlider.slider('disable');
expect(flag).toBeTruthy();
});
it("'slideDisabled' event is triggered properly and can be binded to", function() {
testSlider.on('slideEnabled', function() {
flag = true;
});
testSlider.slider('disable');
testSlider.slider('enable');
expect(flag).toBeTruthy();
});
it("'change' event is triggered properly and can be binded to", function() {
testSlider.on('change', function() {
flag = true;
});
testSlider.slider("setValue", 3, false, true);
expect(flag).toBeTruthy();
});
});
}); // End of JQuery version tests
describe("CommonJS version", function() {
describe("Event repetition tests", function() {
var testSlider, numTimesFired;
beforeEach(function() {
testSlider = new Slider("#testSlider2");
numTimesFired = 0;
});
afterEach(function() {
testSlider.destroy();
});
it("'slide' event is triggered only once per slide action", function() {
testSlider.on('slide', function() {
numTimesFired++;
});
testSlider._mousemove(mouse);
expect(numTimesFired).toEqual(1);
});
it("'slideStart' event is triggered only once per slide action", function() {
testSlider.on('slideStart', function() {
numTimesFired++;
});
testSlider._mousedown(mouse);
expect(numTimesFired).toEqual(1);
});
it("'slideStop' event is triggered only once per slide action", function() {
testSlider.on('slideStop', function() {
numTimesFired++;
});
testSlider._mouseup(mouse);
expect(numTimesFired).toEqual(1);
});
it("'change' event is triggered only once per value change action", function() {
testSlider.on('change', function() {
numTimesFired++;
});
testSlider.setValue(3, false, true);
expect(numTimesFired).toEqual(1);
});
});
}); // End of common JS tests
}); // End of spec
/*
******************
Focus Option Tests
******************
This spec has tests for checking proper behavior of the focus option.
*/
describe("Focus Option Tests", function() {
var testSlider;
var simulateMousedown = function(target, pos) {
var myEvent = document.createEvent("MouseEvents");
myEvent.initEvent("mousedown", true, true);
myEvent.pageX = pos;
myEvent.pageY = pos;
target.dispatchEvent(myEvent);
};
it("handle should not be focused after value change when 'focus' is false", function() {
testSlider = $("#testSlider1").slider({
min : 0,
max : 10,
value: 0,
focus: false,
id : "testSlider"
});
var hasFocus;
$("#testSlider").find(".min-slider-handle").focus(function() {
hasFocus = true;
});
simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);
expect(hasFocus).toBe(undefined);
});
it("handle should be focused after value change when 'focus' is true", function() {
testSlider = $("#testSlider1").slider({
min : 0,
max : 10,
value: 0,
focus: true,
id : "testSlider"
});
var hasFocus;
$("#testSlider").find(".min-slider-handle").focus(function() {
hasFocus = true;
});
simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);
expect(hasFocus).toBe(true);
});
afterEach(function() {
if (testSlider) {
testSlider.slider("destroy");
testSlider = null;
}
});
});
describe("Keyboard Support Tests", function() {
var testSlider,
handle1,
handle2,
keyboardEvent,
initialMinVal = 0,
initialMaxVal = 10,
initialStepVal = 1,
initialSliderVal = 5;
/*
Before/After setup
*/
beforeEach(function() {
// Create keyboard event
keyboardEvent = document.createEvent("Events");
keyboardEvent.initEvent("keydown", true, true);
});
afterEach(function() {
if(testSlider) { testSlider.slider('destroy'); }
keyboardEvent = null;
keyboardEvent = null;
});
/*
Begin Tests
*/
describe("Clicking on slider handle automatically gives it focus", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider'
});
handle1 = $("#testSlider").find(".slider-handle:first");
});
it("clicking on handle1 gives focus to handle1", function(done) {
handle1.focus(function() {
expect(true).toBeTruthy();
done();
});
handle1.focus();
});
});
describe("When slider handle has TAB focus", function() {
it("should display it's tooltip if 'tooltip' option is set to 'show'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'show'
});
handle1 = $("#testSlider").find(".slider-handle:first");
// Check for no tooltip before focus
var tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeFalsy();
handle1.focus();
// Tooltip should be present after focus
tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
it("should not display it's tooltip if 'tooltip' option is set to 'hide'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'hide'
});
handle1 = $("#testSlider").find(".slider-handle:first");
// Check for hidden tooltip before focus
var tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
handle1.focus();
// Tooltip should remain hidden after focus
tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
});
it("should not affect the tooltip display if 'tooltip' option is set to 'always'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'always'
});
handle1 = $("#testSlider").find(".slider-handle:first");
var $tooltip = $("#testSlider").children("div.tooltip");
// Check for shown tooltip before focus
var tooltipIsShown = $tooltip.hasClass("in");
expect(tooltipIsShown).toBeTruthy();
handle1.focus();
// Tooltip should remain present after focus
tooltipIsShown = $tooltip.hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
});
describe("For horizontal sliders where its handle has focus", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
orientation: 'horizontal',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider .min-slider-handle");
handle1.focus();
});
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = $("#testSlider1").slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = $("#testSlider1").slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For vertical sliders where its handle has focus", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
orientation: 'vertical',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves down by the 'step' value when the LEFT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves up by the 'step' value when the RIGHT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves down by the 'step' value when the DOWN arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves up by the 'step' value when the UP arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For a reversed slider (regardless of 'orientation')", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
reversed: true,
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the UP arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For a range slider (regardless of 'orientation')", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: [initialSliderVal, initialSliderVal]
});
});
describe("when handle1 tries to overtake handle2 from the left", function() {
beforeEach(function() {
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("handle2 moves to the right by the step value", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue[1]).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("handle1's value remains unchanged", function(done) {
var sliderValue = testSlider.slider('getValue');
handle1.on("keydown", function() {
expect(sliderValue[0]).toBe(initialSliderVal);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("when handle2 tries to overtake handle1 from the right", function() {
beforeEach(function() {
handle2 = $("#testSlider").find(".slider-handle:last");
handle2.focus();
});
it("handle1 moves to the left by the step value", function(done) {
handle2.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue[0]).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle2[0].dispatchEvent(keyboardEvent);
});
it("handle2's value remains unchanged", function(done) {
var sliderValue = testSlider.slider('getValue');
handle2.on("keydown", function() {
expect(sliderValue[1]).toBe(initialSliderVal);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle2[0].dispatchEvent(keyboardEvent);
});
});
});
describe("For the natural arrow keys", function() {
var testCases = [{
reversed: false,
keyEvent: 37,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'horizontal',
key: 'left'
}, {
reversed: true,
keyEvent: 37,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'horizontal',
key: 'left'
}, {
reversed: false,
keyEvent: 39,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'horizontal',
key: 'right'
}, {
reversed: true,
keyEvent: 39,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'horizontal',
key: 'right'
}, {
reversed: false,
keyEvent: 38,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'vertical',
key: 'up'
}, {
reversed: true,
keyEvent: 38,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'vertical',
key: 'up'
}, {
reversed: false,
keyEvent: 40,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'vertical',
key: 'down'
}, {
reversed: true,
keyEvent: 40,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'vertical',
key: 'down'
}];
testCases.forEach(function(testCase) {
describe("A"+((testCase.reversed)? " reversed" : "")+testCase.orientation+" slider is used for the arrow keys", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal,
natural_arrow_keys: true,
reversed: testCase.reversed,
orientation: testCase.orientation
});
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves to the "+testCase.key+" by the 'step' value when the "+testCase.key+" arrow key is pressed", function(done) {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = testCase.expectedSliderValue;
expect(sliderValue).toBe(expectedSliderValue);
done();
});
keyboardEvent.keyCode = keyboardEvent.which = testCase.keyEvent;
handle1[0].dispatchEvent(keyboardEvent);
});
});
});
});
});
\ No newline at end of file
/*
*************************
Logarithmic Scale Tests
*************************
*/
describe("Slider with logarithmic scale tests", function() {
var testSlider;
it("Should properly position the slider", function() {
testSlider = $("#testSlider1").slider({
min: 0,
max: 10000,
scale: 'logarithmic',
value: 100 // This should be at 50%
});
var expectedPostition = 210 / 2 + 'px';
var handle = $("#testSlider1").siblings('div.slider').find('.min-slider-handle');
expect(handle.css('left')).toBe(expectedPostition);
});
it("Should properly position the tick marks", function() {
testSlider = $("#testSlider1").slider({
min: 0,
max: 100,
scale: 'logarithmic',
ticks: [0,10,20,50,100]
});
// Position expected for the '10' tick
var expectedTickOnePosition = 210 / 2 + 'px'; //should be at 50%
var handle = $("#testSlider1").siblings('div.slider').find(".slider-tick").eq(1);
expect(handle.css('left')).toBe(expectedTickOnePosition);
});
it("Should use step size when navigating the keyboard", function() {
testSlider = $("#testSlider1").slider({
min: 0,
max: 10000,
scale: 'logarithmic',
value: 100,
step: 5
});
// Focus on handle1
var handle1 = $("#testSlider1").siblings('div.slider:first').find('.slider-handle');
handle1.focus();
// Create keyboard event
var keyboardEvent = document.createEvent("Events");
keyboardEvent.initEvent("keydown", true, true);
var keyPresses = 0;
handle1.on("keydown", function() {
keyPresses++;
var value = $("#testSlider1").slider('getValue');
expect(value).toBe(100 + keyPresses*5);
});
keyboardEvent.keyCode = keyboardEvent.which = 39; // RIGHT
for (var i = 0; i < 5; i++) {
handle1[0].dispatchEvent(keyboardEvent);
}
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
/*
**********************
Left/Right Track Tests
**********************
This spec has tests for checking that the widths of the left and right
segments are the correct widths and colors, based on their CSS.
*/
describe("Low/High Track Tests", function() {
var unstyledID = "low-high-slider";
var styledID = "low-high-slider-styled";
var testSlider;
describe("Single-value sliders, no styling", function() {
var id = unstyledID;
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: 0,
max: 10,
value: 5
});
});
it("low track width is zero", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
expect($(leftTrack).css("width")).toBe("0px");
});
it("high track width is 50%", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
expect($(rightTrack).css("width")).toBe((trackWidth / 2) + "px");
});
it("high track is transparent", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
var isTransparent = rightColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
expect(isTransparent).toBeTruthy();
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("Single-value sliders, with styling", function() {
var id = styledID;
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: 0,
max: 10,
value: 5
});
});
it("low track width is zero", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
expect($(leftTrack).css("width")).toBe("0px");
});
it("high track width is 50%", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
expect($(rightTrack).css("width")).toBe((trackWidth / 2) + "px");
});
it("high track is red", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
expect(rightColor).toBe("rgb(255, 0, 0)");
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("Range sliders, no styling", function() {
var id = unstyledID;
var values = {
min: 0,
max: 10,
values: [ 4, 6 ]
};
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: values.min,
max: values.max,
range: true,
value: values.values
});
});
it("low track width is correct", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var trackWidth = leftTrack.parent().width();
var expectedWidth = ((values.values[0] - values.min) / (values.max - values.min)) * trackWidth;
expect($(leftTrack).css("width")).toBe(expectedWidth + "px");
});
it("high track width is correct", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
var expectedWidth = ((values.max - values.values[1]) / (values.max - values.min)) * trackWidth;
expect($(rightTrack).css("width")).toBe(expectedWidth + "px");
});
it("low track is transparent", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var leftColor = leftTrack.css("background-color");
var isTransparent = leftColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
expect(isTransparent).toBeTruthy();
});
it("high track is transparent", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
var isTransparent = rightColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
expect(isTransparent).toBeTruthy();
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("Range sliders, with styling", function() {
var id = styledID;
var values = {
min: 0,
max: 10,
values: [ 4, 6 ]
};
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: values.min,
max: values.max,
range: true,
value: values.values
});
});
it("low track width is correct", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var trackWidth = leftTrack.parent().width();
var expectedWidth = ((values.values[0] - values.min) / (values.max - values.min)) * trackWidth;
expect($(leftTrack).css("width")).toBe(expectedWidth + "px");
});
it("high track width is correct", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
var expectedWidth = ((values.max - values.values[1]) / (values.max - values.min)) * trackWidth;
expect($(rightTrack).css("width")).toBe(expectedWidth + "px");
});
it("low track is green", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var leftColor = leftTrack.css("background-color");
expect(leftColor).toBe("rgb(0, 255, 0)");
});
it("high track is red", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
expect(rightColor).toBe("rgb(255, 0, 0)");
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
});
\ No newline at end of file
describe("Namespace Tests", function() {
var sourceJS = "temp/bootstrap-slider.js";
it("should always set the plugin namespace to 'bootstrapSlider'", function(done) {
$.getScript(sourceJS, function() {
expect($.fn.bootstrapSlider).toBeDefined();
done();
});
});
it("should set the plugin namespace to 'slider' if the namespace is available", function(done) {
$.getScript(sourceJS, function() {
expect($.fn.slider).toBeDefined();
done();
});
});
it("should print a console warning if the 'slider' namespace is already bound", function(done) {
$.fn.slider = function() {};
spyOn(window.console, "warn");
$.getScript(sourceJS, function() {
var expectedWarningMessage = "bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead.";
expect(window.console.warn).toHaveBeenCalledWith(expectedWarningMessage);
done();
});
});
afterEach(function(done) {
/*
Set the namespaces back to undefined and reload slider
So that namespace is returned to $.fn.slider
*/
$.fn.bootstrapSlider = undefined;
$.fn.slider = undefined;
$.getScript(sourceJS, function() {
done();
});
});
});
\ No newline at end of file
describe("Orientation Tests", function() {
var testSlider;
var sliderHandleTopPos;
var sliderHandleLeftPos;
describe("Vertical", function() {
beforeEach(function() {
testSlider = new Slider("#orientationSlider", {
id: "orientationSliderId",
orientation: "vertical",
min: 0,
max: 10,
value: 5
});
var sliderHandleEl = document.querySelector("#orientationSliderId .slider-handle");
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
});
afterEach(function() {
if(testSlider) {
testSlider.destroy();
}
});
it("slides up when handle moves upwards", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos - 100;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toBeLessThan(5);
});
it("slides down when handle moves downwards", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos + 100;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toBeGreaterThan(5);
});
});
}); // End of spec
\ No newline at end of file
describe("Public Method Tests", function() {
var testSlider;
describe("slider constructor", function() {
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);
});
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);
});
/* TODO: Fix this test! It keeps throwing a weird bug where is says '955' instead of '9' for the value */
// 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 <input> 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 <input> 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 re-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 be 0 on slider intialization
tooltipMarginLeft = parseFloat(mainTooltipDOMRef.style.marginLeft);
expect(tooltipMarginLeft).toBe(0);
// Show slider and call relayout()
relayoutSliderContainerDOMRef.style.display = "block";
testSlider.relayout();
// Main tooltip margin-left offset should re-adjust to be > 0
tooltipMarginLeft = Math.abs( parseFloat(mainTooltipDOMRef.style.marginLeft) );
expect(tooltipMarginLeft).toBeGreaterThan(0);
});
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;
}
});
});
/*
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%'
}]);
});
describe("refresh() Method Tests", function() {
var testSlider;
afterEach(function() {
if(testSlider) {
testSlider.destroy();
}
});
it("does not convert a non-range slider into a range slider when invoked", function() {
// Initialize non-range slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5
});
// Assert that slider is non-range slider
var initialValue = testSlider.getValue();
var sliderIsRangeValue = initialValue instanceof Array;
expect(sliderIsRangeValue).toBeFalsy();
// Invoke refresh() method
testSlider.refresh();
// Assert that slider remains a non-range slider
var afterRefreshValue = testSlider.getValue();
sliderIsRangeValue = afterRefreshValue instanceof Array;
expect(sliderIsRangeValue).toBeFalsy();
});
}); // End of spec
\ No newline at end of file