feat(cdk/testing/testbed): emit pointer events for test element click

Currently, test elements for the testbed harness environment only
emit `mousedown` and `mouseup` events when a click is simulated.

Authors of components technically could already rely on the
more convenient pointer events. To handle this, we also emit
pointer events similar to what actual browsers do.

Author: devversion

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

@@ -11,6 +11,7 @@ import {
   createFakeEvent,
   createKeyboardEvent,
   createMouseEvent,
+  createPointerEvent,
   createTouchEvent,
 } from './event-objects';
 
@@ -49,6 +50,15 @@ export function dispatchMouseEvent(node: Node, type: string, clientX = 0, client
   return dispatchEvent(node, createMouseEvent(type, clientX, clientY));
 }
 
+/**
+ * Shorthand to dispatch a pointer event on the specified coordinates.
+ * @docs-private
+ */
+export function dispatchPointerEvent(node: Node, type: string, clientX = 0, clientY = 0,
+                                     options?: PointerEventInit): PointerEvent {
+  return dispatchEvent(node, createPointerEvent(type, clientX, clientY, options)) as PointerEvent;
+}
+
 /**
  * Shorthand to dispatch a touch event on the specified coordinates.
  * @docs-private

src/cdk/testing/testbed/fake-events/event-objects.ts

@@ -52,6 +52,28 @@ export function createMouseEvent(type: string, clientX = 0, clientY = 0, button
   return event;
 }
 
+/**
+ * Creates a browser `PointerEvent` with the specified options. Pointer events
+ * by default will appear as if they are the primary pointer of their type.
+ * https://www.w3.org/TR/pointerevents2/#dom-pointerevent-isprimary.
+ *
+ * For example, if pointer events for a multi-touch interaction are created, the non-primary
+ * pointer touches would need to be represented by non-primary pointer events.
+ *
+ * @docs-private
+ */
+export function createPointerEvent(type: string, clientX = 0, clientY = 0,
+                                   options: PointerEventInit = {isPrimary: true}) {
+  return new PointerEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    clientX,
+    clientY,
+    ...options,
+  });
+}
+
 /**
  * Creates a browser TouchEvent with the specified pointer coordinates.
  * @docs-private

src/cdk/testing/testbed/unit-test-element.ts

@@ -11,6 +11,7 @@ import {ElementDimensions, ModifierKeys, TestElement, TestKey} from '@angular/cd
 import {
   clearElement,
   dispatchMouseEvent,
+  dispatchPointerEvent,
   isTextInput,
   triggerBlur,
   triggerFocus,
@@ -77,9 +78,23 @@ export class UnitTestElement implements TestElement {
     // supported by mouse events and could lead to unexpected results.
     const clientX = Math.round(left + relativeX);
     const clientY = Math.round(top + relativeY);
+
+    // The latest versions of all browsers we support have the new `PointerEvent` API.
+    // Though since we capture the two most recent versions of these browsers, we also
+    // need to support Safari 12 at time of writing. Safari 12 does not have support for this,
+    // so we need to conditionally create and dispatch these events based on feature detection.
+    const emitPointerEvents = window.PointerEvent !== undefined;
+
+    if (emitPointerEvents) {
+      dispatchPointerEvent(this.element, 'pointerdown', clientX, clientY);
+    }
     dispatchMouseEvent(this.element, 'mousedown', clientX, clientY);
+    if (emitPointerEvents) {
+      dispatchMouseEvent(this.element, 'pointerup', clientX, clientY);
+    }
     dispatchMouseEvent(this.element, 'mouseup', clientX, clientY);
     dispatchMouseEvent(this.element, 'click', clientX, clientY);
+
     await this._stabilize();
   }