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

Skip to content

Commit 52c12dc

Browse files
author
Valentin Hervieu
committed
test: Add tests for accessibility and callbacks.
Also simplified updateHandles method which was covering some useless cases.
1 parent d3ee61d commit 52c12dc

File tree

2 files changed

+260
-24
lines changed

2 files changed

+260
-24
lines changed

‎src/rzslider.js

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -291,10 +291,10 @@
291291
this.applyOptions();
292292
this.initElemHandles();
293293
this.manageElementsStyle();
294-
this.addAccessibility();
295294
this.setDisabledState();
296295
this.calcViewDimensions();
297296
this.setMinAndMax();
297+
this.addAccessibility();
298298

299299
$timeout(function() {
300300
self.updateCeilLab();
@@ -843,34 +843,15 @@
843843
* @param {number} newOffset
844844
*/
845845
updateHandles: function(which, newOffset) {
846-
if (which === 'rzSliderModel') {
846+
if (which === 'rzSliderModel')
847847
this.updateLowHandle(newOffset);
848-
this.updateSelectionBar();
849-
this.updateTicksScale();
850-
851-
if (this.range) {
852-
this.updateCmbLabel();
853-
}
854-
return;
855-
}
856-
857-
if (which === 'rzSliderHigh') {
848+
else if (which === 'rzSliderHigh')
858849
this.updateHighHandle(newOffset);
859-
this.updateSelectionBar();
860-
this.updateTicksScale();
861850

862-
if (this.range) {
863-
this.updateCmbLabel();
864-
}
865-
return;
866-
}
867-
868-
// Update both
869-
this.updateLowHandle(newOffset);
870-
this.updateHighHandle(newOffset);
871851
this.updateSelectionBar();
872852
this.updateTicksScale();
873-
this.updateCmbLabel();
853+
if (this.range)
854+
this.updateCmbLabel();
874855
},
875856

876857
/**

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

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,51 @@ describe('rzslider - ', function() {
396396
createRangeSlider(sliderConf);
397397
expect(slider.maxValue).to.equal(100);
398398
});
399+
400+
it('should call the correct callback for onStart', function() {
401+
var sliderConf = {
402+
value: 10,
403+
options: {
404+
id: 'test',
405+
onStart: sinon.spy()
406+
}
407+
};
408+
createSlider(sliderConf);
409+
410+
slider.callOnStart();
411+
$timeout.flush();
412+
sliderConf.options.onStart.calledWith('test').should.be.true;
413+
});
414+
415+
it('should call the correct callback for onChange', function() {
416+
var sliderConf = {
417+
value: 10,
418+
options: {
419+
id: 'test',
420+
onChange: sinon.spy()
421+
}
422+
};
423+
createSlider(sliderConf);
424+
425+
slider.callOnChange();
426+
$timeout.flush();
427+
sliderConf.options.onChange.calledWith('test').should.be.true;
428+
});
429+
430+
it('should call the correct callback for onEnd', function() {
431+
var sliderConf = {
432+
value: 10,
433+
options: {
434+
id: 'test',
435+
onEnd: sinon.spy()
436+
}
437+
};
438+
createSlider(sliderConf);
439+
440+
slider.callOnEnd();
441+
$timeout.flush();
442+
sliderConf.options.onEnd.calledWith('test').should.be.true;
443+
});
399444
});
400445
});
401446

@@ -436,6 +481,216 @@ describe('rzslider - ', function() {
436481
});
437482
});
438483

484+
485+
/*
486+
******************************************************************************
487+
Slider with ticks
488+
******************************************************************************
489+
*/
490+
describe('accessibility - ', function() {
491+
it('should have accessible horizontal single slider', function() {
492+
var sliderConf = {
493+
value: 10,
494+
options: {
495+
floor: 0,
496+
ceil: 100,
497+
step: 10
498+
}
499+
};
500+
createSlider(sliderConf);
501+
expect(slider.minH.attr('role')).to.equal('slider');
502+
expect(slider.minH.attr('tabindex')).to.equal('0');
503+
expect(slider.minH.attr('aria-valuenow')).to.equal('10');
504+
expect(slider.minH.attr('aria-valuetext')).to.equal('10');
505+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
506+
expect(slider.minH.attr('aria-valuemax')).to.equal('100');
507+
508+
scope.slider.value = 20;
509+
scope.$digest();
510+
expect(slider.minH.attr('aria-valuenow')).to.equal('20');
511+
expect(slider.minH.attr('aria-valuetext')).to.equal('20');
512+
});
513+
514+
it('should have accessible vertical single slider', function() {
515+
var sliderConf = {
516+
value: 10,
517+
options: {
518+
floor: 0,
519+
ceil: 100,
520+
step: 10,
521+
vertical: true
522+
}
523+
};
524+
createSlider(sliderConf);
525+
expect(slider.minH.attr('role')).to.equal('slider');
526+
expect(slider.minH.attr('tabindex')).to.equal('0');
527+
expect(slider.minH.attr('aria-orientation')).to.equal('vertical');
528+
expect(slider.minH.attr('aria-valuenow')).to.equal('10');
529+
expect(slider.minH.attr('aria-valuetext')).to.equal('10');
530+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
531+
expect(slider.minH.attr('aria-valuemax')).to.equal('100');
532+
533+
scope.slider.value = 20;
534+
scope.$digest();
535+
expect(slider.minH.attr('aria-valuenow')).to.equal('20');
536+
expect(slider.minH.attr('aria-valuetext')).to.equal('20');
537+
});
538+
539+
it('should have accessible horizontal range slider', function() {
540+
var sliderConf = {
541+
min: 10,
542+
max: 90,
543+
options: {
544+
floor: 0,
545+
ceil: 100,
546+
step: 10
547+
}
548+
};
549+
createRangeSlider(sliderConf);
550+
expect(slider.minH.attr('role')).to.equal('slider');
551+
expect(slider.minH.attr('tabindex')).to.equal('0');
552+
expect(slider.minH.attr('aria-valuenow')).to.equal('10');
553+
expect(slider.minH.attr('aria-valuetext')).to.equal('10');
554+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
555+
expect(slider.minH.attr('aria-valuemax')).to.equal('100');
556+
expect(slider.maxH.attr('role')).to.equal('slider');
557+
expect(slider.maxH.attr('tabindex')).to.equal('0');
558+
expect(slider.maxH.attr('aria-valuenow')).to.equal('90');
559+
expect(slider.maxH.attr('aria-valuetext')).to.equal('90');
560+
expect(slider.maxH.attr('aria-valuemin')).to.equal('0');
561+
expect(slider.maxH.attr('aria-valuemax')).to.equal('100');
562+
563+
scope.slider.min = 20;
564+
scope.$digest();
565+
expect(slider.minH.attr('aria-valuenow')).to.equal('20');
566+
expect(slider.minH.attr('aria-valuetext')).to.equal('20');
567+
568+
scope.slider.max = 80;
569+
scope.$digest();
570+
expect(slider.maxH.attr('aria-valuenow')).to.equal('80');
571+
expect(slider.maxH.attr('aria-valuetext')).to.equal('80');
572+
});
573+
574+
it('should have accessible vertical range slider', function() {
575+
var sliderConf = {
576+
min: 10,
577+
max: 90,
578+
options: {
579+
floor: 0,
580+
ceil: 100,
581+
step: 10,
582+
vertical: true
583+
}
584+
};
585+
createRangeSlider(sliderConf);
586+
expect(slider.minH.attr('role')).to.equal('slider');
587+
expect(slider.minH.attr('tabindex')).to.equal('0');
588+
expect(slider.minH.attr('aria-orientation')).to.equal('vertical');
589+
expect(slider.minH.attr('aria-valuenow')).to.equal('10');
590+
expect(slider.minH.attr('aria-valuetext')).to.equal('10');
591+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
592+
expect(slider.minH.attr('aria-valuemax')).to.equal('100');
593+
expect(slider.maxH.attr('role')).to.equal('slider');
594+
expect(slider.maxH.attr('tabindex')).to.equal('0');
595+
expect(slider.maxH.attr('aria-orientation')).to.equal('vertical');
596+
expect(slider.maxH.attr('aria-valuenow')).to.equal('90');
597+
expect(slider.maxH.attr('aria-valuetext')).to.equal('90');
598+
expect(slider.maxH.attr('aria-valuemin')).to.equal('0');
599+
expect(slider.maxH.attr('aria-valuemax')).to.equal('100');
600+
601+
scope.slider.min = 20;
602+
scope.$digest();
603+
expect(slider.minH.attr('aria-valuenow')).to.equal('20');
604+
expect(slider.minH.attr('aria-valuetext')).to.equal('20');
605+
606+
scope.slider.max = 80;
607+
scope.$digest();
608+
expect(slider.maxH.attr('aria-valuenow')).to.equal('80');
609+
expect(slider.maxH.attr('aria-valuetext')).to.equal('80');
610+
});
611+
612+
it('should have accessible horizontal single slider when keyboardSupport is false', function() {
613+
var sliderConf = {
614+
value: 10,
615+
options: {
616+
floor: 0,
617+
ceil: 100,
618+
step: 10,
619+
keyboardSupport: false
620+
}
621+
};
622+
createSlider(sliderConf);
623+
expect(slider.minH.attr('role')).to.equal('slider');
624+
expect(slider.minH.attr('tabindex')).to.equal('');
625+
expect(slider.minH.attr('aria-valuenow')).to.equal('10');
626+
expect(slider.minH.attr('aria-valuetext')).to.equal('10');
627+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
628+
expect(slider.minH.attr('aria-valuemax')).to.equal('100');
629+
630+
scope.slider.value = 20;
631+
scope.$digest();
632+
expect(slider.minH.attr('aria-valuenow')).to.equal('20');
633+
expect(slider.minH.attr('aria-valuetext')).to.equal('20');
634+
});
635+
636+
it('should have accessible horizontal range slider when keyboardSupport is false', function() {
637+
var sliderConf = {
638+
min: 10,
639+
max: 90,
640+
options: {
641+
floor: 0,
642+
ceil: 100,
643+
step: 10,
644+
keyboardSupport: false
645+
}
646+
};
647+
createRangeSlider(sliderConf);
648+
expect(slider.minH.attr('role')).to.equal('slider');
649+
expect(slider.minH.attr('tabindex')).to.equal('');
650+
expect(slider.minH.attr('aria-valuenow')).to.equal('10');
651+
expect(slider.minH.attr('aria-valuetext')).to.equal('10');
652+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
653+
expect(slider.minH.attr('aria-valuemax')).to.equal('100');
654+
expect(slider.maxH.attr('role')).to.equal('slider');
655+
expect(slider.maxH.attr('tabindex')).to.equal('');
656+
expect(slider.maxH.attr('aria-valuenow')).to.equal('90');
657+
expect(slider.maxH.attr('aria-valuetext')).to.equal('90');
658+
expect(slider.maxH.attr('aria-valuemin')).to.equal('0');
659+
expect(slider.maxH.attr('aria-valuemax')).to.equal('100');
660+
661+
scope.slider.min = 20;
662+
scope.$digest();
663+
expect(slider.minH.attr('aria-valuenow')).to.equal('20');
664+
expect(slider.minH.attr('aria-valuetext')).to.equal('20');
665+
666+
scope.slider.max = 80;
667+
scope.$digest();
668+
expect(slider.maxH.attr('aria-valuenow')).to.equal('80');
669+
expect(slider.maxH.attr('aria-valuetext')).to.equal('80');
670+
});
671+
672+
it('should have accessible slider when values are text', function() {
673+
var sliderConf = {
674+
value: 1,
675+
options: {
676+
stepsArray: ['A', 'B', 'C']
677+
}
678+
};
679+
createSlider(sliderConf);
680+
expect(slider.minH.attr('role')).to.equal('slider');
681+
expect(slider.minH.attr('tabindex')).to.equal('0');
682+
expect(slider.minH.attr('aria-valuenow')).to.equal('1');
683+
expect(slider.minH.attr('aria-valuetext')).to.equal('B');
684+
expect(slider.minH.attr('aria-valuemin')).to.equal('0');
685+
expect(slider.minH.attr('aria-valuemax')).to.equal('2');
686+
687+
scope.slider.value = 2;
688+
scope.$digest();
689+
expect(slider.minH.attr('aria-valuenow')).to.equal('2');
690+
expect(slider.minH.attr('aria-valuetext')).to.equal('C');
691+
});
692+
});
693+
439694
/*
440695
******************************************************************************
441696
Slider with ticks

0 commit comments

Comments
 (0)