Skip to content

I
i20rzslider
Commit 2642b8c2 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

test(mouse events): Add first tests for mouse events handling

parent 2f2a28b9
Show whitespace changes
Inline Side-by-side
Showing with 1033 additions and 672 deletions
src/rzslider.js
View file @ 2642b8c2
......@@ -1182,9 +1182,7 @@
if (this.options.draggableRangeOnly) {
this.minH.on('mousedown', angular.bind(this, barStart, null, barTracking));
if (this.range) {
this.maxH.on('mousedown', angular.bind(this, barStart, null, barTracking));
}
} else {
this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
if (this.range) {
......@@ -1200,9 +1198,7 @@
this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
if (this.options.draggableRangeOnly) {
this.minH.on('touchstart', angular.bind(this, barStart, null, barTracking));
if (this.range) {
this.maxH.on('touchstart', angular.bind(this, barStart, null, barTracking));
}
} else {
this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
if (this.range) {
......@@ -1284,7 +1280,6 @@
onMove: function(pointer, event) {
var newOffset = this.getEventPosition(event),
newValue;
if (newOffset <= 0) {
if (pointer.rzsp === 0)
return;
......
tests/spec/rz-slider-service-test.js
View file @ 2642b8c2
......@@ -8,22 +8,27 @@ describe('rzslider - ', function() {
$compile,
$timeout,
$window,
$document,
element,
parent,
slider;
beforeEach(module('rzModule'));
beforeEach(module('appTemplates'));
beforeEach(inject(function(_RzSlider_, _RzSliderOptions_, _$rootScope_, _$compile_, _$timeout_, _$window_) {
beforeEach(inject(function(_RzSlider_, _RzSliderOptions_, _$rootScope_, _$compile_, _$timeout_, _$window_,
_$document_) {
RzSlider = _RzSlider_;
RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_;
$compile = _$compile_;
$timeout = _$timeout_;
$window = _$window_;
$document = _$document_;
}));
afterEach(function() {
//simulate to $destroy event to clean everything
scope.$broadcast('$destroy');
//clean the element we append at each test
parent.remove();
});
......@@ -901,799 +906,1160 @@ describe('rzslider - ', function() {
/*
******************************************************************************
KEYBOARD CONTROLS
HELPER FUNCTIONS
******************************************************************************
*/
describe('keyboard controls', function() {
describe('simple cases for single slider - ', function() {
describe('helper functions - ', function() {
beforeEach(function() {
var sliderConf = {
value: 100,
value: 50,
options: {
floor: 0,
ceil: 200
ceil: 100,
step: 10
}
};
createSlider(sliderConf);
});
it('should toggle active style when handle focused/blured', function() {
slider.minH.triggerHandler('focus');
expect(slider.minH.hasClass('rz-active')).to.be.true;
slider.minH.triggerHandler('blur');
expect(slider.minH.hasClass('rz-active')).to.be.false;
it('should have a valid roundStep for integer values', function() {
expect(slider.roundStep(10)).to.equal(10);
expect(slider.roundStep(9)).to.equal(10);
expect(slider.roundStep(11)).to.equal(10);
expect(slider.roundStep(15)).to.equal(20);
expect(slider.roundStep(14)).to.equal(10);
expect(slider.roundStep(-10)).to.equal(-10);
expect(slider.roundStep(-9)).to.equal(-10);
expect(slider.roundStep(-11)).to.equal(-10);
expect(slider.roundStep(-16)).to.equal(-20);
expect(slider.roundStep(-15)).to.equal(-10);
expect(slider.roundStep(-14)).to.equal(-10);
});
it('should increment by 1 when RIGHT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
});
it('should have a valid roundStep for floating values', function() {
scope.slider.options.precision = 1;
scope.slider.options.step = 0.1;
scope.$digest();
it('should decrement by 1 when LEFT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(99);
});
expect(slider.roundStep(10)).to.equal(10);
expect(slider.roundStep(1.1)).to.equal(1.1);
expect(slider.roundStep(1.09)).to.equal(1.1);
expect(slider.roundStep(1.11)).to.equal(1.1);
expect(slider.roundStep(1.15)).to.equal(1.2);
expect(slider.roundStep(1.14)).to.equal(1.1);
it('should increment by 1 when UP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'UP');
expect(scope.slider.value).to.equal(101);
expect(slider.roundStep(-10)).to.equal(-10);
expect(slider.roundStep(-1.1)).to.equal(-1.1);
expect(slider.roundStep(-1.09)).to.equal(-1.1);
expect(slider.roundStep(-1.11)).to.equal(-1.1);
expect(slider.roundStep(-1.16)).to.equal(-1.2);
expect(slider.roundStep(-1.15)).to.equal(-1.1);
expect(slider.roundStep(-1.14)).to.equal(-1.1);
});
it('should decrement by 1 when DOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'DOWN');
expect(scope.slider.value).to.equal(99);
it('should have a valid hideEl', function() {
var el = angular.element('<div></div>');
slider.hideEl(el);
expect(el.css('opacity')).to.equal('0');
});
it('should increment by 10% when PAGEUP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.value).to.equal(120);
it('should have a valid showEl when not rzAlwaysHide', function() {
var el = angular.element('<div></div>');
slider.showEl(el);
expect(el.css('opacity')).to.equal('1');
});
it('should decrement by 10% when PAGEDOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.value).to.equal(80);
});
it('should have a valid showEl when rzAlwaysHide', function() {
var el = angular.element('<div></div>');
el.css('opacity', 0);
el.rzAlwaysHide = true;
it('should set value to min when HOME is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.value).to.equal(0);
slider.showEl(el);
expect(el.css('opacity')).to.equal('0');
});
it('should set value to max when END is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'END');
expect(scope.slider.value).to.equal(200);
it('should have a valid setPosition for horizontal sliders', function() {
var el = angular.element('<div></div>');
slider.setPosition(el, 12);
expect(el.css('left')).to.equal('12px');
});
it('should do nothing when SPACE is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'SPACE');
expect(scope.slider.value).to.equal(100);
it('should have a valid setPosition for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
var el = angular.element('<div></div>');
slider.setPosition(el, 12);
expect(el.css('bottom')).to.equal('12px');
});
it('should not modify when keypress but not focused', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
slider.minH.triggerHandler('blur');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
});
it('should have a valid getDimension for horizontal sliders', function() {
expect(slider.getDimension(slider.sliderElem)).to.equal(1000);
});
describe('simple cases for range slider - ', function() {
beforeEach(function() {
var sliderConf = {
min: 50,
max: 100,
options: {
floor: 0,
ceil: 200
}
};
createRangeSlider(sliderConf);
it('should have a valid getDimension for horizontal sliders with custom scale', function() {
scope.slider.options.scale = 2;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
});
it('should toggle active style when handle focused/blured', function() {
slider.minH.triggerHandler('focus');
expect(slider.minH.hasClass('rz-active')).to.be.true;
expect(slider.maxH.hasClass('rz-active')).to.be.false;
slider.minH.triggerHandler('blur');
slider.maxH.triggerHandler('focus');
expect(slider.minH.hasClass('rz-active')).to.be.false;
expect(slider.maxH.hasClass('rz-active')).to.be.true;
slider.maxH.triggerHandler('blur');
expect(slider.minH.hasClass('rz-active')).to.be.false;
expect(slider.maxH.hasClass('rz-active')).to.be.false;
it('should have a valid getDimension for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(1000);
});
it('should increment minH by 1 when RIGHT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(51);
it('should have a valid getDimension for vertical sliders with custom scale', function() {
scope.slider.options.scale = 2;
scope.slider.options.vertical = true;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
});
it('should increment maxH by 1 when RIGHT is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(101);
it('should have a valid setDimension for horizontal sliders', function() {
var el = angular.element('<div></div>');
slider.setDimension(el, 12);
expect(el.css('width')).to.equal('12px');
});
it('should decrement minH by 1 when LEFT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.min).to.equal(49);
it('should have a valid setDimension for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
var el = angular.element('<div></div>');
slider.setDimension(el, 12);
expect(el.css('height')).to.equal('12px');
});
it('should decrement maxH by 1 when LEFT is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'LEFT');
expect(scope.slider.max).to.equal(99);
it('should have a valid valueToOffset for positive sliders', function() {
slider.maxPos = 1000;
expect(slider.valueToOffset(0)).to.equal(0);
expect(slider.valueToOffset(50)).to.equal(500);
expect(slider.valueToOffset(100)).to.equal(1000);
});
it('should increment minH by 10% when PAGEUP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.min).to.equal(70);
});
it('should have a valid valueToOffset for negative sliders', function() {
scope.slider.options.floor = -100;
scope.slider.options.ceil = 0;
scope.slider.value = -50;
scope.$digest();
it('should increment maxH by 10% when PAGEUP is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEUP');
expect(scope.slider.max).to.equal(120);
slider.maxPos = 1000;
expect(slider.valueToOffset(0)).to.equal(1000);
expect(slider.valueToOffset(-50)).to.equal(500);
expect(slider.valueToOffset(-100)).to.equal(0);
});
it('should decrement minH by 10% when PAGEDOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.min).to.equal(30);
it('should have a valid sanitizeValue', function() {
expect(slider.sanitizeValue(0)).to.equal(0);
expect(slider.sanitizeValue(50)).to.equal(50);
expect(slider.sanitizeValue(100)).to.equal(100);
expect(slider.sanitizeValue(-1)).to.equal(0);
expect(slider.sanitizeValue(-10)).to.equal(0);
expect(slider.sanitizeValue(101)).to.equal(100);
expect(slider.sanitizeValue(110)).to.equal(100);
});
it('should decrement maxH by 10% when PAGEDOWN is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEDOWN');
expect(scope.slider.max).to.equal(80);
it('should have a valid offsetToValue for positive sliders', function() {
slider.maxPos = 1000;
expect(slider.offsetToValue(0)).to.equal(0);
expect(slider.offsetToValue(1000)).to.equal(100);
expect(slider.offsetToValue(500)).to.equal(50);
});
it('should set minH to min when HOME is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.min).to.equal(0);
});
it('should have a valid offsetToValue for for negative sliders', function() {
scope.slider.options.floor = -100;
scope.slider.options.ceil = 0;
scope.slider.value = -50;
scope.$digest();
slider.maxPos = 1000;
it('should set minH value to previous min and switch min/max when HOME is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'HOME');
expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(50);
expect(slider.offsetToValue(0)).to.equal(-100);
expect(slider.offsetToValue(1000)).to.equal(0);
expect(slider.offsetToValue(500)).to.equal(-50);
});
it('should set minH value to previous max and switch min/max when END is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'END');
expect(scope.slider.min).to.equal(100);
expect(scope.slider.max).to.equal(200);
it('should have a valid getEventXY for horizontal sliders on desktop browsers', function() {
var event = {
clientX: 12
};
expect(slider.getEventXY(event)).to.equal(12);
});
it('should set maxH value to max when END is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'END');
expect(scope.slider.max).to.equal(200);
});
it('should do nothing when SPACE is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'SPACE');
expect(scope.slider.min).to.equal(50);
it('should have a valid getEventXY for vertical sliders on desktop browsers', function() {
scope.slider.options.vertical = true;
scope.$digest();
var event = {
clientY: 12
};
expect(slider.getEventXY(event)).to.equal(12);
});
it('should do nothing when SPACE is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'SPACE');
expect(scope.slider.max).to.equal(100);
it('should have a valid getEventXY for horizontal sliders on mobile browsers with no originalEvent', function() {
var event = {
touches: [{
clientX: 12
}]
};
expect(slider.getEventXY(event)).to.equal(12);
});
it('should not modify minH when keypress but not focused', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(51);
slider.minH.triggerHandler('blur');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(51);
it('should have a valid getEventXY for horizontal sliders on mobile browsers with originalEvent', function() {
var event = {
originalEvent: {
touches: [{
clientX: 12
}]
}
};
expect(slider.getEventXY(event)).to.equal(12);
});
it('should not modify maxH when keypress but not focused', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(101);
slider.maxH.triggerHandler('blur');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(101);
});
it('should have a valid getEventXY for vertical sliders on mobile browsers with no originalEvent', function() {
scope.slider.options.vertical = true;
scope.$digest();
var event = {
touches: [{
clientY: 12
}]
};
expect(slider.getEventXY(event)).to.equal(12);
});
describe('range slider with draggableRangeOnly=true - ', function() {
beforeEach(function() {
var sliderConf = {
min: 90,
max: 110,
options: {
floor: 0,
ceil: 200,
draggableRangeOnly: true
it('should have a valid getEventXY for vertical sliders on mobile browsers with originalEvent', function() {
scope.slider.options.vertical = true;
scope.$digest();
var event = {
originalEvent: {
touches: [{
clientY: 12
}]
}
};
createRangeSlider(sliderConf);
expect(slider.getEventXY(event)).to.equal(12);
});
it('should increment minH/maxH by 1 when RIGHT is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(91);
expect(scope.slider.max).to.equal(111);
});
it('should have a valid getEventPosition for horizontal sliders', function() {
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should increment minH/maxH by 1 when RIGHT is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.min).to.equal(91);
expect(scope.slider.max).to.equal(111);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should increment minH/maxH by 1 when LEFT is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.min).to.equal(89);
expect(scope.slider.max).to.equal(109);
expect(slider.getEventPosition(event)).to.equal(20);
});
it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'LEFT');
expect(scope.slider.min).to.equal(89);
expect(scope.slider.max).to.equal(109);
});
it('should have a valid getEventPosition for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.min).to.equal(110);
expect(scope.slider.max).to.equal(130);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should increment minH/maxH by 10% when PAGEUP is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEUP');
expect(scope.slider.min).to.equal(110);
expect(scope.slider.max).to.equal(130);
expect(slider.getEventPosition(event)).to.equal(-52);
});
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.min).to.equal(70);
expect(scope.slider.max).to.equal(90);
});
it('should have a valid getEventPosition for horizontal sliders with scale option', function() {
scope.slider.options.scale = 0.5;
scope.$digest();
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEDOWN');
expect(scope.slider.min).to.equal(70);
expect(scope.slider.max).to.equal(90);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should set minH to min when HOME is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(20);
expect(slider.getEventPosition(event)).to.equal(10);
});
it('should set minH to min when HOME is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'HOME');
expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(20);
it('should have a valid getEventPosition for vertical sliders with scale option', function() {
scope.slider.options.scale = 0.5;
scope.slider.options.vertical = true;
scope.$digest();
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
expect(slider.getEventPosition(event)).to.equal(-26);
});
it('should set minH to min when END is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'END');
expect(scope.slider.min).to.equal(180);
expect(scope.slider.max).to.equal(200);
it('should have a valid getNearestHandle for single sliders', function() {
sinon.stub(slider, 'getEventPosition').returns(46);
var event = {};
expect(slider.getNearestHandle(event)).to.equal(slider.minH);
});
it('should set minH to min when END is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'END');
expect(scope.slider.min).to.equal(180);
expect(scope.slider.max).to.equal(200);
it('should have a valid focusElement', function() {
var el = [{
focus: sinon.spy()
}];
slider.focusElement(el);
el[0].focus.called.should.be.true;
});
});
describe('simple cases for vertical slider - ', function() {
beforeEach(function() {
it('should have a valid getNearestHandle for range sliders when click is near minH', function() {
var sliderConf = {
value: 100,
min: 20,
max: 80,
options: {
floor: 0,
ceil: 200,
vertical: true
ceil: 100,
step: 10
}
};
createSlider(sliderConf);
});
it('should increment by 1 when RIGHT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
});
it('should increment by 1 when UP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'UP');
expect(scope.slider.value).to.equal(101);
});
createRangeSlider(sliderConf);
sinon.stub(slider, 'getEventPosition').returns(46);
it('should decrement by 1 when DOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'DOWN');
expect(scope.slider.value).to.equal(99);
});
//fake slider's dimension
slider.minH.rzsp = 0;
slider.maxH.rzsp = 100;
it('should decrement by 1 when LEFT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(99);
});
var event = {};
expect(slider.getNearestHandle(event)).to.equal(slider.minH);
});
it('should not go below floor', function() {
it('should have a valid getNearestHandle for range sliders when click is near maxH', function() {
var sliderConf = {
value: 10,
min: 20,
max: 80,
options: {
floor: 0,
ceil: 1000,
ceil: 100,
step: 10
}
};
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.value).to.equal(0);
createRangeSlider(sliderConf);
sinon.stub(slider, 'getEventPosition').returns(66);
//fake slider's dimension
slider.minH.rzsp = 0;
slider.maxH.rzsp = 100;
var event = {};
expect(slider.getNearestHandle(event)).to.equal(slider.maxH);
});
it('should not go above ceil', function() {
it('should have a bindEvents that bind correct events for single sliders on desktop', function() {
var sliderConf = {
value: 990,
value: 50,
options: {
floor: 0,
ceil: 1000,
ceil: 100,
step: 10
}
};
createSlider(sliderConf);
slider.onStart = sinon.spy();
slider.onMove = sinon.spy();
slider.onPointerFocus = sinon.spy();
slider.unbindEvents(); //remove previously bound events
slider.bindEvents();
slider.selBar.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(1);
expect(slider.onMove.callCount).to.equal(1);
slider.minH.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(2);
expect(slider.onMove.callCount).to.equal(1);
slider.maxH.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(2);
expect(slider.onMove.callCount).to.equal(1);
slider.fullBar.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(3);
expect(slider.onMove.callCount).to.equal(2);
slider.ticks.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(4);
expect(slider.onMove.callCount).to.equal(3);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.value).to.equal(1000);
expect(slider.onPointerFocus.callCount).to.equal(1);
slider.maxH.triggerHandler('focus');
expect(slider.onPointerFocus.callCount).to.equal(1);
});
it('should not be modified by keyboard if disabled=true', function() {
it('should have a bindEvents that bind correct events for single sliders on mobile', function() {
var sliderConf = {
value: 10,
value: 50,
options: {
floor: 0,
ceil: 100,
disabled: true
step: 10
}
};
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
slider.onStart = sinon.spy();
slider.onMove = sinon.spy();
slider.onPointerFocus = sinon.spy();
slider.unbindEvents(); //remove previously bound events
slider.bindEvents();
slider.selBar.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(1);
expect(slider.onMove.callCount).to.equal(1);
slider.minH.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(2);
expect(slider.onMove.callCount).to.equal(1);
slider.maxH.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(2);
expect(slider.onMove.callCount).to.equal(1);
slider.fullBar.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(3);
expect(slider.onMove.callCount).to.equal(2);
slider.ticks.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(4);
expect(slider.onMove.callCount).to.equal(3);
});
it('should not be modified by keyboard if readOnly=true', function() {
it('should have a bindEvents that bind correct events for range sliders on desktop', function() {
var sliderConf = {
value: 10,
min: 20,
max: 80,
options: {
floor: 0,
ceil: 100,
readOnly: true
step: 10
}
};
createSlider(sliderConf);
createRangeSlider(sliderConf);
slider.onStart = sinon.spy();
slider.onMove = sinon.spy();
slider.onPointerFocus = sinon.spy();
slider.unbindEvents(); //remove previously bound events
slider.bindEvents();
slider.selBar.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(1);
expect(slider.onMove.callCount).to.equal(1);
slider.minH.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(2);
expect(slider.onMove.callCount).to.equal(1);
slider.maxH.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(3);
expect(slider.onMove.callCount).to.equal(1);
slider.fullBar.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(4);
expect(slider.onMove.callCount).to.equal(2);
slider.ticks.triggerHandler('mousedown');
expect(slider.onStart.callCount).to.equal(5);
expect(slider.onMove.callCount).to.equal(3);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
expect(slider.onPointerFocus.callCount).to.equal(1);
slider.maxH.triggerHandler('focus');
expect(slider.onPointerFocus.callCount).to.equal(2);
});
it('should not be modified by keyboard if keyboardSupport=false', function() {
it('should have a bindEvents that bind correct events for range sliders on mobile', function() {
var sliderConf = {
value: 10,
min: 20,
max: 80,
options: {
floor: 0,
ceil: 100,
keyboardSupport: false
step: 10
}
};
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
createRangeSlider(sliderConf);
slider.onStart = sinon.spy();
slider.onMove = sinon.spy();
slider.onPointerFocus = sinon.spy();
slider.unbindEvents(); //remove previously bound events
slider.bindEvents();
slider.selBar.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(1);
expect(slider.onMove.callCount).to.equal(1);
slider.minH.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(2);
expect(slider.onMove.callCount).to.equal(1);
slider.maxH.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(3);
expect(slider.onMove.callCount).to.equal(1);
slider.fullBar.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(4);
expect(slider.onMove.callCount).to.equal(2);
slider.ticks.triggerHandler('touchstart');
expect(slider.onStart.callCount).to.equal(5);
expect(slider.onMove.callCount).to.equal(3);
});
function pressKeydown(element, key, oldAPI) {
key = key.toUpperCase();
var event = {
type: 'keydown'
};
var keys = {
'UP': 38,
'DOWN': 40,
'LEFT': 37,
'RIGHT': 39,
'PAGEUP': 33,
'PAGEDOWN': 34,
'HOME': 36,
'END': 35,
'SPACE': 32
};
var keyCode = keys[key];
if (oldAPI)
eent.which = keyCode;
else event.keyCode = keyCode;
element.triggerHandler(event);
it('should have a unbindEvents that unbind all events', function() {
var sliderConf = {
min: 20,
max: 80,
options: {
floor: 0,
ceil: 100,
step: 10
}
};
createRangeSlider(sliderConf);
slider.onStart = sinon.spy();
slider.onMove = sinon.spy();
slider.onPointerFocus = sinon.spy();
slider.unbindEvents(); //remove previously bound events
slider.bindEvents();
slider.unbindEvents();
slider.selBar.triggerHandler('mousedown');
slider.minH.triggerHandler('mousedown');
slider.maxH.triggerHandler('mousedown');
slider.fullBar.triggerHandler('mousedown');
slider.ticks.triggerHandler('mousedown');
slider.minH.triggerHandler('focus');
expect(slider.onStart.callCount).to.equal(0);
expect(slider.onMove.callCount).to.equal(0);
expect(slider.onPointerFocus.callCount).to.equal(0);
});
/*
******************************************************************************
HELPER FUNCTIONS
MOUSE CONTROLS
******************************************************************************
*/
describe('helper functions - ', function() {
describe('mouse controls', function() {
describe('simple cases for single slider - ', function() {
beforeEach(function() {
var sliderConf = {
value: 50,
value: 0,
options: {
floor: 0,
ceil: 100,
step: 10
ceil: 100
}
};
createSlider(sliderConf);
});
it('should have a valid roundStep for integer values', function() {
expect(slider.roundStep(10)).to.equal(10);
expect(slider.roundStep(9)).to.equal(10);
expect(slider.roundStep(11)).to.equal(10);
expect(slider.roundStep(15)).to.equal(20);
expect(slider.roundStep(14)).to.equal(10);
expect(slider.roundStep(-10)).to.equal(-10);
expect(slider.roundStep(-9)).to.equal(-10);
expect(slider.roundStep(-11)).to.equal(-10);
expect(slider.roundStep(-16)).to.equal(-20);
expect(slider.roundStep(-15)).to.equal(-10);
expect(slider.roundStep(-14)).to.equal(-10);
});
it('should have a valid roundStep for floating values', function() {
scope.slider.options.precision = 1;
scope.slider.options.step = 0.1;
scope.$digest();
expect(slider.roundStep(10)).to.equal(10);
expect(slider.roundStep(1.1)).to.equal(1.1);
expect(slider.roundStep(1.09)).to.equal(1.1);
expect(slider.roundStep(1.11)).to.equal(1.1);
expect(slider.roundStep(1.15)).to.equal(1.2);
expect(slider.roundStep(1.14)).to.equal(1.1);
it('should handle mousedown on minH correctly', function() {
sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement');
expect(slider.roundStep(-10)).to.equal(-10);
expect(slider.roundStep(-1.1)).to.equal(-1.1);
expect(slider.roundStep(-1.09)).to.equal(-1.1);
expect(slider.roundStep(-1.11)).to.equal(-1.1);
expect(slider.roundStep(-1.16)).to.equal(-1.2);
expect(slider.roundStep(-1.15)).to.equal(-1.1);
expect(slider.roundStep(-1.14)).to.equal(-1.1);
});
var event = fireMousedown(slider.minH, 0);
it('should have a valid hideEl', function() {
var el = angular.element('<div></div>');
slider.hideEl(el);
expect(el.css('opacity')).to.equal('0');
});
slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.focusElement.calledWith(slider.minH).should.be.true;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderModel');
expect(slider.minH.hasClass('rz-active')).to.be.true;
// to clean document listener
fireMouseup();
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnChange');
var event = fireMousedown(slider.minH, 0);
//consider that slider coordinates start on 0
slider.sliderElem.rzsp = 0
var expectedValue = 50,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim;
fireMousemove(offset);
expect(scope.slider.value).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on minH correctly when mouse is before the slider and previous value was already 0', function() {
sinon.spy(slider, 'positionTrackingHandle');
var event = fireMousedown(slider.minH, 0);
//consider that slider coordinates start on 0
slider.sliderElem.rzsp = 0
fireMousemove(-100);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.false;
it('should have a valid showEl when not rzAlwaysHide', function() {
var el = angular.element('<div></div>');
slider.showEl(el);
expect(el.css('opacity')).to.equal('1');
fireMouseup();
});
it('should have a valid showEl when rzAlwaysHide', function() {
var el = angular.element('<div></div>');
el.css('opacity', 0);
el.rzAlwaysHide = true;
it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() {
scope.slider.value = 50;
scope.$digest();
slider.showEl(el);
expect(el.css('opacity')).to.equal('0');
});
sinon.spy(slider, 'positionTrackingHandle');
var event = fireMousedown(slider.minH, 0);
//consider that slider coordinates start on 0
slider.sliderElem.rzsp = 0
fireMousemove(-100);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.true;
it('should have a valid setPosition for horizontal sliders', function() {
var el = angular.element('<div></div>');
slider.setPosition(el, 12);
expect(el.css('left')).to.equal('12px');
fireMouseup();
});
it('should have a valid setPosition for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
var el = angular.element('<div></div>');
slider.setPosition(el, 12);
expect(el.css('bottom')).to.equal('12px');
});
it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function() {
sinon.spy(slider, 'positionTrackingHandle');
var event = fireMousedown(slider.minH, 0);
//consider that slider coordinates start on 0
slider.sliderElem.rzsp = 0
fireMousemove(slider.maxPos + 100);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.true;
it('should have a valid getDimension for horizontal sliders', function() {
expect(slider.getDimension(slider.sliderElem)).to.equal(1000);
fireMouseup();
});
it('should have a valid getDimension for horizontal sliders with custom scale', function() {
scope.slider.options.scale = 2;
it('should handle click and drag on minH correctly when mouse is after the slider and previous value was already 100', function() {
scope.slider.value = 100;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
});
it('should have a valid getDimension for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(1000);
});
sinon.spy(slider, 'positionTrackingHandle');
var event = fireMousedown(slider.minH, 0);
//consider that slider coordinates start on 0
slider.sliderElem.rzsp = 0
fireMousemove(slider.maxPos + 100);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.false;
it('should have a valid getDimension for vertical sliders with custom scale', function() {
scope.slider.options.scale = 2;
scope.slider.options.vertical = true;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
fireMouseup();
});
it('should have a valid setDimension for horizontal sliders', function() {
var el = angular.element('<div></div>');
slider.setDimension(el, 12);
expect(el.css('width')).to.equal('12px');
});
it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
var event = fireMousedown(slider.minH, 0);
it('should have a valid setDimension for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
var el = angular.element('<div></div>');
slider.setDimension(el, 12);
expect(el.css('height')).to.equal('12px');
});
sinon.spy(slider, 'callOnEnd');
sinon.spy(slider.scope, '$emit');
it('should have a valid valueToOffset for positive sliders', function() {
slider.maxPos = 1000;
expect(slider.valueToOffset(0)).to.equal(0);
expect(slider.valueToOffset(50)).to.equal(500);
expect(slider.valueToOffset(100)).to.equal(1000);
fireMouseup();
expect(slider.tracking).to.equal('rzSliderModel');
expect(slider.minH.hasClass('rz-active')).to.be.true;
slider.callOnEnd.called.should.be.true;
slider.scope.$emit.calledWith('slideEnded').should.be.true;
});
it('should have a valid valueToOffset for negative sliders', function() {
scope.slider.options.floor = -100;
scope.slider.options.ceil = 0;
scope.slider.value = -50;
it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
scope.slider.options.keyboardSupport = false;
scope.$digest();
var event = fireMousedown(slider.minH, 0);
slider.maxPos = 1000;
expect(slider.valueToOffset(0)).to.equal(1000);
expect(slider.valueToOffset(-50)).to.equal(500);
expect(slider.valueToOffset(-100)).to.equal(0);
});
sinon.spy(slider, 'callOnEnd');
sinon.spy(slider.scope, '$emit');
it('should have a valid sanitizeValue', function() {
expect(slider.sanitizeValue(0)).to.equal(0);
expect(slider.sanitizeValue(50)).to.equal(50);
expect(slider.sanitizeValue(100)).to.equal(100);
expect(slider.sanitizeValue(-1)).to.equal(0);
expect(slider.sanitizeValue(-10)).to.equal(0);
expect(slider.sanitizeValue(101)).to.equal(100);
expect(slider.sanitizeValue(110)).to.equal(100);
});
fireMouseup();
it('should have a valid offsetToValue for positive sliders', function() {
slider.maxPos = 1000;
expect(slider.offsetToValue(0)).to.equal(0);
expect(slider.offsetToValue(1000)).to.equal(100);
expect(slider.offsetToValue(500)).to.equal(50);
expect(slider.tracking).to.equal('');
expect(slider.minH.hasClass('rz-active')).to.be.false;
slider.callOnEnd.called.should.be.true;
slider.scope.$emit.calledWith('slideEnded').should.be.true;
});
it('should have a valid offsetToValue for for negative sliders', function() {
scope.slider.options.floor = -100;
scope.slider.options.ceil = 0;
scope.slider.value = -50;
scope.$digest();
slider.maxPos = 1000;
expect(slider.offsetToValue(0)).to.equal(-100);
expect(slider.offsetToValue(1000)).to.equal(0);
expect(slider.offsetToValue(500)).to.equal(-50);
});
it('should have a valid getEventXY for horizontal sliders on desktop browsers', function() {
function fireMousedown(element, position, vertical) {
var positionProp = vertical ? 'clientY' : 'clientX';
var event = {
clientX: 12
type: 'mousedown',
preventDefault: sinon.stub(),
stopPropagation: sinon.stub()
};
expect(slider.getEventXY(event)).to.equal(12);
});
event[positionProp] = position;
it('should have a valid getEventXY for vertical sliders on desktop browsers', function() {
scope.slider.options.vertical = true;
scope.$digest();
element.triggerHandler(event);
return event;
}
function fireMousemove(position, vertical) {
var positionProp = vertical ? 'clientY' : 'clientX';
var event = {
clientY: 12
type: 'mousemove'
};
expect(slider.getEventXY(event)).to.equal(12);
});
event[positionProp] = position;
it('should have a valid getEventXY for horizontal sliders on mobile browsers with no originalEvent', function() {
$document.triggerHandler(event);
}
function fireMouseup() {
var event = {
touches: [{
clientX: 12
}]
type: 'mouseup'
};
expect(slider.getEventXY(event)).to.equal(12);
$document.triggerHandler(event);
}
});
it('should have a valid getEventXY for horizontal sliders on mobile browsers with originalEvent', function() {
var event = {
originalEvent: {
touches: [{
clientX: 12
}]
/*
******************************************************************************
KEYBOARD CONTROLS
******************************************************************************
*/
describe('keyboard controls', function() {
describe('simple cases for single slider - ', function() {
beforeEach(function() {
var sliderConf = {
value: 100,
options: {
floor: 0,
ceil: 200
}
};
expect(slider.getEventXY(event)).to.equal(12);
createSlider(sliderConf);
});
it('should have a valid getEventXY for vertical sliders on mobile browsers with no originalEvent', function() {
scope.slider.options.vertical = true;
scope.$digest();
var event = {
touches: [{
clientY: 12
}]
it('should toggle active style when handle focused/blured', function() {
slider.minH.triggerHandler('focus');
expect(slider.minH.hasClass('rz-active')).to.be.true;
slider.minH.triggerHandler('blur');
expect(slider.minH.hasClass('rz-active')).to.be.false;
});
it('should increment by 1 when RIGHT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
});
it('should decrement by 1 when LEFT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(99);
});
it('should increment by 1 when UP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'UP');
expect(scope.slider.value).to.equal(101);
});
it('should decrement by 1 when DOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'DOWN');
expect(scope.slider.value).to.equal(99);
});
it('should increment by 10% when PAGEUP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.value).to.equal(120);
});
it('should decrement by 10% when PAGEDOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.value).to.equal(80);
});
it('should set value to min when HOME is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.value).to.equal(0);
});
it('should set value to max when END is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'END');
expect(scope.slider.value).to.equal(200);
});
it('should do nothing when SPACE is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'SPACE');
expect(scope.slider.value).to.equal(100);
});
it('should not modify when keypress but not focused', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
slider.minH.triggerHandler('blur');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
});
});
describe('simple cases for range slider - ', function() {
beforeEach(function() {
var sliderConf = {
min: 50,
max: 100,
options: {
floor: 0,
ceil: 200
}
};
expect(slider.getEventXY(event)).to.equal(12);
createRangeSlider(sliderConf);
});
it('should have a valid getEventXY for vertical sliders on mobile browsers with originalEvent', function() {
scope.slider.options.vertical = true;
scope.$digest();
var event = {
originalEvent: {
touches: [{
clientY: 12
}]
it('should toggle active style when handle focused/blured', function() {
slider.minH.triggerHandler('focus');
expect(slider.minH.hasClass('rz-active')).to.be.true;
expect(slider.maxH.hasClass('rz-active')).to.be.false;
slider.minH.triggerHandler('blur');
slider.maxH.triggerHandler('focus');
expect(slider.minH.hasClass('rz-active')).to.be.false;
expect(slider.maxH.hasClass('rz-active')).to.be.true;
slider.maxH.triggerHandler('blur');
expect(slider.minH.hasClass('rz-active')).to.be.false;
expect(slider.maxH.hasClass('rz-active')).to.be.false;
});
it('should increment minH by 1 when RIGHT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(51);
});
it('should increment maxH by 1 when RIGHT is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(101);
});
it('should decrement minH by 1 when LEFT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.min).to.equal(49);
});
it('should decrement maxH by 1 when LEFT is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'LEFT');
expect(scope.slider.max).to.equal(99);
});
it('should increment minH by 10% when PAGEUP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.min).to.equal(70);
});
it('should increment maxH by 10% when PAGEUP is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEUP');
expect(scope.slider.max).to.equal(120);
});
it('should decrement minH by 10% when PAGEDOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.min).to.equal(30);
});
it('should decrement maxH by 10% when PAGEDOWN is pressed', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEDOWN');
expect(scope.slider.max).to.equal(80);
});
it('should set minH to min when HOME is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.min).to.equal(0);
});
it('should set minH value to previous min and switch min/max when HOME is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'HOME');
expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(50);
});
it('should set minH value to previous max and switch min/max when END is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'END');
expect(scope.slider.min).to.equal(100);
expect(scope.slider.max).to.equal(200);
});
it('should set maxH value to max when END is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'END');
expect(scope.slider.max).to.equal(200);
});
it('should do nothing when SPACE is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'SPACE');
expect(scope.slider.min).to.equal(50);
});
it('should do nothing when SPACE is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'SPACE');
expect(scope.slider.max).to.equal(100);
});
it('should not modify minH when keypress but not focused', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(51);
slider.minH.triggerHandler('blur');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(51);
});
it('should not modify maxH when keypress but not focused', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(101);
slider.maxH.triggerHandler('blur');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(101);
});
});
describe('range slider with draggableRangeOnly=true - ', function() {
beforeEach(function() {
var sliderConf = {
min: 90,
max: 110,
options: {
floor: 0,
ceil: 200,
draggableRangeOnly: true
}
};
expect(slider.getEventXY(event)).to.equal(12);
createRangeSlider(sliderConf);
});
it('should have a valid getEventPosition for horizontal sliders', function() {
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should increment minH/maxH by 1 when RIGHT is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(91);
expect(scope.slider.max).to.equal(111);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should increment minH/maxH by 1 when RIGHT is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.min).to.equal(91);
expect(scope.slider.max).to.equal(111);
});
expect(slider.getEventPosition(event)).to.equal(20);
it('should increment minH/maxH by 1 when LEFT is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.min).to.equal(89);
expect(scope.slider.max).to.equal(109);
});
it('should have a valid getEventPosition for vertical sliders', function() {
scope.slider.options.vertical = true;
scope.$digest();
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'LEFT');
expect(scope.slider.min).to.equal(89);
expect(scope.slider.max).to.equal(109);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.min).to.equal(110);
expect(scope.slider.max).to.equal(130);
});
expect(slider.getEventPosition(event)).to.equal(-52);
it('should increment minH/maxH by 10% when PAGEUP is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEUP');
expect(scope.slider.min).to.equal(110);
expect(scope.slider.max).to.equal(130);
});
it('should have a valid getEventPosition for horizontal sliders with scale option', function() {
scope.slider.options.scale = 0.5;
scope.$digest();
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.min).to.equal(70);
expect(scope.slider.max).to.equal(90);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'PAGEDOWN');
expect(scope.slider.min).to.equal(70);
expect(scope.slider.max).to.equal(90);
});
expect(slider.getEventPosition(event)).to.equal(10);
it('should set minH to min when HOME is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(20);
});
it('should have a valid getEventPosition for vertical sliders with scale option', function() {
scope.slider.options.scale = 0.5;
scope.slider.options.vertical = true;
scope.$digest();
sinon.stub(slider, 'getEventXY').returns(46);
var event = {};
it('should set minH to min when HOME is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'HOME');
expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(20);
});
//fake slider's dimension
slider.sliderElem.rzsp = 10;
slider.handleHalfDim = 16;
it('should set minH to min when END is pressed on minH', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'END');
expect(scope.slider.min).to.equal(180);
expect(scope.slider.max).to.equal(200);
});
expect(slider.getEventPosition(event)).to.equal(-26);
it('should set minH to min when END is pressed on maxH', function() {
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'END');
expect(scope.slider.min).to.equal(180);
expect(scope.slider.max).to.equal(200);
});
});
it('should have a valid getNearestHandle for single sliders', function() {
sinon.stub(slider, 'getEventPosition').returns(46);
var event = {};
expect(slider.getNearestHandle(event)).to.equal(slider.minH);
describe('simple cases for vertical slider - ', function() {
beforeEach(function() {
var sliderConf = {
value: 100,
options: {
floor: 0,
ceil: 200,
vertical: true
}
};
createSlider(sliderConf);
});
it('should have a valid focusElement', function() {
var el = [{
focus: sinon.spy()
}];
slider.focusElement(el);
el[0].focus.called.should.be.true;
it('should increment by 1 when RIGHT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.value).to.equal(101);
});
it('should increment by 1 when UP is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'UP');
expect(scope.slider.value).to.equal(101);
});
it('should have a valid getNearestHandle for range sliders when click is near minH', function() {
it('should decrement by 1 when DOWN is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'DOWN');
expect(scope.slider.value).to.equal(99);
});
it('should decrement by 1 when LEFT is pressed', function() {
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(99);
});
});
it('should not go below floor', function() {
var sliderConf = {
min: 20,
max: 80,
value: 10,
options: {
floor: 0,
ceil: 100,
ceil: 1000,
step: 10
}
};
createRangeSlider(sliderConf);
sinon.stub(slider, 'getEventPosition').returns(46);
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.value).to.equal(0);
});
//fake slider's dimension
slider.minH.rzsp = 0;
slider.maxH.rzsp = 100;
it('should not go above ceil', function() {
var sliderConf = {
value: 990,
options: {
floor: 0,
ceil: 1000,
step: 10
}
};
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP');
expect(scope.slider.value).to.equal(1000);
});
var event = {};
expect(slider.getNearestHandle(event)).to.equal(slider.minH);
it('should not be modified by keyboard if disabled=true', function() {
var sliderConf = {
value: 10,
options: {
floor: 0,
ceil: 100,
disabled: true
}
};
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
});
it('should have a valid getNearestHandle for range sliders when click is near maxH', function() {
it('should not be modified by keyboard if readOnly=true', function() {
var sliderConf = {
min: 20,
max: 80,
value: 10,
options: {
floor: 0,
ceil: 100,
step: 10
readOnly: true
}
};
createRangeSlider(sliderConf);
sinon.stub(slider, 'getEventPosition').returns(66);
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
});
//fake slider's dimension
slider.minH.rzsp = 0;
slider.maxH.rzsp = 100;
it('should not be modified by keyboard if keyboardSupport=false', function() {
var sliderConf = {
value: 10,
options: {
floor: 0,
ceil: 100,
keyboardSupport: false
}
};
createSlider(sliderConf);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
});
var event = {};
expect(slider.getNearestHandle(event)).to.equal(slider.maxH);
function pressKeydown(element, key, oldAPI) {
key = key.toUpperCase();
var event = {
type: 'keydown'
};
var keys = {
'UP': 38,
'DOWN': 40,
'LEFT': 37,
'RIGHT': 39,
'PAGEUP': 33,
'PAGEDOWN': 34,
'HOME': 36,
'END': 35,
'SPACE': 32
};
var keyCode = keys[key];
if (oldAPI)
eent.which = keyCode;
else event.keyCode = keyCode;
element.triggerHandler(event);
}
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment