Angular mat-datepicker 的输入在单元测试中不起作用

Question

我正在构建一个自定义 Angular 组件，其中包含一个mat-datepicker. 基本上组件应该让用户选择一个日期，然后发出一个事件。我有以下实现，在手动测试时似乎工作正常：

TS：

@Component({
  selector: 'kms-date-range-picker',
  templateUrl: './date-range-picker.component.html',
  styleUrls: ['./date-range-picker.component.scss'],
})
export class DateRangePickerComponent implements OnInit {
  @Input() startDate: moment.Moment;
  @Input() endDate: moment.Moment;
  @Output() onDateChange = new EventEmitter<{ startDate: moment.Moment; endDate: moment.Moment }>();
  startDateFormControl: FormControl;
  endDateFormControl: FormControl;

  constructor() {}

  ngOnInit(): void {
    this.startDateFormControl = new FormControl(this.startDate);
    this.endDateFormControl = new FormControl(this.endDate);
  }

  onStartDateChange(event: any): void {
    this.startDate = event.value !== null ? moment(event.value) : undefined;
    this.emitDates();
  }

  onEndDateChange(event: any): void {
    this.endDate = event.value !== null ? moment(event.value) : undefined;
    this.emitDates();
  }

  private emitDates(): void {
    this.onDateChange.emit({
      startDate: this.startDateFormControl.value,
      endDate: this.endDateFormControl.value
    })
  }
}

模板：

<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
  <mat-form-field>
    <mat-label i18n="@@start_date">Start</mat-label>
    <input
      matInput
      data-testId="start-date-input"
      [matDatepicker]="startDatePicker"
      [formControl]="startDateFormControl"
      (dateChange)="onStartDateChange($event)"
    />
    <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #startDatePicker></mat-datepicker>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n="@@end_date">End</mat-label>
    <input
      matInput
      data-testId="end-date-input"
      [matDatepicker]="endDatePicker"
      [formControl]="endDateFormControl"
      (dateChange)="onEndDateChange($event)"
    />
    <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #endDatePicker></mat-datepicker>
  </mat-form-field>
</div>

问题是，如果我尝试通过向输入字段写入一些内容来对此进行单元测试，则什么也不会发生。如果我尝试在测试中设置起始值，也会发生同样的情况。它的值保持为空，而不是更新输入字段。这是我用来MatInputHarness设置值的测试套件：

  beforeEach(() => {
    fixture = TestBed.createComponent(DateRangePickerComponent);
    loader = TestbedHarnessEnvironment.loader(fixture);
    component = fixture.componentInstance;

    // Set @Input values here to avoid the parent component template
    component.startDate = moment('2020-05-01');
    component.endDate = moment('2020-10-12');

    spyOn(component.onDateChange, 'emit');

    fixture.detectChanges();
  });

  it('should initialize fields with given start and end dates', async () => {
    expect(component).toBeTruthy();
    const startDateInput = await getInputHarness('start-date-input');
    const endDateInput = await getInputHarness('end-date-input');

    // await startDateInput.setValue('1234');

    expect(await startDateInput.getValue()).toBe('1.5.2020');
    expect(await endDateInput.getValue()).toBe('12.10.2020');
  });

  it('should emit date range when a date is changed to valid range', async () => {
    expect(component).toBeTruthy();
    const startDateInput = await getInputHarness('start-date-input');
    // const endDateInput = await getInputHarness('end-date-input');

    await startDateInput.setValue('4.6.2020');
    expect(component.onDateChange.emit).toHaveBeenCalledTimes(1);
  });

  async function getInputHarness(testId: string): Promise<MatInputHarness> {
    return await loader.getHarness(MatInputHarness.with({ selector: `[data-testId="${testId}"]` }));
  }

这两个测试都以这种方式失败：

Chrome 85.0.4183 (Linux 0.0.0) DateRangePickerComponent should initialize fields with given start and end dates FAILED
        Error: Expected '' to be '1.5.2020'.
            at <Jasmine>
            at http://localhost:9876/_karma_webpack_/main.js:35635:49
            at <Jasmine>
            at fulfilled (http://localhost:9876/_karma_webpack_/vendor.js:351548:58)
        Error: Expected '' to be '12.10.2020'.
            at <Jasmine>
            at http://localhost:9876/_karma_webpack_/main.js:35636:47
            at <Jasmine>

是什么赋予了？如果我[matDatepicker]="startDatePicker"从输入中删除，则通过测试工作的文本输入和输入字段都会更新。但是，如果我将它们添加回来，输入就会失败。我应该如何在 Angular 单元测试中测试这些字段？