角度2ユニットテストの選択ドロップダウン値

Question

私は郡のドロップダウンを持っています。デフォルト値があります。ユーザーは国を選択できます。変更すると、ユーザーは正しい国のページにリダイレクトされます。どちらが機能しているか。

しかし、私は選択ボックスでユニットテストのデフォルト値を試しています。しかし私は空の文字列/値selectEl.nativeElement.valueが''であることを続けています。誰にでも何かアイデアがありますか？

// locale-component.ts 
import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { cultures} from '../../../config/config'; 

@Component({ 
    selector: 'app-locale', 
    templateUrl: './locale.component.html', 
    styleUrls: ['./locale.component.scss'] 
}) 
export class LocaleComponent { 

    cultures = cultures; 

    constructor() {} 

    onLocaleChange(locale) { 
    const str = window.location.href.replace(new RegExp(`/${this.cultures.default}/`), `/${locale}/`); 
    window.location.assign(str); 
    } 
} 


    // locale.component.spec.ts 

    beforeEach(() => { 
    fixture = TestBed.createComponent(LocaleComponent); 
    component = fixture.componentInstance; 
    component.cultures = { 
     default: 'en-ca', 
     supported_cultures: [ 
     { "name": "United States", "code": "en-us" }, 
     { "name": "Canada (English)", "code": "en-ca" }, 
     { "name": "Canada (Français)", "code": "fr-ca" } 
     ] 
    } 
    fixture.detectChanges(); 
    }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 

    it('should select the correct flag/locale by default',() => { 
    fixture.detectChanges(); 
    const selectEl = fixture.debugElement.query(By.css('select')) 
    console.log(selectEl) 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
     expect(selectEl.nativeElement.value).toEqual('en-ca'); 
    }); 

    }); 


<!-- locale.component.html --> 

<label class="locale locale--footer"> 
    <div class="locale__custom-select locale__custom-select__button locale__custom-select__ff-hack"> 
    <select [ngModel]="cultures.default" (ngModelChange)="onLocaleChange($event)"> 
     <option *ngFor="let locale of cultures.supported_cultures" [ngValue]="locale.code">{{locale.name}}</option> 
    </select> 
    </div> 
</label> 

Answer 1

"whenStable（）内のdetectChanges（）を呼び出すと、ドロップダウンが設定されます。

fixture.whenStable().then(() => { 
    fixture.detectChanges(); 
    expect(selectEl.nativeElement.value).toEqual('en-ca'); 
});