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