Test de sélection d'un événement de changement de menu (ne pas obtenir la valeur mise à jour)

Question

Si vous tentez d'obtenir mes menus de sélection, l'événement se déclenche correctement avec la valeur correcte. Cela semble être le tir mais la valeur ne change pas.

Je possède ce menu de sélection dans mon élément:

<select id="seasonDropDown" style="width:200px;height: 36px;" aria-label="Select a Season" (change)="changeSeason($event.target.value)"> 
     <option *ngFor="let item of seasons" [value]="item.id" [selected]="item.id === seasonId">Season {{item.id}}</option> 
    </select> 

Je cet événement de changement:

public changeSeason(seasonId: number) { 
    this.test = 'blah'; //for testing sake 
    console.log('change season ' + seasonId) 
    this.seasonId = seasonId; 
    this.notify.emit(this.seasonId); 
    } 

J'ai essayé de le tester comme le code ci-dessous mais commponent.seasonId ne change jamais de son valeur par défaut. Il devrait être changé dans la méthode changeSeason. Je sais que la méthode est mise à feu parce que quand je test attendre (component.test) .toEqual (« bla »), il passera:

it('should emit new season on change event', fakeAsync(() => { 

     let select = fixture.debugElement.query(By.css('#seasonDropDown')).nativeElement; 

     select.value = 2; 
     select.selectedValue = 2; 

     fixture.detectChanges(); 

     select.dispatchEvent(new Event('change')); 
     tick(); 

     fixture.detectChanges(); 


     expect(component.seasonId).toEqual(2); 
     //expect(component.test).toEqual('blah'); this will pass so I know the 
     //changeSeason event is actually getting called 
    })); 

Answer 1

avant de saisir l'élément de sélection dans votre test vous devez exécuter

fixture.detectChanges(); 

pour avoir des éléments html correctement liés à votre composant et à ses gestionnaires d'événements. Jetez un oeil à ma reproduction sur stackblitz. Voici juste le test:

it('should emit new season on change event',() => { 
    fixture.detectChanges(); 
    let select = fixture.debugElement.query(By.css('#seasonDropDown')).nativeElement as HTMLSelectElement; 

    select.selectedIndex = 1; // {id:2} 
    select.dispatchEvent(new Event('change')); 
    fixture.detectChanges(); 

    expect(+component.seasonId).toEqual(2); 
    expect(component.test).toBe('blah'); 
}); 

Notez que je propriété selectedIndex de HTMLSelectElement pour sélectionner 2ème option pour simuler une sélection modifiée (avec distachEvent (...)).

J'espère que cela aide quelqu'un.