fix(cdk/testing): fake events not propagating through shadow DOM

Adds the `composed` flag to the fake event objects so that they can propagate through a `mode: 'open'` shadow root.

(cherry picked from commit 48df9d6)

Author: crisbeto

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

@@ -1,3 +1,9 @@
+import {
+  dispatchMouseEvent,
+  dispatchKeyboardEvent,
+  dispatchPointerEvent,
+  dispatchFakeEvent,
+} from './dispatch-events';
 import {createKeyboardEvent, createMouseEvent} from './event-objects';
 
 describe('event objects', () => {
@@ -40,4 +46,70 @@ describe('event objects', () => {
       expect(preventDefaultSpy).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('shadow DOM', () => {
+    it('should allow dispatched mouse events to propagate through the shadow root', () => {
+      if (!testElement.attachShadow) {
+        return;
+      }
+
+      const spy = jasmine.createSpy('listener');
+      const shadowRoot = testElement.attachShadow({mode: 'open'});
+      const child = document.createElement('div');
+      shadowRoot.appendChild(child);
+
+      testElement.addEventListener('mousedown', spy);
+      dispatchMouseEvent(child, 'mousedown');
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should allow dispatched keyboard events to propagate through the shadow root', () => {
+      if (!testElement.attachShadow) {
+        return;
+      }
+
+      const spy = jasmine.createSpy('listener');
+      const shadowRoot = testElement.attachShadow({mode: 'open'});
+      const child = document.createElement('div');
+      shadowRoot.appendChild(child);
+
+      testElement.addEventListener('keydown', spy);
+      dispatchKeyboardEvent(child, 'keydown');
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should allow dispatched pointer events to propagate through the shadow root', () => {
+      if (!testElement.attachShadow) {
+        return;
+      }
+
+      const spy = jasmine.createSpy('listener');
+      const shadowRoot = testElement.attachShadow({mode: 'open'});
+      const child = document.createElement('div');
+      shadowRoot.appendChild(child);
+
+      testElement.addEventListener('pointerdown', spy);
+      dispatchPointerEvent(child, 'pointerdown');
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should allow dispatched fake events to propagate through the shadow root', () => {
+      if (!testElement.attachShadow) {
+        return;
+      }
+
+      const spy = jasmine.createSpy('listener');
+      const shadowRoot = testElement.attachShadow({mode: 'open'});
+      const child = document.createElement('div');
+      shadowRoot.appendChild(child);
+
+      testElement.addEventListener('fake', spy);
+      dispatchFakeEvent(child, 'fake');
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -32,6 +32,7 @@ export function createMouseEvent(
   const event = new MouseEvent(type, {
     bubbles: true,
     cancelable: true,
+    composed: true, // Required for shadow DOM events.
     view: window,
     detail: 0,
     relatedTarget: null,
@@ -74,6 +75,7 @@ export function createPointerEvent(
   return new PointerEvent(type, {
     bubbles: true,
     cancelable: true,
+    composed: true, // Required for shadow DOM events.
     view: window,
     clientX,
     clientY,
@@ -116,6 +118,7 @@ export function createKeyboardEvent(
   return new KeyboardEvent(type, {
     bubbles: true,
     cancelable: true,
+    composed: true, // Required for shadow DOM events.
     view: window,
     keyCode: keyCode,
     key: key,
@@ -130,8 +133,8 @@ export function createKeyboardEvent(
  * Creates a fake event object with any desired event type.
  * @docs-private
  */
-export function createFakeEvent(type: string, bubbles = false, cancelable = true) {
-  return new Event(type, {bubbles, cancelable});
+export function createFakeEvent(type: string, bubbles = false, cancelable = true, composed = true) {
+  return new Event(type, {bubbles, cancelable, composed});
 }
 
 /**