angular - 如何测试一个简单的 Angular Reactive Form

Question

我有一个组件，其中包含一个非常简单的响应式表单，只有一个输入字段和一个用于提交表单的按钮。

这里是html模板的代码

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="idControl">
  <button type="submit" class="button" [disabled]="myForm.invalid">Submit Form</button>
</form>

这里是组件代码中的 FormGroup

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.scss']
})
export class MyFormComponent implements OnInit {
  myForm = new FormGroup({
    idControl: new FormControl('' , [
      Validators.required
    ])
  });
.....
.....
}

现在我想为这个Component写一个简单的测试，一个基本上说的测试

• 首先将输入框的值设置为“Blah”
• 然后点击按钮提交表单
• 最后检查一下按钮后，名为 idControl 的控件实际上是“Blah”

下面的测试例子确实有效

it('1.1 should update the value of the input field after an "input" event on the input field', () => {
    const inputVal = 'Blah';
    const input = fixture.nativeElement.querySelector('input');
    input.value = inputVal;

    input.dispatchEvent(new Event('input'));

    expect(fixture.componentInstance.myForm.value.idControl).toEqual(inputVal);
  });

虽然在我看来这个测试并没有准确反射(reflect)我想要模拟的内容，即点击按钮。另一方面，如果我尝试实际模拟按钮上的点击事件，我将无法创建成功的测试。比如下面的测试没有通过

it('1.2 should update the value of the input field after a "submit" event on the form', () => {
    const inputVal = 'Blah1';
    const input = fixture.nativeElement.querySelector('input');
    input.value = inputVal;
    const submitEl = fixture.debugElement.query(By.css('button'));
    submitEl.triggerEventHandler('click', null);
    fixture.detectChanges();

    expect(fixture.componentInstance.myForm.value.idControl).toEqual(inputVal);
  });

我也尝试过不同的变体，例如使用

fixture.debugElement.query(By.css('button')).nativeElement.click();

但似乎没有任何效果。

这是我使用的测试配置代码

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ InputFormComponent],
      imports: [ReactiveFormsModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(InputFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

我的问题是我是否遗漏了有关如何在 Angular 中测试表单的内容。

Answer 1

这不是最初问题的解决方案，但我至少找到了一种更改输入值的方法。而不是

const input = fixture.nativeElement.querySelector('input');
input.value = inputVal;

尝试

component.formControl.setValue(inputVal, { emitEvent: true });

emitEvent 选项可确保不仅更改值而且触发事件，就好像用户刚刚键入它一样。

不幸的是，这不会测试模板和组件之间的绑定(bind)。