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

Question

I use template driven input and can not get its value in unit test unlike of reactive input.

Here are two same components one implemented with template driven approach and anoter one with using of reactive form.

@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']
    });
  }
}

And here are also two tests in order to verify each component.

  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
  });

Why only one of them passes?

Does the template driven test pass if the public model: any; variable is initialized following way: public model = { value: 'value' } ? In this case the ngOnInit() is removed. — Milan Tenk
– Milan Tenk, Commented Jan 14, 2021 at 20:27
I guess it has something to do with the fact, that template-driven forms are asynchronous. I found a conversation about this here, it might be helpful: stackoverflow.com/questions/58018506/… — Milan Tenk
– Milan Tenk, Commented Jan 14, 2021 at 20:30
@MilanTenk that's right, thank you! I will use approach in testing which covers asynchronous implementations. — MrDiemath
– MrDiemath, Commented Jan 15, 2021 at 15:42

AliF50 · Accepted Answer · 2021-01-15 02:00:12Z

1

I think there are some async tasks that need to complete for the template approach, check this out.

Try this:

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

fixture.whenStable ensures that the current promises (async tasks) have completed before carrying forward.

answered Jan 15, 2021 at 2:00

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related