Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 840eb79

Browse files
author
Valentin Hervieu
committed
test: Add more tests for slider init, RzSliderOptions handling, and start to test ticks
1 parent ab2afaa commit 840eb79

File tree

4 files changed

+188
-24
lines changed

4 files changed

+188
-24
lines changed

‎karma.conf.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = function (config) {
66
basePath: '',
77

88
// testing framework to use (jasmine/mocha/qunit/...)
9-
frameworks: ['mocha', 'chai', 'chai-things', 'chai-as-promised'],
9+
frameworks: ['mocha', 'sinon', 'chai'],
1010

1111
reporters: ['dots', 'coverage'],
1212

@@ -16,6 +16,7 @@ module.exports = function (config) {
1616
'node_modules/angular-mocks/angular-mocks.js',
1717
'src/*.js',
1818
'tests/spec/*.js',
19+
'dist/rzslider.css',
1920
'src/*.html'
2021
],
2122

@@ -51,7 +52,6 @@ module.exports = function (config) {
5152
subdir: '.'
5253
},
5354

54-
5555
// Start these browsers, currently available:
5656
// - Chrome
5757
// - ChromeCanary

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@
2424
"angular": "1.4.7",
2525
"angular-mocks": "^1.4.8",
2626
"chai": "^3.4.1",
27-
"chai-as-promised": "^5.1.0",
28-
"chai-things": "^0.2.0",
2927
"codecov.io": "^0.1.6",
3028
"commitizen": "^2.4.6",
3129
"cz-conventional-changelog": "^1.1.5",
@@ -41,12 +39,13 @@
4139
"grunt-replace": "^0.11.0",
4240
"grunt-serve": "^0.1.6",
4341
"karma": "^0.13.15",
44-
"karma-chai-plugins": "^0.6.1",
42+
"karma-chai": "^0.1.0",
4543
"karma-chrome-launcher": "^0.2.2",
4644
"karma-coverage": "^0.5.3",
4745
"karma-mocha": "^0.2.1",
4846
"karma-ng-html2js-preprocessor": "^0.2.0",
4947
"karma-phantomjs-launcher": "^0.2.1",
48+
"karma-sinon": "^1.0.4",
5049
"mocha": "^2.3.4",
5150
"phantomjs": "^1.9.19",
5251
"recess": "~1.1.9"

‎src/rzslider.js

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -282,9 +282,12 @@
282282
*/
283283
init: function() {
284284
var thrLow, thrHigh,
285-
calcDimFn = angular.bind(this, this.calcViewDimensions),
286285
self = this;
287286

287+
var calcDimFn = function() {
288+
self.calcViewDimensions();
289+
};
290+
288291
this.applyOptions();
289292
this.initElemHandles();
290293
this.manageElementsStyle();
@@ -309,27 +312,12 @@
309312
this.initHasRun = true;
310313

311314
// Watch for changes to the model
312-
313315
thrLow = rzThrottle(function() {
314-
self.setMinAndMax();
315-
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
316-
self.updateSelectionBar();
317-
self.updateTicksScale();
318-
self.updateAriaAttributes();
319-
320-
if (self.range) {
321-
self.updateCmbLabel();
322-
}
323-
316+
self.onLowHandleChange();
324317
}, self.options.interval);
325318

326319
thrHigh = rzThrottle(function() {
327-
self.setMinAndMax();
328-
self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
329-
self.updateSelectionBar();
330-
self.updateTicksScale();
331-
self.updateCmbLabel();
332-
self.updateAriaAttributes();
320+
self.onHighHandleChange();
333321
}, self.options.interval);
334322

335323
this.scope.$on('rzSliderForceRender', function() {
@@ -377,6 +365,32 @@
377365
});
378366
},
379367

368+
/*
369+
* Reflow the slider when the low handle changes (called with throttle)
370+
*/
371+
onLowHandleChange: function() {
372+
this.setMinAndMax();
373+
this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
374+
this.updateSelectionBar();
375+
this.updateTicksScale();
376+
this.updateAriaAttributes();
377+
if (this.range) {
378+
this.updateCmbLabel();
379+
}
380+
},
381+
382+
/*
383+
* Reflow the slider when the high handle changes (called with throttle)
384+
*/
385+
onHighHandleChange: function() {
386+
this.setMinAndMax();
387+
this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
388+
this.updateSelectionBar();
389+
this.updateTicksScale();
390+
this.updateCmbLabel();
391+
this.updateAriaAttributes();
392+
},
393+
380394
/**
381395
* Read the user options and apply them to the slider model
382396
*/

‎tests/spec/rz-slider-service-test.js

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,24 @@
22

33
describe('rzslider - ', function() {
44
var RzSlider,
5+
RzSliderOptions,
56
$rootScope,
67
scope,
78
$compile,
89
$timeout,
10+
$window,
911
element,
1012
slider;
1113
beforeEach(module('rzModule'));
1214
beforeEach(module('appTemplates'));
1315

14-
beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_, _$timeout_) {
16+
beforeEach(inject(function(_RzSlider_, _RzSliderOptions_, _$rootScope_, _$compile_, _$timeout_, _$window_) {
1517
RzSlider = _RzSlider_;
18+
RzSliderOptions = _RzSliderOptions_;
1619
$rootScope = _$rootScope_;
1720
$compile = _$compile_;
1821
$timeout = _$timeout_;
22+
$window = _$window_;
1923
}));
2024

2125
/*
@@ -50,7 +54,151 @@ describe('rzslider - ', function() {
5054
$timeout.flush(); //to flush the throttle function
5155
expect(scope.slider.value).to.equal(60);
5256
});
57+
58+
it('should call calcViewDimensions() on reCalcViewDimensions', function() {
59+
sinon.spy(slider, 'calcViewDimensions');
60+
scope.$broadcast('reCalcViewDimensions');
61+
slider.calcViewDimensions.called.should.be.true;
62+
});
63+
64+
it('should reset everything on rzSliderForceRender', function() {
65+
sinon.spy(slider, 'resetLabelsValue');
66+
sinon.spy(slider, 'resetSlider');
67+
sinon.spy(slider, 'onLowHandleChange');
68+
69+
scope.$broadcast('rzSliderForceRender');
70+
71+
slider.resetLabelsValue.called.should.be.true;
72+
slider.resetSlider.called.should.be.true;
73+
slider.onLowHandleChange.called.should.be.true;
74+
});
75+
76+
it('should call calcViewDimensions() on window resize event', function() {
77+
sinon.spy(slider, 'calcViewDimensions');
78+
angular.element($window).triggerHandler('resize');
79+
slider.calcViewDimensions.called.should.be.true;
80+
});
81+
82+
it('should unregister all dom events on $destroy', function() {
83+
sinon.spy(slider, 'calcViewDimensions');
84+
sinon.spy(slider, 'unbindEvents');
85+
86+
scope.$broadcast('$destroy');
87+
angular.element($window).triggerHandler('resize');
88+
89+
slider.calcViewDimensions.called.should.be.false;
90+
slider.unbindEvents.called.should.be.true;
91+
});
92+
});
93+
94+
/*
95+
******************************************************************************
96+
RANGE SLIDER INIT
97+
******************************************************************************
98+
*/
99+
describe('range slider initialisation', function() {
100+
beforeEach(function() {
101+
var sliderConf = {
102+
min: 10,
103+
max: 90,
104+
options: {
105+
floor: 0,
106+
ceil: 100,
107+
step: 10
108+
}
109+
};
110+
createRangeSlider(sliderConf);
111+
});
112+
113+
it('should exist compiled', function() {
114+
expect(element.find('span')).to.have.length(11);
115+
});
116+
117+
it('should round the model value to the step', function() {
118+
scope.slider.min = 13;
119+
scope.slider.max = 94;
120+
scope.$digest();
121+
expect(scope.slider.min).to.equal(10);
122+
expect(scope.slider.max).to.equal(90);
123+
124+
scope.slider.min = 15;
125+
scope.slider.max = 95;
126+
scope.$digest();
127+
$timeout.flush(); //to flush the throttle function
128+
expect(scope.slider.min).to.equal(20);
129+
expect(scope.slider.max).to.equal(100);
130+
});
131+
132+
it('should reset everything on rzSliderForceRender', function() {
133+
sinon.spy(slider, 'resetLabelsValue');
134+
sinon.spy(slider, 'resetSlider');
135+
sinon.spy(slider, 'onLowHandleChange');
136+
sinon.spy(slider, 'onHighHandleChange');
137+
138+
scope.$broadcast('rzSliderForceRender');
139+
140+
slider.resetLabelsValue.called.should.be.true;
141+
slider.resetSlider.called.should.be.true;
142+
slider.onLowHandleChange.called.should.be.true;
143+
slider.onHighHandleChange.called.should.be.true;
144+
});
145+
});
146+
147+
/*
148+
******************************************************************************
149+
RzSliderOptions
150+
******************************************************************************
151+
*/
152+
describe('RzSliderOptions', function() {
153+
154+
it('should have a correct getOptions method that apply custom options', function() {
155+
var defaultOpts = RzSliderOptions.getOptions();
156+
var customOpts = {
157+
showTicks: true
158+
};
159+
160+
var expectedOpts = angular.extend({}, defaultOpts, customOpts);
161+
var options = RzSliderOptions.getOptions(customOpts);
162+
expect(options).to.deep.equal(expectedOpts);
163+
});
164+
165+
it('should have a correct options method to update the global options', function() {
166+
var defaultOpts = RzSliderOptions.getOptions();
167+
var globalOpts = {
168+
showTicks: true
169+
};
170+
RzSliderOptions.options(globalOpts);
171+
172+
var expectedOpts = angular.extend({}, defaultOpts, globalOpts);
173+
var options = RzSliderOptions.getOptions();
174+
expect(options).to.deep.equal(expectedOpts);
175+
});
53176
});
177+
178+
/*
179+
******************************************************************************
180+
Slider with ticks
181+
******************************************************************************
182+
*/
183+
describe('slider with ticks', function() {
184+
beforeEach(function() {
185+
var sliderConf = {
186+
value: 50,
187+
options: {
188+
floor: 0,
189+
ceil: 100,
190+
step: 10,
191+
showTicks: true
192+
}
193+
};
194+
createSlider(sliderConf);
195+
});
196+
197+
it('should create the correct number of ticks', function() {
198+
expect(element[0].querySelectorAll('.tick')).to.have.length(11);
199+
});
200+
});
201+
54202
/*
55203
******************************************************************************
56204
KEYBOARD CONTROLS
@@ -530,7 +678,10 @@ describe('rzslider - ', function() {
530678
function initSlider(sliderObj, template) {
531679
scope = $rootScope.$new();
532680
scope.slider = sliderObj;
681+
var parent = angular.element('<div style="width: 1000px"></div>');
533682
element = $compile(template)(scope);
683+
parent.append(element);
684+
angular.element(document).find('body').append(parent);
534685
scope.$apply();
535686
slider = element.isolateScope().slider;
536687
$timeout.flush();

0 commit comments

Comments
 (0)