使用 ngModel 进行 Angular 2 单元测试

Question

我正在使用 angular 2.1 的最新 angular-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();
        });
    });
});

有没有人暗示为什么这不起作用？

此外，我对async 和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);
  });
}));