Skip to content

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

test(minRange): Add test coverage for minRange option

parent 1e5a483c
Hide whitespace changes
Inline Side-by-side
Showing with 598 additions and 514 deletions
tests/spec/rz-slider-service-test.js
View file @ d0a5b769
...@@ -16,7 +16,7 @@ describe('rzslider - ', function() { ...@@ -16,7 +16,7 @@ describe('rzslider - ', function() {
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_) { _$document_) {
RzSlider = _RzSlider_; RzSlider = _RzSlider_;
RzSliderOptions = _RzSliderOptions_; RzSliderOptions = _RzSliderOptions_;
$rootScope = _$rootScope_; $rootScope = _$rootScope_;
...@@ -46,7 +46,7 @@ describe('rzslider - ', function() { ...@@ -46,7 +46,7 @@ describe('rzslider - ', function() {
var template = ''; var template = '';
if (sliderObj.options) if (sliderObj.options)
template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"' + template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"' +
'rz-slider-options="slider.options"></rzslider>'; 'rz-slider-options="slider.options"></rzslider>';
else else
template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"></rzslider>'; template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"></rzslider>';
initSlider(sliderObj, template); initSlider(sliderObj, template);
...@@ -64,10 +64,10 @@ describe('rzslider - ', function() { ...@@ -64,10 +64,10 @@ describe('rzslider - ', function() {
} }
/* /*
****************************************************************************** ******************************************************************************
SINGLE SLIDER INIT SINGLE SLIDER INIT
****************************************************************************** ******************************************************************************
*/ */
describe('single slider initialisation', function() { describe('single slider initialisation', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
...@@ -152,10 +152,10 @@ describe('rzslider - ', function() { ...@@ -152,10 +152,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
RANGE SLIDER INIT RANGE SLIDER INIT
****************************************************************************** ******************************************************************************
*/ */
describe('range slider initialisation', function() { describe('range slider initialisation', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
...@@ -239,10 +239,10 @@ describe('rzslider - ', function() { ...@@ -239,10 +239,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
RzSliderOptions RzSliderOptions
****************************************************************************** ******************************************************************************
*/ */
describe('RzSliderOptions', function() { describe('RzSliderOptions', function() {
it('should have a correct getOptions method that apply custom options', function() { it('should have a correct getOptions method that apply custom options', function() {
...@@ -270,10 +270,10 @@ describe('rzslider - ', function() { ...@@ -270,10 +270,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
Options handling Options handling
****************************************************************************** ******************************************************************************
*/ */
describe('options handling - ', function() { describe('options handling - ', function() {
describe('tests with same config', function() { describe('tests with same config', function() {
...@@ -576,10 +576,10 @@ describe('rzslider - ', function() { ...@@ -576,10 +576,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
Accessibility Accessibility
****************************************************************************** ******************************************************************************
*/ */
describe('accessibility - ', function() { describe('accessibility - ', function() {
it('should have accessible horizontal single slider', function() { it('should have accessible horizontal single slider', function() {
var sliderConf = { var sliderConf = {
...@@ -785,10 +785,10 @@ describe('rzslider - ', function() { ...@@ -785,10 +785,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
Slider with ticks Slider with ticks
****************************************************************************** ******************************************************************************
*/ */
describe('slider with ticks', function() { describe('slider with ticks', function() {
it('should not create any tick if showTicks is false (default)', function() { it('should not create any tick if showTicks is false (default)', function() {
...@@ -949,10 +949,10 @@ describe('rzslider - ', function() { ...@@ -949,10 +949,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
HELPER FUNCTIONS HELPER FUNCTIONS
****************************************************************************** ******************************************************************************
*/ */
describe('helper functions - ', function() { describe('helper functions - ', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
...@@ -1526,10 +1526,10 @@ describe('rzslider - ', function() { ...@@ -1526,10 +1526,10 @@ describe('rzslider - ', function() {
}); });
/* /*
****************************************************************************** ******************************************************************************
MOUSE CONTROLS MOUSE CONTROLS
****************************************************************************** ******************************************************************************
*/ */
describe('mouse controls - ', function() { describe('mouse controls - ', function() {
describe('single horizontal slider - ', function() { describe('single horizontal slider - ', function() {
...@@ -2120,587 +2120,639 @@ describe('rzslider - ', function() { ...@@ -2120,587 +2120,639 @@ describe('rzslider - ', function() {
slider.callOnChange.called.should.be.true; slider.callOnChange.called.should.be.true;
}); });
}); });
});
describe('range vertical slider - ', function() { describe('range vertical slider - ', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
min: 0, min: 0,
max: 100, max: 100,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 100,
vertical: true vertical: true
} }
}; };
createRangeSlider(sliderConf); createRangeSlider(sliderConf);
}); });
afterEach(function() { afterEach(function() {
// to clean document listener // to clean document listener
fireMouseup(); fireMouseup();
}); });
it('should handle mousedown on minH correctly when keyboardSupport is true', 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, true); 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;
slider.focusElement.calledWith(slider.minH).should.be.true; slider.focusElement.calledWith(slider.minH).should.be.true;
event.preventDefault.called.should.be.true; event.preventDefault.called.should.be.true;
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;
}); });
it('should handle mousedown on minH correctly when keyboardSupport is false', function() { it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false; scope.slider.options.keyboardSupport = false;
scope.$digest(); scope.$digest();
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, true); 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;
slider.focusElement.called.should.be.false; slider.focusElement.called.should.be.false;
event.preventDefault.called.should.be.true; event.preventDefault.called.should.be.true;
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;
}); });
it('should handle mousedown on maxH correctly when keyboardSupport is true', function() { it('should handle mousedown on maxH 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.maxH, 0, true); var event = fireMousedown(slider.maxH, 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;
slider.focusElement.calledWith(slider.maxH).should.be.true; slider.focusElement.calledWith(slider.maxH).should.be.true;
event.preventDefault.called.should.be.true; event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true; event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderHigh'); expect(slider.tracking).to.equal('rzSliderHigh');
expect(slider.maxH.hasClass('rz-active')).to.be.true; expect(slider.maxH.hasClass('rz-active')).to.be.true;
}); });
it('should handle mousedown on maxH correctly when keyboardSupport is false', function() { it('should handle mousedown on maxH correctly when keyboardSupport is false', function() {
scope.slider.options.keyboardSupport = false; scope.slider.options.keyboardSupport = false;
scope.$digest(); scope.$digest();
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.maxH, 0, true); var event = fireMousedown(slider.maxH, 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;
slider.focusElement.called.should.be.false; slider.focusElement.called.should.be.false;
event.preventDefault.called.should.be.true; event.preventDefault.called.should.be.true;
event.stopPropagation.called.should.be.true; event.stopPropagation.called.should.be.true;
expect(slider.tracking).to.equal('rzSliderHigh'); expect(slider.tracking).to.equal('rzSliderHigh');
expect(slider.maxH.hasClass('rz-active')).to.be.true; 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, true);
var expectedValue = 50,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
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, true);
var expectedValue = 50,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
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, true); it('should handle click and drag on minH correctly when mouse is on the middle', function() {
var expectedValue = 80, sinon.spy(slider, 'positionTrackingHandle');
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim; sinon.spy(slider, 'callOnChange');
fireMousemove(offset, true); var event = fireMousedown(slider.minH, 0, true);
var expectedValue = 50,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
expect(scope.slider.min).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
expect(scope.slider.min).to.equal(60); it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
expect(scope.slider.max).to.equal(80); sinon.spy(slider, 'positionTrackingHandle');
}); sinon.spy(slider, 'callOnChange');
var event = fireMousedown(slider.maxH, 0, true);
var expectedValue = 50,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
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 maxH and switch min/max if needed', function() { it('should handle click and drag on minH and switch min/max if needed', function() {
scope.slider.min = 40; scope.slider.min = 40;
scope.slider.max = 60; scope.slider.max = 60;
scope.$digest(); scope.$digest();
var event = fireMousedown(slider.maxH, 0, true); var event = fireMousedown(slider.minH, 0, true);
var expectedValue = 20, var expectedValue = 80,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim; offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true); fireMousemove(offset, true);
expect(scope.slider.min).to.equal(20); expect(scope.slider.min).to.equal(60);
expect(scope.slider.max).to.equal(40); expect(scope.slider.max).to.equal(80);
}); });
it('should handle click on fullbar and move minH when click pos is nearer to minH', function() { it('should handle click and drag on maxH and switch min/max if needed', function() {
sinon.spy(slider, 'positionTrackingHandle'); scope.slider.min = 40;
sinon.spy(slider, 'callOnStart'); scope.slider.max = 60;
sinon.spy(slider, 'callOnChange'); scope.$digest();
sinon.spy(slider, 'focusElement');
var expectedValue = 10, var event = fireMousedown(slider.maxH, 0, true);
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim; var expectedValue = 20,
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
fireMousemove(offset, true);
var event = fireMousedown(slider.fullBar, offset, true); expect(scope.slider.min).to.equal(20);
expect(scope.slider.max).to.equal(40);
});
expect(scope.slider.min).to.equal(expectedValue); it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
expect(slider.tracking).to.equal('rzSliderModel'); sinon.spy(slider, 'positionTrackingHandle');
slider.focusElement.calledWith(slider.minH).should.be.true; sinon.spy(slider, 'callOnStart');
slider.positionTrackingHandle.called.should.be.true; sinon.spy(slider, 'callOnChange');
slider.callOnStart.called.should.be.true; sinon.spy(slider, 'focusElement');
slider.callOnChange.called.should.be.true;
});
it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() { var expectedValue = 10,
sinon.spy(slider, 'positionTrackingHandle'); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 90, var event = fireMousedown(slider.fullBar, offset, true);
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
var event = fireMousedown(slider.fullBar, offset, true); 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;
});
expect(scope.slider.max).to.equal(expectedValue); it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
expect(slider.tracking).to.equal('rzSliderHigh'); sinon.spy(slider, 'positionTrackingHandle');
slider.focusElement.calledWith(slider.maxH).should.be.true; sinon.spy(slider, 'callOnStart');
slider.positionTrackingHandle.called.should.be.true; sinon.spy(slider, 'callOnChange');
slider.callOnStart.called.should.be.true; sinon.spy(slider, 'focusElement');
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move minH when click pos is nearer to minH', function() { var expectedValue = 90,
sinon.spy(slider, 'positionTrackingHandle'); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 10, var event = fireMousedown(slider.fullBar, offset, true);
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;
});
expect(scope.slider.min).to.equal(expectedValue); it('should handle click on selbar and move minH when click pos is nearer to minH', function() {
expect(slider.tracking).to.equal('rzSliderModel'); sinon.spy(slider, 'positionTrackingHandle');
slider.focusElement.calledWith(slider.minH).should.be.true; sinon.spy(slider, 'callOnStart');
slider.positionTrackingHandle.called.should.be.true; sinon.spy(slider, 'callOnChange');
slider.callOnStart.called.should.be.true; sinon.spy(slider, 'focusElement');
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move maxH when click pos is nearer to maxH', function() { var expectedValue = 10,
sinon.spy(slider, 'positionTrackingHandle'); offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 90, var event = fireMousedown(slider.selBar, offset, true);
offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
var event = fireMousedown(slider.selBar, offset, true); 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;
});
expect(scope.slider.max).to.equal(expectedValue); it('should handle click on selbar and move maxH when click pos is nearer to maxH', function() {
expect(slider.tracking).to.equal('rzSliderHigh'); sinon.spy(slider, 'positionTrackingHandle');
slider.focusElement.calledWith(slider.maxH).should.be.true; sinon.spy(slider, 'callOnStart');
slider.positionTrackingHandle.called.should.be.true; sinon.spy(slider, 'callOnChange');
slider.callOnStart.called.should.be.true; sinon.spy(slider, 'focusElement');
slider.callOnChange.called.should.be.true;
});
});
describe('range horizontal slider with draggableRange - ', function() { var expectedValue = 90,
beforeEach(function() { offset = slider.sliderElem.rzsp - slider.valueToOffset(expectedValue) - slider.handleHalfDim;
var sliderConf = {
min: 40,
max: 60,
options: {
floor: 0,
ceil: 100,
draggableRange: true
}
};
createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
it('should handle click and drag on minH correctly when mouse is on the middle', function() { var event = fireMousedown(slider.selBar, offset, true);
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() { expect(scope.slider.max).to.equal(expectedValue);
sinon.spy(slider, 'positionTrackingHandle'); expect(slider.tracking).to.equal('rzSliderHigh');
sinon.spy(slider, 'callOnChange'); slider.focusElement.calledWith(slider.maxH).should.be.true;
var event = fireMousedown(slider.maxH, 0); slider.positionTrackingHandle.called.should.be.true;
var expectedValue = 50, slider.callOnStart.called.should.be.true;
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp; slider.callOnChange.called.should.be.true;
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() { describe('range horizontal slider with draggableRange - ', function() {
var event = fireMousedown(slider.minH, 0); beforeEach(function() {
var expectedValue = 80, var sliderConf = {
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp; min: 40,
fireMousemove(offset); max: 60,
options: {
floor: 0,
ceil: 100,
draggableRange: true
}
};
createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
expect(scope.slider.min).to.equal(60); it('should handle click and drag on minH correctly when mouse is on the middle', function() {
expect(scope.slider.max).to.equal(80); 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() {
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() {
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);
it('should handle click and drag on maxH and switch min/max if needed', function() { expect(scope.slider.min).to.equal(expectedValue);
var event = fireMousedown(slider.maxH, 0); expect(slider.tracking).to.equal('rzSliderModel');
var expectedValue = 20, slider.focusElement.calledWith(slider.minH).should.be.true;
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp; slider.positionTrackingHandle.called.should.be.true;
fireMousemove(offset); slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
expect(scope.slider.min).to.equal(20); it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
expect(scope.slider.max).to.equal(40); sinon.spy(slider, 'positionTrackingHandle');
}); sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
it('should handle click on fullbar and move minH when click pos is nearer to minH', function() { var expectedValue = 90,
sinon.spy(slider, 'positionTrackingHandle'); offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 10, var event = fireMousedown(slider.fullBar, offset);
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;
});
expect(scope.slider.min).to.equal(expectedValue); it('should handle click on selbar and move whole range when moved within slider range', function() {
expect(slider.tracking).to.equal('rzSliderModel'); sinon.spy(slider, 'positionTrackingBar');
slider.focusElement.calledWith(slider.minH).should.be.true; sinon.spy(slider, 'callOnStart');
slider.positionTrackingHandle.called.should.be.true; sinon.spy(slider, 'callOnChange');
slider.callOnStart.called.should.be.true; sinon.spy(slider, 'focusElement');
slider.callOnChange.called.should.be.true;
});
it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() { fireMousedown(slider.selBar, 0);
sinon.spy(slider, 'positionTrackingHandle');
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
var expectedValue = 90, var moveValue = 10,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp; offset = slider.valueToOffset(moveValue);
fireMousemove(offset);
var event = fireMousedown(slider.fullBar, offset); expect(scope.slider.min).to.equal(50);
expect(scope.slider.max).to.equal(70);
expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true;
slider.positionTrackingBar.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
expect(scope.slider.max).to.equal(expectedValue); it('should handle click on selbar and move move range when near 0 and moved left', function() {
expect(slider.tracking).to.equal('rzSliderHigh'); scope.slider.min = 10;
slider.focusElement.calledWith(slider.maxH).should.be.true; scope.$digest();
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 whole range when moved within slider range', function() { fireMousedown(slider.selBar, 0);
sinon.spy(slider, 'positionTrackingBar'); fireMousemove(-1000);
sinon.spy(slider, 'callOnStart');
sinon.spy(slider, 'callOnChange');
sinon.spy(slider, 'focusElement');
fireMousedown(slider.selBar, 0); expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(50);
expect(slider.tracking).to.equal('rzSliderModel');
});
var moveValue = 10, it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
offset = slider.valueToOffset(moveValue); scope.slider.min = 0;
fireMousemove(offset); scope.$digest();
expect(scope.slider.min).to.equal(50); fireMousedown(slider.selBar, 0);
expect(scope.slider.max).to.equal(70); fireMousemove(-100);
expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true;
slider.positionTrackingBar.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move move range when near 0 and moved left', function() { expect(scope.slider.min).to.equal(0);
scope.slider.min = 10; expect(scope.slider.max).to.equal(60);
scope.$digest(); expect(slider.tracking).to.equal('rzSliderModel');
});
fireMousedown(slider.selBar, 0); it('should handle click on selbar and move move range when near max and moved right', function() {
fireMousemove(-1000); scope.slider.max = 90;
scope.$digest();
expect(scope.slider.min).to.equal(0); fireMousedown(slider.selBar, 0);
expect(scope.slider.max).to.equal(50); fireMousemove(slider.maxPos);
expect(slider.tracking).to.equal('rzSliderModel');
});
it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() { expect(scope.slider.min).to.equal(50);
scope.slider.min = 0; expect(scope.slider.max).to.equal(100);
scope.$digest(); expect(slider.tracking).to.equal('rzSliderModel');
});
fireMousedown(slider.selBar, 0); it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
fireMousemove(-100); scope.slider.max = 100;
scope.$digest();
expect(scope.slider.min).to.equal(0); fireMousedown(slider.selBar, 0);
expect(scope.slider.max).to.equal(60); fireMousemove(slider.maxPos);
expect(slider.tracking).to.equal('rzSliderModel');
});
it('should handle click on selbar and move move range when near max and moved right', function() { expect(scope.slider.min).to.equal(40);
scope.slider.max = 90; expect(scope.slider.max).to.equal(100);
scope.$digest(); expect(slider.tracking).to.equal('rzSliderModel');
});
fireMousedown(slider.selBar, 0); it('should a working positionTrackingBar', function() {
fireMousemove(slider.maxPos); var newMin = 50,
newMax = 90,
minOffset = slider.valueToOffset(newMin),
maxOffset = slider.valueToOffset(newMax);
slider.positionTrackingBar(newMin, newMax, minOffset, maxOffset);
expect(scope.slider.min).to.equal(50); expect(scope.slider.min).to.equal(50);
expect(scope.slider.max).to.equal(100); expect(scope.slider.max).to.equal(90);
expect(slider.tracking).to.equal('rzSliderModel'); expect(slider.minH.css('left')).to.equal(minOffset + 'px');
expect(slider.maxH.css('left')).to.equal(maxOffset + 'px');
});
}); });
it('should handle click on selbar and don\'t move range when already at max and moved right', function() { describe('range horizontal slider with draggableRangeOnly - ', function() {
scope.slider.max = 100; beforeEach(function() {
scope.$digest(); var sliderConf = {
min: 40,
max: 60,
options: {
floor: 0,
ceil: 100,
draggableRangeOnly: true
}
};
createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
fireMousedown(slider.selBar, 0); it('should handle click and drag on minH correctly', function() {
fireMousemove(slider.maxPos); sinon.spy(slider, 'positionTrackingBar');
sinon.spy(slider, 'callOnChange');
expect(scope.slider.min).to.equal(40); var event = fireMousedown(slider.minH, 0);
expect(scope.slider.max).to.equal(100); var moveValue = 10,
expect(slider.tracking).to.equal('rzSliderModel'); offset = slider.valueToOffset(moveValue);
}); fireMousemove(offset);
it('should a working positionTrackingBar', function() { expect(scope.slider.min).to.equal(50);
var newMin = 50, expect(scope.slider.max).to.equal(70);
newMax = 90, slider.positionTrackingBar.called.should.be.true;
minOffset = slider.valueToOffset(newMin), slider.callOnChange.called.should.be.true;
maxOffset = slider.valueToOffset(newMax); });
slider.positionTrackingBar(newMin, newMax, minOffset, maxOffset);
expect(scope.slider.min).to.equal(50); it('should handle click and drag on maxH correctly', function() {
expect(scope.slider.max).to.equal(90); sinon.spy(slider, 'positionTrackingBar');
expect(slider.minH.css('left')).to.equal(minOffset + 'px'); sinon.spy(slider, 'callOnChange');
expect(slider.maxH.css('left')).to.equal(maxOffset + 'px'); var event = fireMousedown(slider.maxH, 0);
}); var moveValue = 10,
}); offset = slider.valueToOffset(moveValue);
fireMousemove(offset);
expect(scope.slider.min).to.equal(50);
expect(scope.slider.max).to.equal(70);
slider.positionTrackingBar.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
describe('range horizontal slider with draggableRangeOnly - ', function() { it('should not handle click on fullbar', function() {
beforeEach(function() { sinon.spy(slider, 'callOnStart');
var sliderConf = {
min: 40,
max: 60,
options: {
floor: 0,
ceil: 100,
draggableRangeOnly: true
}
};
createRangeSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
it('should handle click and drag on minH correctly', function() { var moveValue = 10,
sinon.spy(slider, 'positionTrackingBar'); offset = slider.valueToOffset(moveValue);
sinon.spy(slider, 'callOnChange');
var event = fireMousedown(slider.minH, 0); var event = fireMousedown(slider.fullBar, offset);
var moveValue = 10,
offset = slider.valueToOffset(moveValue);
fireMousemove(offset);
expect(scope.slider.min).to.equal(50); expect(scope.slider.min).to.equal(40);
expect(scope.slider.max).to.equal(70); expect(scope.slider.max).to.equal(60);
slider.positionTrackingBar.called.should.be.true; expect(slider.tracking).to.equal('');
slider.callOnChange.called.should.be.true; slider.callOnStart.called.should.be.false;
}); });
it('should handle click and drag on maxH correctly', function() { it('should handle click on selbar and move whole range when moved within slider range', function() {
sinon.spy(slider, 'positionTrackingBar'); sinon.spy(slider, 'positionTrackingBar');
sinon.spy(slider, 'callOnChange'); sinon.spy(slider, 'callOnStart');
var event = fireMousedown(slider.maxH, 0); sinon.spy(slider, 'callOnChange');
var moveValue = 10, sinon.spy(slider, 'focusElement');
offset = slider.valueToOffset(moveValue);
fireMousemove(offset); fireMousedown(slider.selBar, 0);
expect(scope.slider.min).to.equal(50);
expect(scope.slider.max).to.equal(70);
slider.positionTrackingBar.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should not handle click on fullbar', function() { var moveValue = 10,
sinon.spy(slider, 'callOnStart'); offset = slider.valueToOffset(moveValue);
fireMousemove(offset);
var moveValue = 10, expect(scope.slider.min).to.equal(50);
offset = slider.valueToOffset(moveValue); expect(scope.slider.max).to.equal(70);
expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true;
slider.positionTrackingBar.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
var event = fireMousedown(slider.fullBar, offset); it('should handle click on selbar and move move range when near 0 and moved left', function() {
scope.slider.min = 10;
scope.$digest();
expect(scope.slider.min).to.equal(40); fireMousedown(slider.selBar, 0);
expect(scope.slider.max).to.equal(60); fireMousemove(-1000);
expect(slider.tracking).to.equal('');
slider.callOnStart.called.should.be.false;
});
it('should handle click on selbar and move whole range when moved within slider range', function() { expect(scope.slider.min).to.equal(0);
sinon.spy(slider, 'positionTrackingBar'); expect(scope.slider.max).to.equal(50);
sinon.spy(slider, 'callOnStart'); expect(slider.tracking).to.equal('rzSliderModel');
sinon.spy(slider, 'callOnChange'); });
sinon.spy(slider, 'focusElement');
fireMousedown(slider.selBar, 0); it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
scope.slider.min = 0;
scope.$digest();
var moveValue = 10, fireMousedown(slider.selBar, 0);
offset = slider.valueToOffset(moveValue); fireMousemove(-100);
fireMousemove(offset);
expect(scope.slider.min).to.equal(50); expect(scope.slider.min).to.equal(0);
expect(scope.slider.max).to.equal(70); expect(scope.slider.max).to.equal(60);
expect(slider.tracking).to.equal('rzSliderModel'); expect(slider.tracking).to.equal('rzSliderModel');
slider.focusElement.calledWith(slider.minH).should.be.true; });
slider.positionTrackingBar.called.should.be.true;
slider.callOnStart.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should handle click on selbar and move move range when near 0 and moved left', function() { it('should handle click on selbar and move move range when near max and moved right', function() {
scope.slider.min = 10; scope.slider.max = 90;
scope.$digest(); scope.$digest();
fireMousedown(slider.selBar, 0); fireMousedown(slider.selBar, 0);
fireMousemove(-1000); fireMousemove(slider.maxPos);
expect(scope.slider.min).to.equal(0); expect(scope.slider.min).to.equal(50);
expect(scope.slider.max).to.equal(50); expect(scope.slider.max).to.equal(100);
expect(slider.tracking).to.equal('rzSliderModel'); expect(slider.tracking).to.equal('rzSliderModel');
}); });
it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() { it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
scope.slider.min = 0; scope.slider.max = 100;
scope.$digest(); scope.$digest();
fireMousedown(slider.selBar, 0); fireMousedown(slider.selBar, 0);
fireMousemove(-100); fireMousemove(slider.maxPos);
expect(scope.slider.min).to.equal(0); expect(scope.slider.min).to.equal(40);
expect(scope.slider.max).to.equal(60); expect(scope.slider.max).to.equal(100);
expect(slider.tracking).to.equal('rzSliderModel'); expect(slider.tracking).to.equal('rzSliderModel');
});
}); });
it('should handle click on selbar and move move range when near max and moved right', function() { describe('single horizontal slider with onlyBindHandles - ', function() {
scope.slider.max = 90; beforeEach(function() {
scope.$digest(); var sliderConf = {
value: 0,
fireMousedown(slider.selBar, 0); options: {
fireMousemove(slider.maxPos); floor: 0,
ceil: 100,
showTicks: true,
onlyBindHandles: true
}
};
createSlider(sliderConf);
});
afterEach(function() {
// to clean document listener
fireMouseup();
});
expect(scope.slider.min).to.equal(50); it('should handle click and drag on minH correctly when mouse is on the middle', function() {
expect(scope.slider.max).to.equal(100); sinon.spy(slider, 'positionTrackingHandle');
expect(slider.tracking).to.equal('rzSliderModel'); 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 on selbar and don\'t move range when already at max and moved right', function() { it('should do nothing when a click happen on another element than the handle', function() {
scope.slider.max = 100; scope.slider.value = 100;
scope.$digest(); scope.$digest();
fireMousedown(slider.selBar, 0); sinon.spy(slider, 'positionTrackingHandle');
fireMousemove(slider.maxPos); fireMousedown(slider.selBar, 0);
fireMousedown(slider.fullBar, 0);
fireMousedown(slider.ticks, 0);
expect(scope.slider.min).to.equal(40); expect(scope.slider.value).to.equal(100);
expect(scope.slider.max).to.equal(100); slider.positionTrackingHandle.called.should.be.false;
expect(slider.tracking).to.equal('rzSliderModel'); });
}); });
});
describe('single horizontal slider - ', function() { describe('single horizontal slider with onlyBindHandles - ', function() {
beforeEach(function() { beforeEach(function() {
var sliderConf = { var sliderConf = {
value: 0, min: 45,
options: { max: 55,
floor: 0, options: {
ceil: 100, floor: 0,
showTicks: true, ceil: 100,
onlyBindHandles: true minRange: 10
} }
}; };
createSlider(sliderConf); createRangeSlider(sliderConf);
}); });
afterEach(function() { afterEach(function() {
// to clean document listener // to clean document listener
fireMouseup(); fireMouseup();
}); });
it('should handle click and drag on minH correctly when mouse is on the middle', function() { it('should not modify any value if new range would be smaller than minRange when moving minH', function() {
sinon.spy(slider, 'positionTrackingHandle'); fireMousedown(slider.minH, 0);
sinon.spy(slider, 'callOnChange'); var expectedValue = 50,
var event = fireMousedown(slider.minH, 0); offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
var expectedValue = 50, fireMousemove(offset);
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp; expect(scope.slider.min).to.equal(45);
fireMousemove(offset); });
expect(scope.slider.value).to.equal(expectedValue);
slider.positionTrackingHandle.called.should.be.true;
slider.callOnChange.called.should.be.true;
});
it('should do nothing when a click happen on another element than the handle', function() { it('should not modify any value if new range would be smaller than minRange when moving maxH', function() {
scope.slider.value = 100; fireMousedown(slider.maxH, 0);
scope.$digest(); var expectedValue = 50,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.max).to.equal(55);
});
sinon.spy(slider, 'positionTrackingHandle'); it('should modify the min value if new range is larger than minRange when moving minH', function() {
fireMousedown(slider.selBar, 0); fireMousedown(slider.minH, 0);
fireMousedown(slider.fullBar, 0); var expectedValue = 30,
fireMousedown(slider.ticks, 0); offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.min).to.equal(expectedValue);
});
expect(scope.slider.value).to.equal(100); it('should modify the max value if new range is larger than than minRange when moving maxH', function() {
slider.positionTrackingHandle.called.should.be.false; fireMousedown(slider.maxH, 0);
var expectedValue = 70,
offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
fireMousemove(offset);
expect(scope.slider.max).to.equal(expectedValue);
});
}); });
}); });
/* /*
****************************************************************************** ******************************************************************************
KEYBOARD CONTROLS KEYBOARD CONTROLS
****************************************************************************** ******************************************************************************
*/ */
describe('keyboard controls', function() { describe('keyboard controls', function() {
describe('simple cases for single slider - ', function() { describe('simple cases for single slider - ', function() {
...@@ -3114,19 +3166,51 @@ describe('rzslider - ', function() { ...@@ -3114,19 +3166,51 @@ describe('rzslider - ', function() {
expect(scope.slider.value).to.equal(10); expect(scope.slider.value).to.equal(10);
}); });
it('should not be modified by keyboard if keyboardSupport=false', function() { it('should not be modified by keyboard if new range is below minRange', function() {
var sliderConf = { var sliderConf = {
value: 10, min: 45,
max: 55,
options: { options: {
floor: 0, floor: 0,
ceil: 100, ceil: 100,
keyboardSupport: false step: 1,
minRange: 10
} }
}; };
createSlider(sliderConf); createRangeSlider(sliderConf);
//try to move minH right
slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'RIGHT');
expect(scope.slider.min).to.equal(45);
//try to move maxH left
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'LEFT');
expect(scope.slider.max).to.equal(55);
});
it('should be modified by keyboard if new range is above minRange', function() {
var sliderConf = {
min: 45,
max: 55,
options: {
floor: 0,
ceil: 100,
step: 1,
minRange: 10
}
};
createRangeSlider(sliderConf);
//try to move minH left
slider.minH.triggerHandler('focus'); slider.minH.triggerHandler('focus');
pressKeydown(slider.minH, 'LEFT'); pressKeydown(slider.minH, 'LEFT');
expect(scope.slider.value).to.equal(10); expect(scope.slider.min).to.equal(44);
//try to move maxH right
slider.maxH.triggerHandler('focus');
pressKeydown(slider.maxH, 'RIGHT');
expect(scope.slider.max).to.equal(56);
}); });
}); });
......
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