4

I am trying to test drop down selection, I am able to get nativeElement and options, but I am facing error with dispatch event

some how event is not captured.

HTML

<select [(ngModel)]='selectedTemplate' class="gridDropdowns" name="compareDropdown" (ngModelChange)="onTemplateChange($event)">
    <option *ngFor='let option of templateDropdown' [attr.id] = "option.text" [ngValue]="option.value" >{{option.text}}</option>
</select>

component

   public templateDropdown: Array<{ text: string, value: string }> = 
    [
        { text: 'Layer Summary - Final Share', value: 'final' },
        { text: 'Layer Summary - Authorized Share', value: 'authorize' },
        { text: 'Layer Summary - Quote Share', value: 'quote' },
        { text: 'PML Summary (100%)', value: 'pmlSummary' },
        { text: 'Metric Comp Summary', value: 'metricComp' }
    ];

onTemplateChange(event: any) {
    console.log(event);
}

Component.spec.ts

it('Load corresponding data on Template dropdown change', async(() => {
    fixture = TestBed.createComponent(CompareComponent);
    component = fixture.componentInstance;
    spyOn(component, 'onTemplateChange');
    component.selectedTemplate= component.templateDropdown[1].value;
    fixture.detectChanges();
    const templateDropdown = fixture.debugElement.query(By.css('select'));
    fixture.whenStable().then(() =>{
        templateDropdown.nativeElement.value = 'Layer Summary - Authorized Share'
        templateDropdown.nativeElement.dispatchEvent(new Event('change'));
        fixture.detectChanges();
        expect(component.onTemplateChange).toHaveBeenCalledWith('authorize')
    })

}));

Error that I am getting

enter image description here

I am taking this Reference

mruanova
  • 4,119
  • 3
  • 30
  • 46
gary
  • 70
  • 3
  • 16

0 Answers0