MatDatepickerInput.changeDate event doesn't fire in test.

[astex]

We have a small component that wraps mat-datepicker. I'm attempting to write a component harness around this. However, when the test updates the MatInput for the date (via MatInputHarness.setValue and MatInputHarness.blur), the changeDate event does not fire.

[crisbeto]

Can you post an example of what the component and the test look like?

[astex]

Code is proprietary © Google. I'm checking if I can post enough to reproduce now.

[astex]

Component:

@Component({selector: ..., templateUrl: ...})
export class EffectiveDatePickerComponent {
  @Input() date?: Date;
  @Output() dateChange = new EventEmitter<Date>();

  onDateChange(event: MatDatepickerInputEvent<Date>) {
    this.dateChange.emit(event.value!);
  }
}

@NgModule({
  imports: [...],
  exports: [EffectiveDatePickerComponent],
  declarations: [EffectiveDatePickerComponent],
})
export class EffectiveDatePicker {}

Template:

<mat-datepicker-toggle [for]="datePicker"></mat-datepicker-toggle>
<input
    matInput
    [matDatepicker]="datePicker"
    [value]="date"
    (dateChange)="onDateChange($event)"
    #input />
<mat-datepicker (closed)="input.blur()" #datePicker></mat-datepicker>

Harness:

export class EffectiveDatePickerHarness extends ComponentHarness {
  static hostSelector = ...;

  private readonly getInput = this.locatorFor(MatInputHarness);

  async getDate(): Promise<Date> {
    const input = await this.getInput();
    return new Date(await input.getValue());
  }

  async setDate(date: Date) {
    const input = await this.getInput();
    await input.setValue(
      `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`);
    await input.blur();
  }
}

Test:

describe('EffectiveDatePickerHarness', () => {
  ...

  it('triggers the change event when the date is set', async () => {
    const onDateChange = jasmine.createSpy('onDateChange');
    bootstrapTemplate(
      `<effective-date-picker (dateChange)="onDateChange($event)">
      </effective-date-picker>`,
      {onDateChange}
    );
    const harness = await loader.getHarness(EffectiveDatePickerHarness);
    await harness.setDate(new Date('2020-02-01 00:00:00'));
    expect(onDateChange).toHaveBeenCalledWith(new Date('2020-02-01 00:00:00'));
  });
});

[astex]

Seems the MatInput.change event doesn't fire either. May be this has little to do with the datepicker.

[crisbeto]

Yeah, I think the problem is that we dispatch the event as a result of the native change event which isn't being fired by the test harness. It wouldn't be too difficult to trigger it while typing since we already fake the input event, but the timing won't be consistent with the native event which only fires when the input is blurred and its value different from when it was first focused. Faking it in a way that is similar to the native event will be tricky, because we'd have to start adding event listeners to the test elements. @mmalerba do you have any thoughts on this issue? Maybe we should have an API to trigger arbitrary event listeners on a TestElement?

[mmalerba]

Yeah, I think a method to trigger arbitrary listeners is probably needed. It's one of those things that I intentionally held off on adding at first to see how much it came up in practice, but it seems like something that we need