fix(cdk/testing/testbed): synthetic DOM events cannot be prevented multiple times

Currently our harness infrastructure for TestBed relies on synthetic DOM
events to simulate actions as `click()`. These events currently have
special compatibility logic for `preventDefault()` that fails when
invoked multiple times. It's totally valid that multiple event listeners
call `event.preventDefault()` on the same event object.

Fixes #19440.

Author: devversion

src/cdk/testing/testbed/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ts_library")
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -21,3 +21,16 @@ filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
 )
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":testbed",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

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

@@ -0,0 +1,43 @@
+import {createKeyboardEvent, createMouseEvent} from './event-objects';
+
+describe('event objects', () => {
+  let testElement: HTMLElement;
+
+  beforeEach(() => testElement = document.createElement('div'));
+
+  describe('synthetic mouse event', () => {
+
+    it('should be possible to call `preventDefault` multiple times', () => {
+      const preventDefaultSpy = jasmine.createSpy('preventDefault').and
+        .callFake((event: Event) => event.preventDefault());
+
+      // Register event listeners twice, where both prevent prevent the default behavior.
+      testElement.addEventListener('click', (event: Event) => preventDefaultSpy(event));
+      testElement.addEventListener('click', (event: Event) => preventDefaultSpy(event));
+
+      expect(() => {
+        // Dispatch a synthetic mouse click event on the test element.
+        testElement.dispatchEvent(createMouseEvent('click'));
+      }).not.toThrow();
+      expect(preventDefaultSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('synthetic keyboard event', () => {
+
+    it('should be possible to call `preventDefault` multiple times', () => {
+      const preventDefaultSpy = jasmine.createSpy('preventDefault').and
+        .callFake((event: Event) => event.preventDefault());
+
+      // Register event listeners twice, where both prevent prevent the default behavior.
+      testElement.addEventListener('keydown', (event: Event) => preventDefaultSpy(event));
+      testElement.addEventListener('keydown', (event: Event) => preventDefaultSpy(event));
+
+      expect(() => {
+        // Dispatch a synthetic keyboard down event on the test element.
+        testElement.dispatchEvent(createKeyboardEvent('keydown'));
+      }).not.toThrow();
+      expect(preventDefaultSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+});

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

@@ -45,7 +45,7 @@ export function createMouseEvent(type: string, clientX = 0, clientY = 0, button
 
   // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.
   event.preventDefault = function() {
-    Object.defineProperty(event, 'defaultPrevented', { get: () => true });
+    defineReadonlyEventProperty(event, 'defaultPrevented', true);
     return originalPreventDefault();
   };
 
@@ -157,7 +157,7 @@ export function createKeyboardEvent(type: string, keyCode: number = 0, key: stri
 
   // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.
   event.preventDefault = function() {
-    Object.defineProperty(event, 'defaultPrevented', { get: () => true });
+    defineReadonlyEventProperty(event, 'defaultPrevented', true);
     return originalPreventDefault.apply(this, arguments);
   };
 
@@ -173,3 +173,11 @@ export function createFakeEvent(type: string, canBubble = false, cancelable = tr
   event.initEvent(type, canBubble, cancelable);
   return event;
 }
+
+/**
+ * Defines a readonly property on the given event object. Readonly properties on an event object
+ * are always set as configurable as that matches default readonly properties for DOM event objects.
+ */
+function defineReadonlyEventProperty(event: Event, propertyName: string, value: any) {
+  Object.defineProperty(event, propertyName, {get: () => value, configurable: true});
+}