fix(cdk/testing): dispatch bubbling input and change events

src/cdk/testing/testbed/fake-events/type-in-element.ts

@@ -163,15 +163,15 @@ export function typeInElement(element: HTMLElement, ...modifiersAndKeys: any[])
     if (isInput && key.key && key.key.length === 1) {
       if (enterValueIncrementally) {
         (element as HTMLInputElement | HTMLTextAreaElement).value += key.key;
-        dispatchFakeEvent(element, 'input');
+        dispatchFakeEvent(element, 'input', true);
       }
     }
     dispatchKeyboardEvent(element, 'keyup', key.keyCode, key.key, modifiers, key.code);
   }
 
   // Since we weren't dispatching `input` events while sending the keys, we have to do it now.
   if (!enterValueIncrementally) {
-    dispatchFakeEvent(element, 'input');
+    dispatchFakeEvent(element, 'input', true);
   }
 }
 
@@ -182,5 +182,5 @@ export function typeInElement(element: HTMLElement, ...modifiersAndKeys: any[])
 export function clearElement(element: HTMLInputElement | HTMLTextAreaElement) {
   triggerFocus(element as HTMLElement);
   element.value = '';
-  dispatchFakeEvent(element, 'input');
+  dispatchFakeEvent(element, 'input', true);
 }

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

@@ -254,7 +254,7 @@ export class UnitTestElement implements TestElement {
 
       if (option.selected !== wasSelected) {
         hasChanged = true;
-        dispatchFakeEvent(this.element, 'change');
+        dispatchFakeEvent(this.element, 'change', true);
       }
     }
 

src/cdk/testing/tests/cross-environment-tests.ts

@@ -450,6 +450,12 @@ export function crossEnvironmentSpecs(
       expect(await value.text()).toBe('Input: Yi');
     });
 
+    it('should dispatch input events that bubble when sending keys', async () => {
+      const [input, bubbledEvent] = await parallel(() => [harness.input(), harness.bubbledEvent()]);
+      await input.sendKeys('Yi');
+      expect(await bubbledEvent.text()).toBe('Bubbled event: input|input');
+    });
+
     it('focuses the element before sending key', async () => {
       const input = await harness.input();
       await input.sendKeys('Yi');
@@ -577,6 +583,16 @@ export function crossEnvironmentSpecs(
       expect(await changeEventCounter.text()).toBe('Change events: 2');
     });
 
+    it('should dispatch change events that bubble when selecting options', async () => {
+      const [select, bubbledEvent] = await parallel(() => [
+        harness.multiSelect(),
+        harness.bubbledEvent(),
+      ]);
+
+      await select.selectOptions(0);
+      expect(await bubbledEvent.text()).toBe('Bubbled event: change|multi-select');
+    });
+
     it('should check if selector matches', async () => {
       const button = await harness.button();
       expect(await button.matchesSelector('button:not(.fake-class)')).toBe(true);

src/cdk/testing/tests/harnesses/main-component-harness.ts

@@ -37,6 +37,7 @@ export class MainComponentHarness extends ComponentHarness {
   readonly multiSelect = this.locatorFor('#multi-select');
   readonly multiSelectValue = this.locatorFor('#multi-select-value');
   readonly multiSelectChangeEventCounter = this.locatorFor('#multi-select-change-counter');
+  readonly bubbledEvent = this.locatorFor('#bubbled-event');
   readonly numberInput = this.locatorFor('#number-input');
   readonly numberInputValue = this.locatorFor('#number-input-value');
   readonly contextmenuTestResult = this.locatorFor('.contextmenu-test-result');

src/cdk/testing/tests/test-main-component.html

@@ -21,7 +21,7 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   <div id="asyncCounter">{{asyncCounter}}</div>
 </div>
 <span id="contenteditable" contenteditable>initial value</span>
-<div class="inputs">
+<div class="inputs" (input)="onBubbledEvent($event)" (change)="onBubbledEvent($event)">
   <input [(ngModel)]="input" id="input" aria-label="input" (keydown)="onKeyDown($event)" />
   <span class="special-key">{{specialKey}}</span>
   <div id="value">Input: {{input}}</div>
@@ -52,6 +52,7 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   </select>
   <div id="multi-select-value">Multi-select: {{multiSelect}}</div>
   <div id="multi-select-change-counter">Change events: {{multiSelectChangeEventCount}}</div>
+  <div id="bubbled-event">Bubbled event: {{bubbledEvent}}</div>
   <div (myCustomEvent)="basicEvent = basicEvent + 1" id="custom-event-basic">
     Basic event: {{basicEvent}}
   </div>

src/cdk/testing/tests/test-main-component.ts

@@ -47,6 +47,7 @@ export class TestMainComponent implements OnDestroy {
   singleSelectChangeEventCount = 0;
   multiSelect: string[] = [];
   multiSelectChangeEventCount = 0;
+  bubbledEvent = '';
   basicEvent = 0;
   customEventData: string | null = null;
   _shadowDomSupported = _supportsShadowDom();
@@ -115,6 +116,10 @@ export class TestMainComponent implements OnDestroy {
       .join('-');
   }
 
+  onBubbledEvent(event: Event) {
+    this.bubbledEvent = `${event.type}|${(event.target as HTMLElement).id}`;
+  }
+
   onCustomEvent(event: any) {
     this.customEventData = JSON.stringify({message: event.message, value: event.value});
   }