fix(material/datepicker): input harness not dispatching dateChange event (#20877)

When the datepicker input harnesses were first introduced, they didn't dispatch the
`dateChange` event, because we didn't have a way of triggering the `change` handler.

Now that we have the necessary API, these changes make it so the event is dispatched.

Fixes #20480.

(cherry picked from commit 513bfa4)

Author: crisbeto

src/material/datepicker/testing/date-range-input-harness-shared.spec.ts

@@ -195,6 +195,19 @@ export function runDateRangeInputHarnessTests(
 
     expect(await Promise.all([start.getMax(), end.getMax()])).toEqual(['2020-01-01', '2020-01-01']);
   });
+
+  it('should dispatch the dateChange event when the inner input values have changed', async () => {
+    const input = await loader.getHarness(dateRangeInputHarness.with({selector: '[basic]'}));
+    const [start, end] = await Promise.all([input.getStartInput(), input.getEndInput()]);
+
+    expect(fixture.componentInstance.startDateChangeCount).toBe(0);
+    expect(fixture.componentInstance.endDateChangeCount).toBe(0);
+
+    await Promise.all([start.setValue('1/1/2020'), end.setValue('2/2/2020')]);
+
+    expect(fixture.componentInstance.startDateChangeCount).toBe(1);
+    expect(fixture.componentInstance.endDateChangeCount).toBe(1);
+  });
 }
 
 @Component({
@@ -209,12 +222,14 @@ export function runDateRangeInputHarnessTests(
       <input
         matStartDate
         [(ngModel)]="startDate"
+        (dateChange)="startDateChangeCount = startDateChangeCount + 1"
         [disabled]="subInputsDisabled"
         [required]="subInputsRequired"
         placeholder="Start date">
       <input
         matEndDate
         [(ngModel)]="endDate"
+        (dateChange)="endDateChangeCount = endDateChangeCount + 1"
         [disabled]="subInputsDisabled"
         [required]="subInputsRequired"
         placeholder="End date">
@@ -237,4 +252,6 @@ class DateRangeInputHarnessTest {
   required = false;
   subInputsDisabled = false;
   subInputsRequired = false;
+  startDateChangeCount = 0;
+  endDateChangeCount = 0;
 }

src/material/datepicker/testing/datepicker-input-harness-base.ts

@@ -59,6 +59,11 @@ export abstract class MatDatepickerInputHarnessBase extends ComponentHarness {
     if (newValue) {
       await inputEl.sendKeys(newValue);
     }
+
+    // @breaking-change 12.0.0 Remove null check once `dispatchEvent` is a required method.
+    if (inputEl.dispatchEvent) {
+      await inputEl.dispatchEvent('change');
+    }
   }
 
   /** Gets the placeholder of the input. */

src/material/datepicker/testing/datepicker-input-harness-shared.spec.ts

@@ -141,6 +141,14 @@ export function runDatepickerInputHarnessTests(
     await input.openCalendar();
     expect(await input.getCalendar()).toBeInstanceOf(calendarHarness);
   });
+
+  it('should emit the `dateChange` event when the value is changed', async () => {
+    const input = await loader.getHarness(datepickerInputHarness.with({selector: '#basic'}));
+    expect(fixture.componentInstance.dateChangeCount).toBe(0);
+
+    await input.setValue('1/1/2020');
+    expect(fixture.componentInstance.dateChangeCount).toBe(1);
+  });
 }
 
 @Component({
@@ -149,6 +157,7 @@ export function runDatepickerInputHarnessTests(
       id="basic"
       matInput
       [matDatepicker]="picker"
+      (dateChange)="dateChangeCount = dateChangeCount + 1"
       [(ngModel)]="date"
       [min]="minDate"
       [max]="maxDate"
@@ -166,4 +175,5 @@ class DatepickerInputHarnessTest {
   touchUi = false;
   disabled = false;
   required = false;
+  dateChangeCount = 0;
 }