Angular Reactive Forms绑定单元测试

如何解决Angular Reactive Forms绑定单元测试

这似乎是一个简单的问题，在搜索时我已经看到很多类似的问题，但是似乎没有什么可以确切说明我的问题：我对Angular Reative Forms和单元测试不熟悉，我想做一个基本测试，确认我的模板和表单控件之间的绑定正确。因此，我要测试的是，如果我在HTML输入中输入值，则绑定到该输入值的控件是相同的。实际运行页面时，此方法工作正常，但是当我运行测试时，控件的值从未改变（期望''等于100）。

该控件的模板部分：

<form novalidate (ngSubmit)="calculateOrder()" [formGroup]="parameterForm">
   ...
   <input type="number" class="form-control" id="amountControl"
                   formControlName="amount" [step]="amountStepSize" [min]="minAmount"
                   [max]="maxAmount" placeholder="Montant (USD)"[ngClass]="{'is-invalid': amountErrorMessage}" />
...

初始化值的ngOnInitCode：

    this.parameterForm = this._formBuilder.group({
          currencyPair : ['',[Validators.required]],amount : ['',[Validators.required,Validators.min(this.minAmount),Validators.max(this.maxAmount)]],nSlices : ['',[Validators.min(this.minSlice),Validators.max(this.maxSlice)]]
        });

测试（我省略了beforeEach（），因为它非常基本，它设置了TestBed并导入，并且它具有与其他控件无关的代码-我也正在使用其他测试）

  it('should set the amount correctly after an amount is entered',(fakeAsync(() => {
    //Arrange
    const input: HTMLInputElement = fixture.debugElement.query(By.css('#amountControl')).nativeElement;
    
    //Act
    input.valueAsNumber = 100;
    input.dispatchEvent(new Event('change'));
    fixture.detectChanges();
    
    //Assert
    expect(component.amountControl.value).toEqual(100);
  })));