Skip to content

I
i20rzslider
Commit 256cdc76 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

test(mouse events): handle all events for single/range sliders without draggableRange

parent 2642b8c2
Show whitespace changes
Inline Side-by-side
Showing with 750 additions and 72 deletions
src/rzslider.js
View file @ 256cdc76
...@@ -1280,6 +1280,7 @@ ...@@ -1280,6 +1280,7 @@
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 @ 256cdc76
...@@ -1444,26 +1444,622 @@ describe('rzslider - ', function() { ...@@ -1444,26 +1444,622 @@ describe('rzslider - ', function() {
MOUSE CONTROLS MOUSE CONTROLS
****************************************************************************** ******************************************************************************
*/ */
describe('mouse controls', function() { describe('mouse controls - ', function() {
describe('simple cases for single slider - ', function() { describe('single horizontal slider - ', function() {
beforeEach(function() {
var sliderConf = {
value: 0,
options: {
floor: 0,
ceil: 100
}
};
createSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
it('should handle mousedown on minH correctly when keyboardSupport is true', 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;
});
it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false;
scope.$digest();
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.called.should.be.false;
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;
});
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);
var expectedValue = 50,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
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);
fireMousemove(-100);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.false;
});
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);
fireMousemove(-100);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.true;
});
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);
fireMousemove(slider.maxPos + 100);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.true;
});
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);
fireMousemove(slider.maxPos + 100);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.false;
});
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 not keep handle focused when keyboardSupport is false', 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;
});
it('should handle click on fullbar and move minH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
var expectedValue = 12,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var event = fireMousedown(slider.fullBar, offset);
expect(scope.slider.value).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move minH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
var expectedValue = 12,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var event = fireMousedown(slider.selBar, offset);
expect(scope.slider.value).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks and move minH', function() {
scope.slider.options.step = 10;
scope.slider.options.showTicks = true;
scope.$digest();
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
var expectedValue = 10,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousedown(slider.ticks, offset);
expect(scope.slider.value).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
});
describe('range horizontal slider - ', function() {
beforeEach(function() {
var sliderConf = {
min: 0,
max: 100,
options: {
floor: 0,
ceil: 100
}
};
createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
it('should handle mousedown on minH correctly when keyboardSupport is true', 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;
});
it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false;
scope.$digest();
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.called.should.be.false;
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;
});
it('should handle mousedown on maxH correctly when keyboardSupport is true', function() {
sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement');
var event = fireMousedown(slider.maxH, 0);
slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.focusElement.calledWith(slider.maxH).should.be.true;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderHigh');
expect(slider.maxH.hasClass('rz-active')).to.be.true;
});
it('should handle mousedown on maxH correctly when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false;
scope.$digest();
sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement');
var event = fireMousedown(slider.maxH, 0);
slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.focusElement.called.should.be.false;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderHigh');
expect(slider.maxH.hasClass('rz-active')).to.be.true;
});
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);
var expectedValue = 50,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.min).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnChange');
var event = fireMousedown(slider.maxH, 0);
var expectedValue = 50,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.max).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click and drag on minH and switch min/max if needed', function() {
scope.slider.min = 40;
scope.slider.max = 60;
scope.$digest();
var event = fireMousedown(slider.minH, 0);
var expectedValue = 80,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.min).to.equal(60);
expect(scope.slider.max).to.equal(80);
});
it('should handle click and drag on maxH and switch min/max if needed', function() {
scope.slider.min = 40;
scope.slider.max = 60;
scope.$digest();
var event = fireMousedown(slider.maxH, 0);
var expectedValue = 20,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.min).to.equal(20);
expect(scope.slider.max).to.equal(40);
});
it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 10,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var event = fireMousedown(slider.fullBar, offset);
expect(scope.slider.min).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true;
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 90,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var event = fireMousedown(slider.fullBar, offset);
expect(scope.slider.max).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderHigh');
slider.focusElement.calledWith(slider.maxH).should.be.true;
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move minH when click pos is nearer to minH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 10,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var event = fireMousedown(slider.selBar, offset);
expect(scope.slider.min).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true;
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move maxH when click pos is nearer to maxH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 90,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var event = fireMousedown(slider.selBar, offset);
expect(scope.slider.max).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderHigh');
slider.focusElement.calledWith(slider.maxH).should.be.true;
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
});
describe('single vertical slider - ', function() {
beforeEach(function() {
var sliderConf = {
value: 0,
options: {
floor: 0,
ceil: 100,
vertical: true
}
};
createSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement');
var event = fireMousedown(slider.minH, 0, true);
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;
});
it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false;
scope.$digest();
sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement');
var event = fireMousedown(slider.minH, 0, true);
slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.focusElement.called.should.be.false;
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;
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnChange');
fireMousedown(slider.minH, 0, true);
var expectedValue = 50,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
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');
fireMousedown(slider.minH, 0, true);
fireMousemove(slider.maxPos + 100, true);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.false;
});
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, true);
fireMousemove(slider.maxPos + 100, true);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.true;
});
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, true);
fireMousemove(-100, true);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.true;
});
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, true);
fireMousemove(-100, true);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.false;
});
it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
var event = fireMousedown(slider.minH, 0, true);
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 not keep handle focused when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false;
scope.$digest();
var event = fireMousedown(slider.minH, 0, true);
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;
});
it('should handle click on fullbar and move minH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
var expectedValue = 50,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
var event = fireMousedown(slider.fullBar, offset, true);
expect(scope.slider.value).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move minH', function() {
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
var expectedValue = 12,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
var event = fireMousedown(slider.selBar, offset, true);
expect(scope.slider.value).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks and move minH', function() {
scope.slider.options.step = 10;
scope.slider.options.showTicks = true;
scope.$digest();
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
var expectedValue = 10,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousedown(slider.ticks, offset, true);
expect(scope.slider.value).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel');
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
});
});
describe('range vertical slider - ', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
value: 0, min: 0,
max: 100,
options: { options: {
floor: 0, floor: 0,
ceil: 100 ceil: 100,
vertical: true
} }
}; };
createSlider(sliderConf); createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
}); });
it('should handle mousedown on minH correctly', function() { it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
sinon.spy(slider, 'calcViewDimensions'); sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart'); sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement'); sinon.spy(slider, 'focusElement');
var event = fireMousedown(slider.minH, 0); var event = fireMousedown(slider.minH, 0, true);
slider.calcViewDimensions.called.should.be.true; slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true; slider.callOnStart.called.should.be.true;
...@@ -1472,138 +2068,189 @@ describe('rzslider - ', function() { ...@@ -1472,138 +2068,189 @@ describe('rzslider - ', function() {
event.stopPropagation.called.should.be.true; event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderModel'); expect(slider.tracking).to.equal('rzSliderModel');
expect(slider.minH.hasClass('rz-active')).to.be.true; 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() { it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
sinon.spy(slider, 'positionTrackingHandle'); scope.slider.options.keyboardSupport = false;
sinon.spy(slider, 'callOnChange'); scope.$digest();
var event = fireMousedown(slider.minH, 0);
//consider that slider coordinates start on 0 sinon.spy(slider, 'calcViewDimensions');
slider.sliderElem.rzsp = 0 sinon.spy(slider, 'callOnStart');
var expectedValue = 50, sinon.spy(slider, 'focusElement');
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim;
fireMousemove(offset); var event = fireMousedown(slider.minH, 0, true);
expect(scope.slider.value).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true; slider.calcViewDimensions.called.should.be.true;
slider.callOnChange.called.should.be.true; slider.callOnStart.called.should.be.true;
slider.focusElement.called.should.be.false;
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;
}); });
it('should handle click and drag on minH correctly when mouse is before the slider and previous value was already 0', function() { it('should handle mousedown on maxH correctly when keyboardSupport is true', function() {
sinon.spy(slider, 'positionTrackingHandle'); sinon.spy(slider, 'calcViewDimensions');
var event = fireMousedown(slider.minH, 0); sinon.spy(slider, 'callOnStart');
//consider that slider coordinates start on 0 sinon.spy(slider, 'focusElement');
slider.sliderElem.rzsp = 0
fireMousemove(-100);
expect(scope.slider.value).to.equal(0);
slider.positionTrackingHandle.called.should.be.false;
fireMouseup(); var event = fireMousedown(slider.maxH, 0, true);
slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.focusElement.calledWith(slider.maxH).should.be.true;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderHigh');
expect(slider.maxH.hasClass('rz-active')).to.be.true;
}); });
it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() { it('should handle mousedown on maxH correctly when keyboardSupport is false', function() {
scope.slider.value = 50; scope.slider.options.keyboardSupport = false;
scope.$digest(); scope.$digest();
sinon.spy(slider, 'calcViewDimensions');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'focusElement');
var event = fireMousedown(slider.maxH, 0, true);
slider.calcViewDimensions.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.focusElement.called.should.be.false;
event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderHigh');
expect(slider.maxH.hasClass('rz-active')).to.be.true;
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() {
sinon.spy(slider, 'positionTrackingHandle'); sinon.spy(slider, 'positionTrackingHandle');
var event = fireMousedown(slider.minH, 0); sinon.spy(slider, 'callOnChange');
//consider that slider coordinates start on 0 var event = fireMousedown(slider.minH, 0, true);
slider.sliderElem.rzsp = 0 var expectedValue = 50,
fireMousemove(-100); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
expect(scope.slider.value).to.equal(0); fireMousemove(offset, true);
expect(scope.slider.min).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true; slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.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() { it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
sinon.spy(slider, 'positionTrackingHandle'); sinon.spy(slider, 'positionTrackingHandle');
var event = fireMousedown(slider.minH, 0); sinon.spy(slider, 'callOnChange');
//consider that slider coordinates start on 0 var event = fireMousedown(slider.maxH, 0, true);
slider.sliderElem.rzsp = 0 var expectedValue = 50,
fireMousemove(slider.maxPos + 100); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
expect(scope.slider.value).to.equal(100); fireMousemove(offset, true);
expect(scope.slider.max).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true; slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
fireMouseup(); it('should handle click and drag on minH and switch min/max if needed', function() {
scope.slider.min = 40;
scope.slider.max = 60;
scope.$digest();
var event = fireMousedown(slider.minH, 0, true);
var expectedValue = 80,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
expect(scope.slider.min).to.equal(60);
expect(scope.slider.max).to.equal(80);
}); });
it('should handle click and drag on minH correctly when mouse is after the slider and previous value was already 100', function() { it('should handle click and drag on maxH and switch min/max if needed', function() {
scope.slider.value = 100; scope.slider.min = 40;
scope.slider.max = 60;
scope.$digest(); scope.$digest();
sinon.spy(slider, 'positionTrackingHandle'); var event = fireMousedown(slider.maxH, 0, true);
var event = fireMousedown(slider.minH, 0); var expectedValue = 20,
//consider that slider coordinates start on 0 offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
slider.sliderElem.rzsp = 0 fireMousemove(offset, true);
fireMousemove(slider.maxPos + 100);
expect(scope.slider.value).to.equal(100);
slider.positionTrackingHandle.called.should.be.false;
fireMouseup(); expect(scope.slider.min).to.equal(20);
expect(scope.slider.max).to.equal(40);
}); });
it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() { it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
var event = fireMousedown(slider.minH, 0); sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
sinon.spy(slider, 'callOnEnd'); var expectedValue = 10,
sinon.spy(slider.scope, '$emit'); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMouseup(); var event = fireMousedown(slider.fullBar, offset, true);
expect(scope.slider.min).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderModel'); expect(slider.tracking).to.equal('rzSliderModel');
expect(slider.minH.hasClass('rz-active')).to.be.true; slider.focusElement.calledWith(slider.minH).should.be.true;
slider.callOnEnd.called.should.be.true; slider.positionTrackingHandle.called.should.be.true;
slider.scope.$emit.calledWith('slideEnded').should.be.true; slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
}); });
it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() { it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
scope.slider.options.keyboardSupport = false; sinon.spy(slider, 'positionTrackingHandle');
scope.$digest(); sinon.spy(slider, 'callOnStart');
var event = fireMousedown(slider.minH, 0); sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
sinon.spy(slider, 'callOnEnd'); var expectedValue = 90,
sinon.spy(slider.scope, '$emit'); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMouseup(); var event = fireMousedown(slider.fullBar, offset, true);
expect(slider.tracking).to.equal(''); expect(scope.slider.max).to.equal(expectedValue);
expect(slider.minH.hasClass('rz-active')).to.be.false; expect(slider.tracking).to.equal('rzSliderHigh');
slider.callOnEnd.called.should.be.true; slider.focusElement.calledWith(slider.maxH).should.be.true;
slider.scope.$emit.calledWith('slideEnded').should.be.true; slider.positionTrackingHandle.called.should.be.true;
}); slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
}); });
function fireMousedown(element, position, vertical) { it('should handle click on selbar and move minH when click pos is nearer to minH', function() {
var positionProp = vertical ? 'clientY' : 'clientX'; sinon.spy(slider, 'positionTrackingHandle');
var event = { sinon.spy(slider, 'callOnStart');
type: 'mousedown', sinon.spy(slider, 'callOnChange');
preventDefault: sinon.stub(), sinon.spy(slider, 'focusElement');
stopPropagation: sinon.stub()
};
event[positionProp] = position;
element.triggerHandler(event); var expectedValue = 10,
return event; offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
}
function fireMousemove(position, vertical) { var event = fireMousedown(slider.selBar, offset, true);
var positionProp = vertical ? 'clientY' : 'clientX';
var event = {
type: 'mousemove'
};
event[positionProp] = position;
$document.triggerHandler(event); expect(scope.slider.min).to.equal(expectedValue);
} expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true;
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
function fireMouseup() { it('should handle click on selbar and move maxH when click pos is nearer to maxH', function() {
var event = { sinon.spy(slider, 'positionTrackingHandle');
type: 'mouseup' sinon.spy(slider, 'callOnStart');
}; sinon.spy(slider, 'callOnChange');
$document.triggerHandler(event); sinon.spy(slider, 'focusElement');
}
var expectedValue = 90,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
var event = fireMousedown(slider.selBar, offset, true);
expect(scope.slider.max).to.equal(expectedValue);
expect(slider.tracking).to.equal('rzSliderHigh');
slider.focusElement.calledWith(slider.maxH).should.be.true;
slider.positionTrackingHandle.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
}); });
/* /*
...@@ -2038,6 +2685,37 @@ describe('rzslider - ', function() { ...@@ -2038,6 +2685,37 @@ describe('rzslider - ', function() {
pressKeydown(slider.minH, 'LEFT'); pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10); expect(scope.slider.value).to.equal(10);
}); });
});
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);
}
function pressKeydown(element, key, oldAPI) { function pressKeydown(element, key, oldAPI) {
key = key.toUpperCase(); key = key.toUpperCase();
...@@ -2061,5 +2739,4 @@ describe('rzslider - ', function() { ...@@ -2061,5 +2739,4 @@ describe('rzslider - ', function() {
else event.keyCode = keyCode; else event.keyCode = keyCode;
element.triggerHandler(event); 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