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

* try checking if pointer events are supported and use touch events if they are not (ios unit test bug).

Author: wagnermaciel

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,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {dispatchMouseEvent, dispatchPointerEvent} from '@angular/cdk/testing/private';
+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';
@@ -182,11 +182,11 @@ describe('MDC-based MatSlider' , () => {
     }
 
     function pointerdown() {
-      dispatchPointerEvent(thumbElement, 'pointerdown', thumbX, thumbY);
+      dispatchPointerOrTouchEvent(thumbElement, PointerEventType.POINTER_DOWN, thumbX, thumbY);
     }
 
     function pointerup() {
-      dispatchPointerEvent(thumbElement, 'pointerup', thumbX, thumbY);
+      dispatchPointerOrTouchEvent(thumbElement, PointerEventType.POINTER_UP, thumbX, thumbY);
     }
 
     it('should show the hover ripple on mouseenter', fakeAsync(() => {
@@ -299,8 +299,8 @@ 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);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_UP, x, y);
 }
 
 /** Slides the MatSlider's thumb to the given value. */
@@ -320,7 +320,42 @@ 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);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_MOVE, endX, endY);
+  dispatchPointerOrTouchEvent(sliderElement, PointerEventType.POINTER_UP, endX, endY);
+}
+
+/** 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);
+  } else {
+    dispatchTouchEvent(node, pointerEventTypeToTouchEventType(type), x, y);
+  }
+}
+
+/** The pointer event types used by the MDC Slider. */
+enum PointerEventType {
+  POINTER_DOWN = 'pointerdown',
+  POINTER_UP = 'pointerup',
+  POINTER_MOVE = 'pointermove',
+}
+
+/** The touch event types used by the MDC Slider. */
+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) {
+    case PointerEventType.POINTER_DOWN:
+      return TouchEventType.TOUCH_START;
+    case PointerEventType.POINTER_UP:
+      return TouchEventType.TOUCH_END;
+    case PointerEventType.POINTER_MOVE:
+      return TouchEventType.TOUCH_MOVE;
+  }
 }