fixup! fix(material-experimental/mdc-slider): code review changes

Author: wagnermaciel

src/cdk/testing/testbed/fake-events/dispatch-events.ts

@@ -65,6 +65,6 @@ export function dispatchPointerEvent(node: Node, type: string, clientX = 0, clie
  * Shorthand to dispatch a touch event on the specified coordinates.
  * @docs-private
  */
-export function dispatchTouchEvent(node: Node, type: string, x = 0, y = 0) {
-  return dispatchEvent(node, createTouchEvent(type, x, y));
+export function dispatchTouchEvent(node: Node, type: string, pageX = 0, pageY = 0, clientX = 0, clientY = 0) {
+  return dispatchEvent(node, createTouchEvent(type, pageX, pageY, clientX, clientY));
 }

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Platform} from '@angular/cdk/platform';
 import {
   dispatchMouseEvent,
   dispatchPointerEvent,
@@ -19,7 +20,10 @@ import {MatSliderModule} from './module';
 import {MatSlider, MatSliderThumb, MatSliderVisualThumb} from './slider';
 
 describe('MDC-based MatSlider' , () => {
+  let platform: Platform;
+
   beforeAll(() => {
+    platform = TestBed.inject(Platform);
     // Mock #setPointerCapture as it throws errors on pointerdown without a real pointerId.
     spyOn(Element.prototype, 'setPointerCapture');
   });
@@ -53,28 +57,28 @@ describe('MDC-based MatSlider' , () => {
     });
 
     it('should update the value on mousedown', () => {
-      setValueByClick(sliderInstance, 19);
+      setValueByClick(sliderInstance, 19, platform.IOS);
       expect(inputInstance.value).toBe(19);
     });
 
     it('should update the value on a slide', () => {
-      slideToValue(sliderInstance, 77);
+      slideToValue(sliderInstance, 77, Thumb.END, platform.IOS);
       expect(inputInstance.value).toBe(77);
     });
 
     it('should set the value as min when sliding before the track', () => {
-      slideToValue(sliderInstance, -1);
+      slideToValue(sliderInstance, -1, Thumb.END, platform.IOS);
       expect(inputInstance.value).toBe(0);
     });
 
     it('should set the value as max when sliding past the track', () => {
-      slideToValue(sliderInstance, 101);
+      slideToValue(sliderInstance, 101, Thumb.END, platform.IOS);
       expect(inputInstance.value).toBe(100);
     });
 
     it('should focus the slider input when clicking on the slider', () => {
       expect(document.activeElement).not.toBe(inputInstance._hostElement);
-      setValueByClick(sliderInstance, 0);
+      setValueByClick(sliderInstance, 0, platform.IOS);
       expect(document.activeElement).toBe(inputInstance._hostElement);
     });
   });
@@ -103,46 +107,46 @@ describe('MDC-based MatSlider' , () => {
     });
 
     it('should update the start value on a slide', () => {
-      slideToValue(sliderInstance, 19, Thumb.START);
+      slideToValue(sliderInstance, 19, Thumb.START, platform.IOS);
       expect(startInputInstance.value).toBe(19);
     });
 
     it('should update the end value on a slide', () => {
-      slideToValue(sliderInstance, 27, Thumb.END);
+      slideToValue(sliderInstance, 27, Thumb.END, platform.IOS);
       expect(endInputInstance.value).toBe(27);
     });
 
     it('should update the start value on mousedown behind the start thumb', () => {
       sliderInstance._setValue(19, Thumb.START);
-      setValueByClick(sliderInstance, 12);
+      setValueByClick(sliderInstance, 12, platform.IOS);
       expect(startInputInstance.value).toBe(12);
     });
 
     it('should update the end value on mousedown in front of the end thumb', () => {
       sliderInstance._setValue(27, Thumb.END);
-      setValueByClick(sliderInstance, 55);
+      setValueByClick(sliderInstance, 55, platform.IOS);
       expect(endInputInstance.value).toBe(55);
     });
 
     it('should set the start value as min when sliding before the track', () => {
-      slideToValue(sliderInstance, -1, Thumb.START);
+      slideToValue(sliderInstance, -1, Thumb.START, platform.IOS);
       expect(startInputInstance.value).toBe(0);
     });
 
     it('should set the end value as max when sliding past the track', () => {
-      slideToValue(sliderInstance, 101, Thumb.START);
+      slideToValue(sliderInstance, 101, Thumb.START, platform.IOS);
       expect(startInputInstance.value).toBe(100);
     });
 
     it('should not let the start thumb slide past the end thumb', () => {
       sliderInstance._setValue(50, Thumb.END);
-      slideToValue(sliderInstance, 75, Thumb.START);
+      slideToValue(sliderInstance, 75, Thumb.START, platform.IOS);
       expect(startInputInstance.value).toBe(50);
     });
 
     it('should not let the end thumb slide before the start thumb', () => {
       sliderInstance._setValue(50, Thumb.START);
-      slideToValue(sliderInstance, 25, Thumb.END);
+      slideToValue(sliderInstance, 25, Thumb.END, platform.IOS);
       expect(startInputInstance.value).toBe(50);
     });
   });
@@ -186,11 +190,15 @@ describe('MDC-based MatSlider' , () => {
     }
 
     function pointerdown() {
-      dispatchPointerOrTouchEvent(thumbElement, PointerEventType.POINTER_DOWN, thumbX, thumbY);
+      dispatchPointerOrTouchEvent(
+        thumbElement, PointerEventType.POINTER_DOWN, thumbX, thumbY, platform.IOS
+      );
     }
 
     function pointerup() {
-      dispatchPointerOrTouchEvent(thumbElement, PointerEventType.POINTER_UP, thumbX, thumbY);
+      dispatchPointerOrTouchEvent(
+        thumbElement, PointerEventType.POINTER_UP, thumbX, thumbY, platform.IOS
+      );
     }
 
     it('should show the hover ripple on mouseenter', fakeAsync(() => {
@@ -293,8 +301,22 @@ class StandardSlider {}
 })
 class StandardRangeSlider {}
 
+/** The pointer event types used by the MDC Slider. */
+const enum PointerEventType {
+  POINTER_DOWN = 'pointerdown',
+  POINTER_UP = 'pointerup',
+  POINTER_MOVE = 'pointermove',
+}
+
+/** The touch event types used by the MDC Slider. */
+const enum TouchEventType {
+  TOUCH_START = 'touchstart',
+  TOUCH_END = 'touchend',
+  TOUCH_MOVE = 'touchmove',
+}
+
 /** Clicks on the MatSlider at the coordinates corresponding to the given value. */
-function setValueByClick(slider: MatSlider, value: number) {
+function setValueByClick(slider: MatSlider, value: number, isIOS: boolean) {
   const {min, max} = slider;
   const percent = (value - min) / (max - min);
 
@@ -303,12 +325,12 @@ function setValueByClick(slider: MatSlider, value: number) {
   const x = left + (width * percent);
   const y = top + (height / 2);
 
-  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_DOWN, x, y);
-  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_UP, x, y);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_DOWN, x, y, isIOS);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_UP, x, y, isIOS);
 }
 
 /** Slides the MatSlider's thumb to the given value. */
-function slideToValue(slider: MatSlider, value: number, thumbPosition: Thumb = Thumb.END) {
+function slideToValue(slider: MatSlider, value: number, thumbPosition: Thumb, isIOS: boolean) {
   const {min, max} = slider;
   const percent = (value - min) / (max - min);
 
@@ -324,34 +346,21 @@ function slideToValue(slider: MatSlider, value: number, thumbPosition: Thumb = T
   const endX = sliderDimensions.left + (sliderDimensions.width * percent);
   const endY = sliderDimensions.top + (sliderDimensions.height / 2);
 
-  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_DOWN, startX, startY);
-  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_MOVE, endX, endY);
-  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_UP, endX, endY);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_DOWN, startX, startY, isIOS);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_MOVE, endX, endY, isIOS);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_UP, endX, endY, isIOS);
 }
 
 /** Dispatch a pointerdown or pointerup event if supported, otherwise dispatch the touch event. */
-function dispatchPointerOrTouchEvent(node: Node, type: PointerEventType, x?: number, y?: number) {
-  if (typeof PointerEvent !== 'undefined' && PointerEvent) {
-    dispatchPointerEvent(node, type, x, y);
+function dispatchPointerOrTouchEvent(
+  node: Node, type: PointerEventType, x: number, y: number, isIOS: boolean) {
+  if (isIOS) {
+    dispatchTouchEvent(node, pointerEventTypeToTouchEventType(type), x, y, x, y);
   } else {
-    dispatchTouchEvent(node, pointerEventTypeToTouchEventType(type), x, y);
+    dispatchPointerEvent(node, type, x, y);
   }
 }
 
-/** The pointer event types used by the MDC Slider. */
-const enum PointerEventType {
-  POINTER_DOWN = 'pointerdown',
-  POINTER_UP = 'pointerup',
-  POINTER_MOVE = 'pointermove',
-}
-
-/** The touch event types used by the MDC Slider. */
-const enum TouchEventType {
-  TOUCH_START = 'touchstart',
-  TOUCH_END = 'touchend',
-  TOUCH_MOVE = 'touchmove',
-}
-
 /** Returns the touch event equivalent of the given pointer event. */
 function pointerEventTypeToTouchEventType(pointerEventType: PointerEventType) {
   switch (pointerEventType) {