角度2 ngModelによるユニットテスト

Question

角度2.1の最新の角度-cliを使用しています。 書きたいコンポーネントテストは簡単です。サービスからデータを取得して表示します。

データが段落に単純に表示されても、それがテキストエリアにバインドされている場合は機能しません。以下

私のテンプレートからの抜粋である：

<p *ngIf="!isBusy" class="twain"><i>{{settings.blockLoginMessage}}</i></p> <textarea id="blockLoginMessage" name="blockLoginMessage" [(ngModel)]="settings.blockLoginMessage" class="form-control"></textarea>

と対応するテスト：

describe('SettingsComponent',() => { 

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [SharedModule, TranslateModule.forRoot()], 
     declarations: [SettingsComponent], 
     providers: [ 
      Overlay, 
      ToastsManager, 
      ViewContainerRef, 
      TranslateService, 
      SettingsService 
     ] 
    }); 

    fixture = TestBed.createComponent(SettingsComponent); 
    comp = fixture.componentInstance; 

    settingsService = fixture.debugElement.injector.get(SettingsService); 

    getSettingsSpy = spyOn(settingsService, 'getSettings') 
     .and.returnValue(Observable.of(new Settings(true, false, 'test')).delay(500).toPromise()); 

    setSettingsSpy = spyOn(settingsService, 'setSettings') 
     .and.returnValue(Observable.of(true).delay(500)); 

    fixture.detectChanges(); 
}); 

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

it('should show busy indicator as long as there are no settings',() => { 
    let busyPanel = fixture.debugElement.query(By.css('#busyPanel')); 
    expect(busyPanel).not.toBeNull('cant find busy'); 
}); 

it('should show loaded settings after observable finished (done)', done => { 
    fixture.detectChanges(); 

    // get the spy promise and wait for it to resolve 
    getSettingsSpy.calls.mostRecent().returnValue.then(() => { 
     fixture.detectChanges(); 

     let de = fixture.debugElement.query(By.css('.twain')); 
     let el = de.nativeElement; 

     expect(el.textContent).toBe('test', 'show loaded settings'); 

     let de2 = fixture.debugElement.query(By.css('#blockLoginMessage')); 
     let el2: HTMLTextAreaElement = de2.nativeElement; 

     expect(el2.textContent).toBe('test', 'show loaded settings'); 

     done(); 
    }); 
}); 

}）。

誰かがこれがうまくいかない理由を知っていますか？ また、私の非同期とfakeasyncの試みは、上記のような私の約束が遅れている場合には完全に失敗します。

Answer 1

ngModel更新はRC5以降非同期に更新されます。あなたは、非同期の方法、それをテストする必要があります。

it('should check initial value of ngModel', async(() => { 
    let fixture = TestBed.createComponent(TestComponent); 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
    let el = fixture.debugElement.query(By.css('select your input')); 
    let actual = selectElement.nativeElement.value; 
    expect(expected).toBe(actual); 
    }); 
}));