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 @@ ...@@ -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,799 +906,1160 @@ describe('rzslider - ', function() { ...@@ -901,799 +906,1160 @@ describe('rzslider - ', function() {
/* /*
****************************************************************************** ******************************************************************************
KEYBOARD CONTROLS HELPER FUNCTIONS
****************************************************************************** ******************************************************************************
*/ */
describe('keyboard controls', function() { describe('helper functions - ', function() {
describe('simple cases for single slider - ', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
value: 100, value: 50,
options: { options: {
floor: 0, floor: 0,
ceil: 200 ceil: 100,
step: 10
} }
}; };
createSlider(sliderConf); createSlider(sliderConf);
}); });
it('should toggle active style when handle focused/blured', function() { it('should have a valid roundStep for integer values', function() {
slider.minH.triggerHandler('focus'); expect(slider.roundStep(10)).to.equal(10);
expect(slider.minH.hasClass('rz-active')).to.be.true; expect(slider.roundStep(9)).to.equal(10);
slider.minH.triggerHandler('blur'); expect(slider.roundStep(11)).to.equal(10);
expect(slider.minH.hasClass('rz-active')).to.be.false; 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() { it('should have a valid roundStep for floating values', function() {
slider.minH.triggerHandler('focus'); scope.slider.options.precision = 1;
pressKeydown(slider.minH, 'RIGHT'); scope.slider.options.step = 0.1;
expect(scope.slider.value).to.equal(101); scope.$digest();
});
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.15)).to.equal(1.2);
expect(slider.roundStep(1.14)).to.equal(1.1);
it('should increment by 1 when UP 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, 'UP'); 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.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() { it('should have a valid hideEl', function() {
slider.minH.triggerHandler('focus'); var el = angular.element('<div></div>');
pressKeydown(slider.minH, 'DOWN'); slider.hideEl(el);
expect(scope.slider.value).to.equal(99); expect(el.css('opacity')).to.equal('0');
}); });
it('should increment by 10% when PAGEUP 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, 'PAGEUP'); slider.showEl(el);
expect(scope.slider.value).to.equal(120); expect(el.css('opacity')).to.equal('1');
}); });
it('should decrement by 10% when PAGEDOWN 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, 'PAGEDOWN'); el.css('opacity', 0);
expect(scope.slider.value).to.equal(80); el.rzAlwaysHide = true;
});
it('should set value to min when HOME is pressed', function() { slider.showEl(el);
slider.minH.triggerHandler('focus'); expect(el.css('opacity')).to.equal('0');
pressKeydown(slider.minH, 'HOME');
expect(scope.slider.value).to.equal(0);
}); });
it('should set value to max when END 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, 'END'); slider.setPosition(el, 12);
expect(scope.slider.value).to.equal(200); expect(el.css('left')).to.equal('12px');
}); });
it('should do nothing when SPACE 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, 'SPACE'); scope.$digest();
expect(scope.slider.value).to.equal(100); 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() { 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, '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() { it('should have a valid getDimension for horizontal sliders with custom scale', function() {
beforeEach(function() { scope.slider.options.scale = 2;
var sliderConf = { scope.$digest();
min: 50, expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
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', function() {
slider.minH.triggerHandler('focus'); scope.slider.options.vertical = true;
expect(slider.minH.hasClass('rz-active')).to.be.true; scope.$digest();
expect(slider.maxH.hasClass('rz-active')).to.be.false; expect(slider.getDimension(slider.sliderElem)).to.equal(1000);
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() { it('should have a valid getDimension for vertical sliders with custom scale', function() {
slider.minH.triggerHandler('focus'); scope.slider.options.scale = 2;
pressKeydown(slider.minH, 'RIGHT'); scope.slider.options.vertical = true;
expect(scope.slider.min).to.equal(51); scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
}); });
it('should increment maxH by 1 when RIGHT is pressed', function() { it('should have a valid setDimension for horizontal sliders', function() {
slider.maxH.triggerHandler('focus'); var el = angular.element('<div></div>');
pressKeydown(slider.maxH, 'RIGHT'); slider.setDimension(el, 12);
expect(scope.slider.max).to.equal(101); expect(el.css('width')).to.equal('12px');
}); });
it('should decrement minH by 1 when LEFT is pressed', function() { it('should have a valid setDimension 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(49); 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() { it('should have a valid valueToOffset for positive sliders', function() {
slider.maxH.triggerHandler('focus'); slider.maxPos = 1000;
pressKeydown(slider.maxH, 'LEFT'); expect(slider.valueToOffset(0)).to.equal(0);
expect(scope.slider.max).to.equal(99); 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() { it('should have a valid valueToOffset for negative sliders', function() {
slider.minH.triggerHandler('focus'); scope.slider.options.floor = -100;
pressKeydown(slider.minH, 'PAGEUP'); scope.slider.options.ceil = 0;
expect(scope.slider.min).to.equal(70); scope.slider.value = -50;
}); scope.$digest();
it('should increment maxH by 10% when PAGEUP is pressed', function() { slider.maxPos = 1000;
slider.maxH.triggerHandler('focus'); expect(slider.valueToOffset(0)).to.equal(1000);
pressKeydown(slider.maxH, 'PAGEUP'); expect(slider.valueToOffset(-50)).to.equal(500);
expect(scope.slider.max).to.equal(120); expect(slider.valueToOffset(-100)).to.equal(0);
}); });
it('should decrement minH by 10% when PAGEDOWN is pressed', function() { it('should have a valid sanitizeValue', function() {
slider.minH.triggerHandler('focus'); expect(slider.sanitizeValue(0)).to.equal(0);
pressKeydown(slider.minH, 'PAGEDOWN'); expect(slider.sanitizeValue(50)).to.equal(50);
expect(scope.slider.min).to.equal(30); 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() { it('should have a valid offsetToValue for positive sliders', function() {
slider.maxH.triggerHandler('focus'); slider.maxPos = 1000;
pressKeydown(slider.maxH, 'PAGEDOWN'); expect(slider.offsetToValue(0)).to.equal(0);
expect(scope.slider.max).to.equal(80); 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() { 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
};
it('should do nothing when SPACE is pressed on minH', function() { expect(slider.getEventXY(event)).to.equal(12);
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() { it('should have a valid getEventXY for horizontal sliders on mobile browsers with no originalEvent', function() {
slider.maxH.triggerHandler('focus'); var event = {
pressKeydown(slider.maxH, 'SPACE'); touches: [{
expect(scope.slider.max).to.equal(100); 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 horizontal sliders on mobile browsers with originalEvent', function() {
slider.minH.triggerHandler('focus'); var event = {
pressKeydown(slider.minH, 'RIGHT'); originalEvent: {
expect(scope.slider.min).to.equal(51); touches: [{
slider.minH.triggerHandler('blur'); clientX: 12
pressKeydown(slider.minH, 'RIGHT'); }]
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 no 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'); touches: [{
pressKeydown(slider.maxH, 'RIGHT'); clientY: 12
expect(scope.slider.max).to.equal(101); }]
}); };
expect(slider.getEventXY(event)).to.equal(12);
}); });
describe('range slider with draggableRangeOnly=true - ', function() { it('should have a valid getEventXY for vertical sliders on mobile browsers with originalEvent', function() {
beforeEach(function() { scope.slider.options.vertical = true;
var sliderConf = { scope.$digest();
min: 90, var event = {
max: 110, originalEvent: {
options: { touches: [{
floor: 0, clientY: 12
ceil: 200, }]
draggableRangeOnly: true
} }
}; };
createRangeSlider(sliderConf); expect(slider.getEventXY(event)).to.equal(12);
}); });
it('should increment minH/maxH by 1 when RIGHT is pressed on minH', function() { it('should have a valid getEventPosition for horizontal sliders', function() {
slider.minH.triggerHandler('focus'); sinon.stub(slider, 'getEventXY').returns(46);
pressKeydown(slider.minH, 'RIGHT'); var event = {};
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() { //fake slider's dimension
slider.maxH.triggerHandler('focus'); slider.sliderElem.rzsp = 10;
pressKeydown(slider.maxH, '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 LEFT is pressed on minH', function() { expect(slider.getEventPosition(event)).to.equal(20);
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.min).to.equal(89);
expect(scope.slider.max).to.equal(109);
}); });
it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() { it('should have a valid getEventPosition for vertical sliders', function() {
slider.maxH.triggerHandler('focus'); scope.slider.options.vertical = true;
pressKeydown(slider.maxH, '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 10% when PAGEUP is pressed on minH', function() { //fake slider's dimension
slider.minH.triggerHandler('focus'); slider.sliderElem.rzsp = 10;
pressKeydown(slider.minH, 'PAGEUP'); slider.handleHalfDim = 16;
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() { expect(slider.getEventPosition(event)).to.equal(-52);
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() { it('should have a valid getEventPosition for horizontal sliders with scale option', function() {
slider.minH.triggerHandler('focus'); scope.slider.options.scale = 0.5;
pressKeydown(slider.minH, 'PAGEDOWN'); scope.$digest();
expect(scope.slider.min).to.equal(70); sinon.stub(slider, 'getEventXY').returns(46);
expect(scope.slider.max).to.equal(90); var event = {};
});
it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() { //fake slider's dimension
slider.maxH.triggerHandler('focus'); slider.sliderElem.rzsp = 10;
pressKeydown(slider.maxH, 'PAGEDOWN'); slider.handleHalfDim = 16;
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() { expect(slider.getEventPosition(event)).to.equal(10);
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() { it('should have a valid getEventPosition for vertical sliders with scale option', function() {
slider.maxH.triggerHandler('focus'); scope.slider.options.scale = 0.5;
pressKeydown(slider.maxH, '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 = {};
//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() { it('should have a valid getNearestHandle for single sliders', function() {
slider.minH.triggerHandler('focus'); sinon.stub(slider, 'getEventPosition').returns(46);
pressKeydown(slider.minH, '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);
}); });
it('should set minH to min when END is pressed on maxH', function() { it('should have a valid focusElement', function() {
slider.maxH.triggerHandler('focus'); var el = [{
pressKeydown(slider.maxH, 'END'); focus: sinon.spy()
expect(scope.slider.min).to.equal(180); }];
expect(scope.slider.max).to.equal(200); slider.focusElement(el);
el[0].focus.called.should.be.true;
}); });
}); });
describe('simple cases for vertical slider - ', function() { it('should have a valid getNearestHandle for range sliders when click is near minH', function() {
beforeEach(function() {
var sliderConf = { var sliderConf = {
value: 100, min: 20,
max: 80,
options: { options: {
floor: 0, floor: 0,
ceil: 200, ceil: 100,
vertical: true step: 10
} }
}; };
createSlider(sliderConf); createRangeSlider(sliderConf);
}); sinon.stub(slider, 'getEventPosition').returns(46);
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 decrement by 1 when DOWN is pressed', function() { //fake slider's dimension
slider.minH.triggerHandler('focus'); slider.minH.rzsp = 0;
pressKeydown(slider.minH, 'DOWN'); slider.maxH.rzsp = 100;
expect(scope.slider.value).to.equal(99);
});
it('should decrement by 1 when LEFT is pressed', function() { var event = {};
slider.minH.triggerHandler('focus'); expect(slider.getNearestHandle(event)).to.equal(slider.minH);
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(99);
});
}); });
it('should not go below floor', function() { it('should have a valid getNearestHandle for range sliders when click is near maxH', function() {
var sliderConf = { var sliderConf = {
value: 10, min: 20,
max: 80,
options: { options: {
floor: 0, floor: 0,
ceil: 1000, ceil: 100,
step: 10 step: 10
} }
}; };
createSlider(sliderConf); createRangeSlider(sliderConf);
slider.minH.triggerHandler('focus'); sinon.stub(slider, 'getEventPosition').returns(66);
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.value).to.equal(0); //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 = { var sliderConf = {
value: 990, value: 50,
options: { options: {
floor: 0, floor: 0,
ceil: 1000, ceil: 100,
step: 10 step: 10
} }
}; };
createSlider(sliderConf); 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'); slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEUP'); expect(slider.onPointerFocus.callCount).to.equal(1);
expect(scope.slider.value).to.equal(1000); 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 = { var sliderConf = {
value: 10, value: 50,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 100,
disabled: true step: 10
} }
}; };
createSlider(sliderConf); createSlider(sliderConf);
slider.minH.triggerHandler('focus'); slider.onStart = sinon.spy();
pressKeydown(slider.minH, 'LEFT'); slider.onMove = sinon.spy();
expect(scope.slider.value).to.equal(10); 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 = { var sliderConf = {
value: 10, min: 20,
max: 80,
options: { options: {
floor: 0, floor: 0,
ceil: 100, 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'); slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT'); expect(slider.onPointerFocus.callCount).to.equal(1);
expect(scope.slider.value).to.equal(10); 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 = { var sliderConf = {
value: 10, min: 20,
max: 80,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 100,
keyboardSupport: false step: 10
} }
}; };
createSlider(sliderConf); createRangeSlider(sliderConf);
slider.minH.triggerHandler('focus'); slider.onStart = sinon.spy();
pressKeydown(slider.minH, 'LEFT'); slider.onMove = sinon.spy();
expect(scope.slider.value).to.equal(10); 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) { it('should have a unbindEvents that unbind all events', function() {
key = key.toUpperCase(); var sliderConf = {
var event = { min: 20,
type: 'keydown' max: 80,
}; options: {
var keys = { floor: 0,
'UP': 38, ceil: 100,
'DOWN': 40, step: 10
'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);
} }
};
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() { beforeEach(function() {
var sliderConf = { var sliderConf = {
value: 50, value: 0,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 100
step: 10
} }
}; };
createSlider(sliderConf); createSlider(sliderConf);
}); });
it('should have a valid roundStep for integer values', function() { it('should handle mousedown on minH correctly', function() {
expect(slider.roundStep(10)).to.equal(10); sinon.spy(slider, 'calcViewDimensions');
expect(slider.roundStep(9)).to.equal(10); sinon.spy(slider, 'callOnStart');
expect(slider.roundStep(11)).to.equal(10); sinon.spy(slider, 'focusElement');
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);
expect(slider.roundStep(-10)).to.equal(-10); var event = fireMousedown(slider.minH, 0);
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 have a valid hideEl', function() { slider.calcViewDimensions.called.should.be.true;
var el = angular.element('<div></div>'); slider.callOnStart.called.should.be.true;
slider.hideEl(el); slider.focusElement.calledWith(slider.minH).should.be.true;
expect(el.css('opacity')).to.equal('0'); 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() { fireMouseup();
var el = angular.element('<div></div>');
slider.showEl(el);
expect(el.css('opacity')).to.equal('1');
}); });
it('should have a valid showEl when rzAlwaysHide', function() { it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() {
var el = angular.element('<div></div>'); scope.slider.value = 50;
el.css('opacity', 0); scope.$digest();
el.rzAlwaysHide = true;
slider.showEl(el); sinon.spy(slider, 'positionTrackingHandle');
expect(el.css('opacity')).to.equal('0'); 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() { fireMouseup();
var el = angular.element('<div></div>');
slider.setPosition(el, 12);
expect(el.css('left')).to.equal('12px');
}); });
it('should have a valid setPosition for vertical sliders', function() { it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function() {
scope.slider.options.vertical = true; sinon.spy(slider, 'positionTrackingHandle');
scope.$digest(); var event = fireMousedown(slider.minH, 0);
var el = angular.element('<div></div>'); //consider that slider coordinates start on 0
slider.setPosition(el, 12); slider.sliderElem.rzsp = 0
expect(el.css('bottom')).to.equal('12px'); 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() { fireMouseup();
expect(slider.getDimension(slider.sliderElem)).to.equal(1000);
}); });
it('should have a valid getDimension for horizontal sliders with custom scale', function() { it('should handle click and drag on minH correctly when mouse is after the slider and previous value was already 100', function() {
scope.slider.options.scale = 2; scope.slider.value = 100;
scope.$digest(); scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
});
it('should have a valid getDimension for vertical sliders', function() { sinon.spy(slider, 'positionTrackingHandle');
scope.slider.options.vertical = true; var event = fireMousedown(slider.minH, 0);
scope.$digest(); //consider that slider coordinates start on 0
expect(slider.getDimension(slider.sliderElem)).to.equal(1000); 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() { fireMouseup();
scope.slider.options.scale = 2;
scope.slider.options.vertical = true;
scope.$digest();
expect(slider.getDimension(slider.sliderElem)).to.equal(2000);
}); });
it('should have a valid setDimension for horizontal sliders', function() { it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
var el = angular.element('<div></div>'); var event = fireMousedown(slider.minH, 0);
slider.setDimension(el, 12);
expect(el.css('width')).to.equal('12px');
});
it('should have a valid setDimension for vertical sliders', function() { sinon.spy(slider, 'callOnEnd');
scope.slider.options.vertical = true; sinon.spy(slider.scope, '$emit');
scope.$digest();
var el = angular.element('<div></div>');
slider.setDimension(el, 12);
expect(el.css('height')).to.equal('12px');
});
it('should have a valid valueToOffset for positive sliders', function() { fireMouseup();
slider.maxPos = 1000;
expect(slider.valueToOffset(0)).to.equal(0); expect(slider.tracking).to.equal('rzSliderModel');
expect(slider.valueToOffset(50)).to.equal(500); expect(slider.minH.hasClass('rz-active')).to.be.true;
expect(slider.valueToOffset(100)).to.equal(1000); slider.callOnEnd.called.should.be.true;
slider.scope.$emit.calledWith('slideEnded').should.be.true;
}); });
it('should have a valid valueToOffset for negative sliders', function() { it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
scope.slider.options.floor = -100; scope.slider.options.keyboardSupport = false;
scope.slider.options.ceil = 0;
scope.slider.value = -50;
scope.$digest(); scope.$digest();
var event = fireMousedown(slider.minH, 0);
slider.maxPos = 1000; sinon.spy(slider, 'callOnEnd');
expect(slider.valueToOffset(0)).to.equal(1000); sinon.spy(slider.scope, '$emit');
expect(slider.valueToOffset(-50)).to.equal(500);
expect(slider.valueToOffset(-100)).to.equal(0);
});
it('should have a valid sanitizeValue', function() { fireMouseup();
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 have a valid offsetToValue for positive sliders', function() { expect(slider.tracking).to.equal('');
slider.maxPos = 1000; expect(slider.minH.hasClass('rz-active')).to.be.false;
expect(slider.offsetToValue(0)).to.equal(0); slider.callOnEnd.called.should.be.true;
expect(slider.offsetToValue(1000)).to.equal(100); slider.scope.$emit.calledWith('slideEnded').should.be.true;
expect(slider.offsetToValue(500)).to.equal(50);
}); });
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 = { 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() { element.triggerHandler(event);
scope.slider.options.vertical = true; return event;
scope.$digest(); }
function fireMousemove(position, vertical) {
var positionProp = vertical ? 'clientY' : 'clientX';
var event = { 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 = { var event = {
touches: [{ type: 'mouseup'
clientX: 12
}]
}; };
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: { KEYBOARD CONTROLS
touches: [{ ******************************************************************************
clientX: 12 */
}] 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() { it('should toggle active style when handle focused/blured', function() {
scope.slider.options.vertical = true; slider.minH.triggerHandler('focus');
scope.$digest(); expect(slider.minH.hasClass('rz-active')).to.be.true;
var event = { slider.minH.triggerHandler('blur');
touches: [{ expect(slider.minH.hasClass('rz-active')).to.be.false;
clientY: 12 });
}]
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() { it('should toggle active style when handle focused/blured', function() {
scope.slider.options.vertical = true; slider.minH.triggerHandler('focus');
scope.$digest(); expect(slider.minH.hasClass('rz-active')).to.be.true;
var event = { expect(slider.maxH.hasClass('rz-active')).to.be.false;
originalEvent: { slider.minH.triggerHandler('blur');
touches: [{ slider.maxH.triggerHandler('focus');
clientY: 12 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() { it('should increment minH/maxH by 1 when RIGHT is pressed on minH', function() {
sinon.stub(slider, 'getEventXY').returns(46); slider.minH.triggerHandler('focus');
var event = {}; pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(91);
expect(scope.slider.max).to.equal(111);
});
//fake slider's dimension it('should increment minH/maxH by 1 when RIGHT is pressed on maxH', function() {
slider.sliderElem.rzsp = 10; slider.maxH.triggerHandler('focus');
slider.handleHalfDim = 16; 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() { it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() {
scope.slider.options.vertical = true; slider.maxH.triggerHandler('focus');
scope.$digest(); pressKeydown(slider.maxH, 'LEFT');
sinon.stub(slider, 'getEventXY').returns(46); expect(scope.slider.min).to.equal(89);
var event = {}; expect(scope.slider.max).to.equal(109);
});
//fake slider's dimension it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() {
slider.sliderElem.rzsp = 10; slider.minH.triggerHandler('focus');
slider.handleHalfDim = 16; 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() { it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() {
scope.slider.options.scale = 0.5; slider.minH.triggerHandler('focus');
scope.$digest(); pressKeydown(slider.minH, 'PAGEDOWN');
sinon.stub(slider, 'getEventXY').returns(46); expect(scope.slider.min).to.equal(70);
var event = {}; expect(scope.slider.max).to.equal(90);
});
//fake slider's dimension it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() {
slider.sliderElem.rzsp = 10; slider.maxH.triggerHandler('focus');
slider.handleHalfDim = 16; 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() { it('should set minH to min when HOME is pressed on maxH', function() {
scope.slider.options.scale = 0.5; slider.maxH.triggerHandler('focus');
scope.slider.options.vertical = true; pressKeydown(slider.maxH, 'HOME');
scope.$digest(); expect(scope.slider.min).to.equal(0);
sinon.stub(slider, 'getEventXY').returns(46); expect(scope.slider.max).to.equal(20);
var event = {}; });
//fake slider's dimension it('should set minH to min when END is pressed on minH', function() {
slider.sliderElem.rzsp = 10; slider.minH.triggerHandler('focus');
slider.handleHalfDim = 16; 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() { describe('simple cases for vertical slider - ', function() {
sinon.stub(slider, 'getEventPosition').returns(46); beforeEach(function() {
var event = {}; var sliderConf = {
expect(slider.getNearestHandle(event)).to.equal(slider.minH); value: 100,
options: {
floor: 0,
ceil: 200,
vertical: true
}
};
createSlider(sliderConf);
}); });
it('should have a valid focusElement', function() { it('should increment by 1 when RIGHT is pressed', function() {
var el = [{ slider.minH.triggerHandler('focus');
focus: sinon.spy() pressKeydown(slider.minH, 'RIGHT');
}]; expect(scope.slider.value).to.equal(101);
slider.focusElement(el);
el[0].focus.called.should.be.true;
}); });
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 = { var sliderConf = {
min: 20, value: 10,
max: 80,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 1000,
step: 10 step: 10
} }
}; };
createRangeSlider(sliderConf); createSlider(sliderConf);
sinon.stub(slider, 'getEventPosition').returns(46); slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'PAGEDOWN');
expect(scope.slider.value).to.equal(0);
});
//fake slider's dimension it('should not go above ceil', function() {
slider.minH.rzsp = 0; var sliderConf = {
slider.maxH.rzsp = 100; 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 = {}; it('should not be modified by keyboard if disabled=true', function() {
expect(slider.getNearestHandle(event)).to.equal(slider.minH); 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 = { var sliderConf = {
min: 20, value: 10,
max: 80,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 100,
step: 10 readOnly: true
} }
}; };
createRangeSlider(sliderConf); createSlider(sliderConf);
sinon.stub(slider, 'getEventPosition').returns(66); slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10);
});
//fake slider's dimension it('should not be modified by keyboard if keyboardSupport=false', function() {
slider.minH.rzsp = 0; var sliderConf = {
slider.maxH.rzsp = 100; 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 = {}; 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