fix(material-experimental/mdc-slider): fix ios unit test bug

* use touch events instead of pointer events when testing on ios.
  pointerdown, pointerup, and pointermove are not supported on ios.

Author: wagnermaciel

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

@@ -65,6 +65,7 @@ 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/cdk/testing/testbed/fake-events/event-objects.ts

@@ -79,11 +79,11 @@ export function createPointerEvent(type: string, clientX = 0, clientY = 0,
  * Creates a browser TouchEvent with the specified pointer coordinates.
  * @docs-private
  */
-export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
+export function createTouchEvent(type: string, pageX = 0, pageY = 0, clientX = 0, clientY = 0) {
   // In favor of creating events that work for most of the browsers, the event is created
   // as a basic UI Event. The necessary details for the event will be set manually.
   const event = document.createEvent('UIEvent');
-  const touchDetails = {pageX, pageY};
+  const touchDetails = {pageX, pageY, clientX, clientY};
 
   // TS3.6 removes the initUIEvent method and suggests porting to "new UIEvent()".
   (event as any).initUIEvent(type, true, true, window, 0);

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

@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {dispatchMouseEvent, dispatchPointerEvent} from '@angular/cdk/testing/private';
+import {Platform} from '@angular/cdk/platform';
+import {
+  dispatchMouseEvent,
+  dispatchPointerEvent,
+  dispatchTouchEvent,
+} from '@angular/cdk/testing/private';
 import {Component, DebugElement, Type} from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -15,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');
   });
@@ -49,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);
     });
   });
@@ -99,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);
     });
   });
@@ -182,11 +190,15 @@ describe('MDC-based MatSlider' , () => {
     }
 
     function pointerdown() {
-      dispatchPointerEvent(thumbElement, 'pointerdown', thumbX, thumbY);
+      dispatchPointerOrTouchEvent(
+        thumbElement, PointerEventType.POINTER_DOWN, thumbX, thumbY, platform.IOS
+      );
     }
 
     function pointerup() {
-      dispatchPointerEvent(thumbElement, 'pointerup', thumbX, thumbY);
+      dispatchPointerOrTouchEvent(
+        thumbElement, PointerEventType.POINTER_UP, thumbX, thumbY, platform.IOS
+      );
     }
 
     it('should show the hover ripple on mouseenter', fakeAsync(() => {
@@ -289,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);
 
@@ -299,12 +325,12 @@ function setValueByClick(slider: MatSlider, value: number) {
   const x = left + (width * percent);
   const y = top + (height / 2);
 
-  dispatchPointerEvent(sliderElement, 'pointerdown', x, y);
-  dispatchPointerEvent(sliderElement, 'pointerup', 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);
 
@@ -320,7 +346,29 @@ function slideToValue(slider: MatSlider, value: number, thumbPosition: Thumb = T
   const endX = sliderDimensions.left + (sliderDimensions.width * percent);
   const endY = sliderDimensions.top + (sliderDimensions.height / 2);
 
-  dispatchPointerEvent(sliderElement, 'pointerdown', startX, startY);
-  dispatchPointerEvent(sliderElement, 'pointermove', endX, endY);
-  dispatchPointerEvent(sliderElement, 'pointerup', 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, isIOS: boolean) {
+  if (isIOS) {
+    dispatchTouchEvent(node, pointerEventTypeToTouchEventType(type), x, y, x, y);
+  } else {
+    dispatchPointerEvent(node, type, x, y);
+  }
+}
+
+/** Returns the touch event equivalent of the given pointer event. */
+function pointerEventTypeToTouchEventType(pointerEventType: PointerEventType) {
+  switch (pointerEventType) {
+    case PointerEventType.POINTER_DOWN:
+      return TouchEventType.TOUCH_START;
+    case PointerEventType.POINTER_UP:
+      return TouchEventType.TOUCH_END;
+    case PointerEventType.POINTER_MOVE:
+      return TouchEventType.TOUCH_MOVE;
+  }
 }