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
I am taking this Reference