From 695fc3bd4fb283e2b5970b73dd67fd9f1bab43e2 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Wed, 14 Apr 2021 12:30:14 -0700 Subject: [PATCH 1/2] test(material-experimental/mdc-slider): add input handler tests --- .../mdc-slider/slider.e2e.spec.ts | 2 - .../mdc-slider/slider.spec.ts | 148 ++++++++++++++++++ 2 files changed, 148 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts index d6aca9fdd198..d0a2a25a0a49 100644 --- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts +++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts @@ -57,9 +57,7 @@ describe('MDC-based MatSlider' , () => { }); it('should update the end thumb value on slide', async () => { - console.log('value:', await getSliderValue(slider, Thumb.END)); await slideToValue(slider, 55, Thumb.END); - console.log('value:', await getSliderValue(slider, Thumb.END)); expect(await getSliderValue(slider, Thumb.END)).toBe(55); }); diff --git a/src/material-experimental/mdc-slider/slider.spec.ts b/src/material-experimental/mdc-slider/slider.spec.ts index abed47f16a2a..327f9b719531 100644 --- a/src/material-experimental/mdc-slider/slider.spec.ts +++ b/src/material-experimental/mdc-slider/slider.spec.ts @@ -1020,6 +1020,154 @@ describe('MDC-based MatSlider' , () => { }); }); + describe('slider with input event', () => { + let sliderInstance: MatSlider; + let sliderElement: HTMLElement; + let testComponent: SliderWithChangeHandler; + + beforeEach(waitForAsync(() => { + const fixture = createComponent(SliderWithChangeHandler); + fixture.detectChanges(); + + testComponent = fixture.debugElement.componentInstance; + + const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + sliderInstance = sliderDebugElement.componentInstance; + sliderElement = sliderInstance._elementRef.nativeElement; + })); + + it('should emit an input event while sliding', () => { + const dispatchSliderEvent = (type: PointerEventType, value: number) => { + const {x, y} = getCoordsForValue(sliderInstance, value); + dispatchPointerOrTouchEvent(sliderElement, type, x, y, platform.IOS); + }; + + expect(testComponent.onChange).not.toHaveBeenCalled(); + expect(testComponent.onInput).not.toHaveBeenCalled(); + + // pointer down on current value (should not trigger input event) + dispatchSliderEvent(PointerEventType.POINTER_DOWN, 0); + + // value changes (should trigger input) + dispatchSliderEvent(PointerEventType.POINTER_MOVE, 10); + dispatchSliderEvent(PointerEventType.POINTER_MOVE, 25); + + // a new value has been committed (should trigger change event) + dispatchSliderEvent(PointerEventType.POINTER_UP, 25); + + fixture.detectChanges(); + expect(testComponent.onInput).toHaveBeenCalledTimes(2); + expect(testComponent.onChange).toHaveBeenCalledTimes(1); + }); + + it('should emit an input event when clicking', () => { + expect(testComponent.onChange).not.toHaveBeenCalled(); + expect(testComponent.onInput).not.toHaveBeenCalled(); + setValueByClick(sliderInstance, 75, platform.IOS); + expect(testComponent.onInput).toHaveBeenCalledTimes(1); + expect(testComponent.onChange).toHaveBeenCalledTimes(1); + }); + }); + + describe('range slider with input event', () => { + let sliderInstance: MatSlider; + let sliderElement: HTMLElement; + let testComponent: RangeSliderWithChangeHandler; + + beforeEach(waitForAsync(() => { + const fixture = createComponent(RangeSliderWithChangeHandler); + fixture.detectChanges(); + + testComponent = fixture.debugElement.componentInstance; + + const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + sliderInstance = sliderDebugElement.componentInstance; + sliderElement = sliderInstance._elementRef.nativeElement; + })); + + it('should emit an input event while sliding the start thumb', () => { + const dispatchSliderEvent = (type: PointerEventType, value: number) => { + const {x, y} = getCoordsForValue(sliderInstance, value); + dispatchPointerOrTouchEvent(sliderElement, type, x, y, platform.IOS); + }; + + expect(testComponent.onStartThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onStartThumbInput).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbInput).not.toHaveBeenCalled(); + + // pointer down on current start thumb value (should not trigger input event) + dispatchSliderEvent(PointerEventType.POINTER_DOWN, 0); + + // value changes (should trigger input) + dispatchSliderEvent(PointerEventType.POINTER_MOVE, 10); + dispatchSliderEvent(PointerEventType.POINTER_MOVE, 25); + + // a new value has been committed (should trigger change event) + dispatchSliderEvent(PointerEventType.POINTER_UP, 25); + + expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1); + expect(testComponent.onStartThumbInput).toHaveBeenCalledTimes(2); + expect(testComponent.onEndThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbInput).not.toHaveBeenCalled(); + }); + + it('should emit an input event while sliding the end thumb', () => { + const dispatchSliderEvent = (type: PointerEventType, value: number) => { + const {x, y} = getCoordsForValue(sliderInstance, value); + dispatchPointerOrTouchEvent(sliderElement, type, x, y, platform.IOS); + }; + + expect(testComponent.onStartThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onStartThumbInput).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbInput).not.toHaveBeenCalled(); + + // pointer down on current end thumb value (should not trigger input event) + dispatchSliderEvent(PointerEventType.POINTER_DOWN, 100); + + // value changes (should trigger input) + dispatchSliderEvent(PointerEventType.POINTER_MOVE, 90); + dispatchSliderEvent(PointerEventType.POINTER_MOVE, 55); + + // a new value has been committed (should trigger change event) + dispatchSliderEvent(PointerEventType.POINTER_UP, 55); + + expect(testComponent.onStartThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onStartThumbInput).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1); + expect(testComponent.onEndThumbInput).toHaveBeenCalledTimes(2); + }); + + it('should emit an input event on the start thumb when clicking near it', () => { + expect(testComponent.onStartThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onStartThumbInput).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbInput).not.toHaveBeenCalled(); + + setValueByClick(sliderInstance, 30, platform.IOS); + + expect(testComponent.onStartThumbChange).toHaveBeenCalledTimes(1); + expect(testComponent.onStartThumbInput).toHaveBeenCalledTimes(1); + expect(testComponent.onEndThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbInput).not.toHaveBeenCalled(); + }); + + it('should emit an input event on the end thumb when clicking near it', () => { + expect(testComponent.onStartThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onStartThumbInput).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbInput).not.toHaveBeenCalled(); + + setValueByClick(sliderInstance, 55, platform.IOS); + + expect(testComponent.onStartThumbChange).not.toHaveBeenCalled(); + expect(testComponent.onStartThumbInput).not.toHaveBeenCalled(); + expect(testComponent.onEndThumbChange).toHaveBeenCalledTimes(1); + expect(testComponent.onEndThumbInput).toHaveBeenCalledTimes(1); + }); + }); + describe('slider with ngModel', () => { let fixture: ComponentFixture; let testComponent: SliderWithNgModel; From a98ac4419ef4440e554234e23a45151a9a8fe2d6 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Wed, 14 Apr 2021 12:42:48 -0700 Subject: [PATCH 2/2] fixup! test(material-experimental/mdc-slider): add input handler tests --- src/material-experimental/mdc-slider/slider.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material-experimental/mdc-slider/slider.spec.ts b/src/material-experimental/mdc-slider/slider.spec.ts index 327f9b719531..05cba21cc314 100644 --- a/src/material-experimental/mdc-slider/slider.spec.ts +++ b/src/material-experimental/mdc-slider/slider.spec.ts @@ -1055,7 +1055,6 @@ describe('MDC-based MatSlider' , () => { // a new value has been committed (should trigger change event) dispatchSliderEvent(PointerEventType.POINTER_UP, 25); - fixture.detectChanges(); expect(testComponent.onInput).toHaveBeenCalledTimes(2); expect(testComponent.onChange).toHaveBeenCalledTimes(1); });