模板驱动输入和无功输入在组件 DOM 测试中的工作方式不同

Question

我使用模板驱动输入，与反应输入不同，我无法在单元测试中获取它的值。

这里有两个相同的组件，一个是使用模板驱动方法实现的，另一个是使用反应式形式实现的。

@Component({
  template: '<input [(ngModel)]="model.value">'
})
export class QuestionTemplateInputComponent {
  public model: any;

  ngOnInit(): void {
    this.model = { 
      value: 'value' 
    };
  }
}

@Component({
  template: '<form [formGroup]="formGroup"><input formControlName="value"></form>'
})
export class QuestionReactiveInputComponent implements OnInit {
  public formGroup: FormGroup;
  
  constructor (
    private readonly formBuilder: FormBuilder
  ) { }
  
  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      value: ['value']
    });
  }
}

为了验证每个组件，这里也有两个测试。

  let fixture1: ComponentFixture<QuestionTemplateInputComponent>;
  let fixture2: ComponentFixture<QuestionReactiveInputComponent>;

  ...

  it('verifies template input', () => {
    fixture1.detectChanges();
    const input: HTMLInputElement = fixture1.nativeElement.querySelector('input');
  
    expect(input.value).toBe('value'); // FAIL: Expected '' to be 'value'.
  });

  it('verifies reactive input ', () => {
    fixture2.detectChanges();
    const input: HTMLInputElement = fixture2.nativeElement.querySelector('input');
  
    expect(input.value).toBe('value'); // PASSED
  });

为什么只有一个通过？

Answer 1

我认为模板方法需要完成一些异步任务，请查看此。

试试这个：

it('verifies template input', () => {
    fixture1.detectChanges();
    fixture.whenStable().then(() => {
       const input: HTMLInputElement = fixture1.nativeElement.querySelector('input');
       expect(input.value).toBe('value');
    });
  })

fixture.whenStable 确保当前的承诺（异步任务）在继续之前已经完成。

模板驱动输入和无功输入在组件 DOM 测试中的工作方式不同

Template driven input and reactive input not working the same in component DOM test

unit-testing

angular

angular-reactive-forms

angular-template-form