mercredi 7 août 2019

angular integration testing a checkbox

I am stuck with testing a component that uses a checkbox with angular (version 8). I created a simple component that looks like this (to analyse the problem):

<div>
    <input 
        type="checkbox" 
        [(ngModel)]="isChecked"  
        name="mycheckbox">
</div> 

The component itself has a simple property isChecked. I tried to check the checkbox and then assert that isChecked is true. Without success. Here some versions:

  fit('should be checked sync 1', () => {
    const checkBox = fixture.debugElement.query(By.css('input')).nativeElement;
    checkBox.checked = true;
    checkBox.dispatchEvent(new Event('changed'));
    fixture.detectChanges();
    expect(component.isChecked).toBeTruthy(); //fails, is false
  });

  fit('should be checked sync 2', () => {
    const checkBox = fixture.debugElement.query(By.css('input'));
    checkBox.nativeElement.checked = true;
    checkBox.triggerEventHandler('change', null);
    fixture.detectChanges();
    expect(component.isChecked).toBeTruthy(); //fails, is false
  });


  fit('shlould be checked async', async(async () => {
    const checkBox: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
    checkBox.checked = true;
    checkBox.dispatchEvent(new Event('changed'));
    await fixture.whenStable();
    fixture.detectChanges();
    expect(component.isChecked).toBeTruthy(); //fails, is false
  }));

How do I do this?

Aucun commentaire:

Enregistrer un commentaire