angular - 下拉选择角 5 的单元测试

Question

我正在尝试测试下拉选择，我能够获取 nativeElement 和选项，但我面临调度事件错误

一些未捕获事件的方式。

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>

零件

   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);
}

组件.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')
    })

}));

我得到的错误

我正在接受这个参考

标签： angularjasmineangular5