lundi 9 novembre 2020

Angular 10 Unit Testing PrimeNG p-dropdown with 2-Way Data Binding

In my Angular 10 app with Jasmine test framework, I need help testing that a PrimeNG p-dropdown with 2-way databinding updates my model automatically when an item is selected. In the example below, how would I verify that when an an item is selected, that selectedCity (the model in my component) gets updated?

Example Dropdown used in my component:

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

Dropdown Options:

    this.cities = [
        {label:'Select City', value:null},
        {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
        {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
        {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
        {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
        {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
    ];

I tried the following in my Component test to no avail, the model is still undefined:

 it('should populate the model when an item is selected', async(() => {
   fixture.detectChanges();
   fixture.whenStable().then(() => {
     const dropdown: Dropdown = fixture.debugElement.query(By.css('p-dropdown')).componentInstance;
     dropdown.selectItem(new Event('change'), dropdown.options[1].value);
     fixture.detectChanges();
     expect(component.selectedCity).toEqual(dropdown.options[1].value);
   });
 }));

Aucun commentaire:

Enregistrer un commentaire