Skip to content

Commit 1a4f999

Browse files
wagnermacielwagnermaciel
authored
test(material-experimental/mdc-slider): add change handler tests (#22478)
1 parent 0649866 commit 1a4f999

File tree

1 file changed

+282
-0
lines changed

1 file changed

+282
-0
lines changed

‎src/material-experimental/mdc-slider/slider.spec.ts

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -773,6 +773,253 @@ describe('MDC-based MatSlider' , () => {
773773
});
774774
});
775775

776+
describe('slider with change handler', () => {
777+
let sliderInstance: MatSlider;
778+
let inputInstance: MatSliderThumb;
779+
let sliderElement: HTMLElement;
780+
let fixture: ComponentFixture<SliderWithChangeHandler>;
781+
let testComponent: SliderWithChangeHandler;
782+
783+
beforeEach(waitForAsync(() => {
784+
fixture = createComponent(SliderWithChangeHandler);
785+
fixture.detectChanges();
786+
testComponent = fixture.debugElement.componentInstance;
787+
const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
788+
sliderElement = sliderDebugElement.nativeElement;
789+
sliderInstance = sliderDebugElement.componentInstance;
790+
inputInstance = sliderInstance._getInput(Thumb.END);
791+
}));
792+
793+
it('should emit change on mouseup', () => {
794+
expect(testComponent.onChange).not.toHaveBeenCalled();
795+
setValueByClick(sliderInstance, 20, platform.IOS);
796+
expect(testComponent.onChange).toHaveBeenCalledTimes(1);
797+
});
798+
799+
it('should emit change on slide', () => {
800+
expect(testComponent.onChange).not.toHaveBeenCalled();
801+
slideToValue(sliderInstance, 40, Thumb.END, platform.IOS);
802+
expect(testComponent.onChange).toHaveBeenCalledTimes(1);
803+
});
804+
805+
it('should not emit multiple changes for the same value', () => {
806+
expect(testComponent.onChange).not.toHaveBeenCalled();
807+
808+
setValueByClick(sliderInstance, 60, platform.IOS);
809+
slideToValue(sliderInstance, 60, Thumb.END, platform.IOS);
810+
setValueByClick(sliderInstance, 60, platform.IOS);
811+
slideToValue(sliderInstance, 60, Thumb.END, platform.IOS);
812+
813+
expect(testComponent.onChange).toHaveBeenCalledTimes(1);
814+
});
815+
816+
it('should dispatch events when changing back to previously emitted value after ' +
817+
'programmatically setting value', () => {
818+
const dispatchSliderEvent = (type: PointerEventType, value: number) => {
819+
const {x, y} = getCoordsForValue(sliderInstance, value);
820+
dispatchPointerOrTouchEvent(sliderElement, type, x, y, platform.IOS);
821+
};
822+
823+
expect(testComponent.onChange).not.toHaveBeenCalled();
824+
expect(testComponent.onInput).not.toHaveBeenCalled();
825+
826+
dispatchSliderEvent(PointerEventType.POINTER_DOWN, 20);
827+
fixture.detectChanges();
828+
829+
expect(testComponent.onChange).not.toHaveBeenCalled();
830+
expect(testComponent.onInput).toHaveBeenCalledTimes(1);
831+
832+
dispatchSliderEvent(PointerEventType.POINTER_UP, 20);
833+
fixture.detectChanges();
834+
835+
expect(testComponent.onChange).toHaveBeenCalledTimes(1);
836+
expect(testComponent.onInput).toHaveBeenCalledTimes(1);
837+
838+
inputInstance.value = 0;
839+
fixture.detectChanges();
840+
841+
expect(testComponent.onChange).toHaveBeenCalledTimes(1);
842+
expect(testComponent.onInput).toHaveBeenCalledTimes(1);
843+
844+
dispatchSliderEvent(PointerEventType.POINTER_DOWN, 20);
845+
fixture.detectChanges();
846+
dispatchSliderEvent(PointerEventType.POINTER_UP, 20);
847+
848+
expect(testComponent.onChange).toHaveBeenCalledTimes(2);
849+
expect(testComponent.onInput).toHaveBeenCalledTimes(2);
850+
});
851+
});
852+
853+
describe('range slider with change handlers', () => {
854+
let sliderInstance: MatSlider;
855+
let startInputInstance: MatSliderThumb;
856+
let endInputInstance: MatSliderThumb;
857+
let sliderElement: HTMLElement;
858+
let fixture: ComponentFixture<RangeSliderWithChangeHandler>;
859+
let testComponent: RangeSliderWithChangeHandler;
860+
861+
beforeEach(waitForAsync(() => {
862+
fixture = createComponent(RangeSliderWithChangeHandler);
863+
fixture.detectChanges();
864+
testComponent = fixture.debugElement.componentInstance;
865+
const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
866+
sliderElement = sliderDebugElement.nativeElement;
867+
sliderInstance = sliderDebugElement.componentInstance;
868+
startInputInstance = sliderInstance._getInput(Thumb.START);
869+
endInputInstance = sliderInstance._getInput(Thumb.END);
870+
}));
871+
872+
it('should emit change on mouseup on the start thumb', () => {
873+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
874+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
875+
setValueByClick(sliderInstance, 20, platform.IOS);
876+
expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1);
877+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
878+
});
879+
880+
it('should emit change on mouseup on the end thumb', () => {
881+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
882+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
883+
setValueByClick(sliderInstance, 80, platform.IOS);
884+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
885+
expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1);
886+
});
887+
888+
it('should emit change on start thumb slide', () => {
889+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
890+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
891+
slideToValue(sliderInstance, 40, Thumb.START, platform.IOS);
892+
expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1);
893+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
894+
});
895+
896+
it('should emit change on end thumb slide', () => {
897+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
898+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
899+
slideToValue(sliderInstance, 60, Thumb.END, platform.IOS);
900+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
901+
expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1);
902+
});
903+
904+
it('should not emit multiple changes for the same start thumb value', () => {
905+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
906+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
907+
908+
setValueByClick(sliderInstance, 30, platform.IOS);
909+
slideToValue(sliderInstance, 30, Thumb.START, platform.IOS);
910+
setValueByClick(sliderInstance, 30, platform.IOS);
911+
slideToValue(sliderInstance, 30, Thumb.START, platform.IOS);
912+
913+
expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1);
914+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
915+
});
916+
917+
it('should not emit multiple changes for the same end thumb value', () => {
918+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
919+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
920+
921+
setValueByClick(sliderInstance, 60, platform.IOS);
922+
slideToValue(sliderInstance, 60, Thumb.END, platform.IOS);
923+
setValueByClick(sliderInstance, 60, platform.IOS);
924+
slideToValue(sliderInstance, 60, Thumb.END, platform.IOS);
925+
926+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
927+
expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1);
928+
});
929+
930+
it('should dispatch events when changing back to previously emitted value after ' +
931+
'programmatically setting the start value', () => {
932+
const dispatchSliderEvent = (type: PointerEventType, value: number) => {
933+
const {x, y} = getCoordsForValue(sliderInstance, value);
934+
dispatchPointerOrTouchEvent(sliderElement, type, x, y, platform.IOS);
935+
};
936+
937+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
938+
expect(testComponent.onStartThumbInput).not.toHaveBeenCalled();
939+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
940+
expect(testComponent.onEndThumbInput).not.toHaveBeenCalled();
941+
942+
dispatchSliderEvent(PointerEventType.POINTER_DOWN, 20);
943+
fixture.detectChanges();
944+
945+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
946+
expect(testComponent.onStartThumbInput).toHaveBeenCalledTimes(1);
947+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
948+
expect(testComponent.onEndThumbInput).not.toHaveBeenCalled();
949+
950+
dispatchSliderEvent(PointerEventType.POINTER_UP, 20);
951+
fixture.detectChanges();
952+
953+
expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1);
954+
expect(testComponent.onStartThumbInput).toHaveBeenCalledTimes(1);
955+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
956+
expect(testComponent.onEndThumbInput).not.toHaveBeenCalled();
957+
958+
startInputInstance.value = 0;
959+
fixture.detectChanges();
960+
961+
expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1);
962+
expect(testComponent.onStartThumbInput).toHaveBeenCalledTimes(1);
963+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
964+
expect(testComponent.onEndThumbInput).not.toHaveBeenCalled();
965+
966+
dispatchSliderEvent(PointerEventType.POINTER_DOWN, 20);
967+
fixture.detectChanges();
968+
dispatchSliderEvent(PointerEventType.POINTER_UP, 20);
969+
970+
expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(2);
971+
expect(testComponent.onStartThumbInput).toHaveBeenCalledTimes(2);
972+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
973+
expect(testComponent.onEndThumbInput).not.toHaveBeenCalled();
974+
});
975+
976+
it('should dispatch events when changing back to previously emitted value after ' +
977+
'programmatically setting the end value', () => {
978+
const dispatchSliderEvent = (type: PointerEventType, value: number) => {
979+
const {x, y} = getCoordsForValue(sliderInstance, value);
980+
dispatchPointerOrTouchEvent(sliderElement, type, x, y, platform.IOS);
981+
};
982+
983+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
984+
expect(testComponent.onStartThumbInput).not.toHaveBeenCalled();
985+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
986+
expect(testComponent.onEndThumbInput).not.toHaveBeenCalled();
987+
988+
dispatchSliderEvent(PointerEventType.POINTER_DOWN, 80);
989+
fixture.detectChanges();
990+
991+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
992+
expect(testComponent.onStartThumbInput).not.toHaveBeenCalled();
993+
expect(testComponent.onEndThumbChange).not.toHaveBeenCalled();
994+
expect(testComponent.onEndThumbInput).toHaveBeenCalledTimes(1);
995+
996+
dispatchSliderEvent(PointerEventType.POINTER_UP, 80);
997+
fixture.detectChanges();
998+
999+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
1000+
expect(testComponent.onStartThumbInput).not.toHaveBeenCalled();
1001+
expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1);
1002+
expect(testComponent.onEndThumbInput).toHaveBeenCalledTimes(1);
1003+
1004+
endInputInstance.value = 100;
1005+
fixture.detectChanges();
1006+
1007+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
1008+
expect(testComponent.onStartThumbInput).not.toHaveBeenCalled();
1009+
expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1);
1010+
expect(testComponent.onEndThumbInput).toHaveBeenCalledTimes(1);
1011+
1012+
dispatchSliderEvent(PointerEventType.POINTER_DOWN, 80);
1013+
fixture.detectChanges();
1014+
dispatchSliderEvent(PointerEventType.POINTER_UP, 80);
1015+
1016+
expect(testComponent.onStartThumbChange).not.toHaveBeenCalled();
1017+
expect(testComponent.onStartThumbInput).not.toHaveBeenCalled();
1018+
expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(2);
1019+
expect(testComponent.onEndThumbInput).toHaveBeenCalledTimes(2);
1020+
});
1021+
});
1022+
7761023
describe('slider with ngModel', () => {
7771024
let fixture: ComponentFixture<SliderWithNgModel>;
7781025
let testComponent: SliderWithNgModel;
@@ -1104,6 +1351,41 @@ class RangeSliderWithOneWayBinding {
11041351
endValue = 75;
11051352
}
11061353

1354+
@Component({
1355+
template: `
1356+
<mat-slider>
1357+
<input (change)="onChange($event)" (input)="onInput($event)" matSliderThumb>
1358+
</mat-slider>
1359+
`,
1360+
})
1361+
class SliderWithChangeHandler {
1362+
onChange = jasmine.createSpy('onChange');
1363+
onInput = jasmine.createSpy('onChange');
1364+
@ViewChild(MatSlider) slider: MatSlider;
1365+
}
1366+
1367+
@Component({
1368+
template: `
1369+
<mat-slider>
1370+
<input
1371+
(change)="onStartThumbChange($event)"
1372+
(input)="onStartThumbInput($event)"
1373+
matSliderStartThumb>
1374+
<input
1375+
(change)="onEndThumbChange($event)"
1376+
(input)="onEndThumbInput($event)"
1377+
matSliderEndThumb>
1378+
</mat-slider>
1379+
`,
1380+
})
1381+
class RangeSliderWithChangeHandler {
1382+
onStartThumbChange = jasmine.createSpy('onStartThumbChange');
1383+
onStartThumbInput = jasmine.createSpy('onStartThumbInput');
1384+
onEndThumbChange = jasmine.createSpy('onEndThumbChange');
1385+
onEndThumbInput = jasmine.createSpy('onEndThumbInput');
1386+
@ViewChild(MatSlider) slider: MatSlider;
1387+
}
1388+
11071389
@Component({
11081390
template: `
11091391
<mat-slider>

0 commit comments

Comments
 (0)