模板驱动的输入和响应式输入在组件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确保当前的承诺(异步任务)在结转之前已经完成。