2016-09-20 23 views
45

'un bilinen bir özelliği olmadığından, input denetimi için angular2 iki yönlü bağlanmayı test etmeye çalışıyorum.angular2 testing: 'ngModel'e bağlanamıyor çünkü' input '

Can't bind to 'ngModel' since it isn't a known property of 'input'. 

app.component.html

<input id="name" type="text" [(ngModel)]="name" /> 
<div id="divName">{{name}}</div> 

app.component.ts

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent implements OnInit { 
    name: string;  
} 

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 
import { AppService } from './app.service'; 
describe('App: Cli',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AppComponent 
     ], 
     providers:[AppService] 
    }); 
    }); 

    it('divName', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let comp = fixture.componentInstance; 
    comp.name = 'test'; 
    fixture.detectChanges(); 

    let compiled = fixture.debugElement.nativeElement;  
    expect(compiled.querySelector('divName').textContent).toContain('test'); 
    })); 
}); 
: İşte hatadır

cevap

103

FormsModule int dosyasını içe aktarmanız gerekiyor o TestBed yapılandırması.

import { FormsModule } from '@angular/forms'; 

TestBed.configureTestingModule({ 
    imports: [ FormsModule ], 
    declarations: [ 
    AppComponent 
    ], 
    providers:[AppService] 
}); 
+15

Bu açısal şeyler çok rasgele görünüyor. Yardımın için teşekkürler. –

+0

teşekkürler adamım. –

+2

Agreed, @PeteB testinde benim için çalıştı. Bağımlılık enjeksiyonu çok büyük .... sizin için her şeyi otomatik olarak yapıyor ... SADECE BURADA BURADA İTHALAT VE NO_ERROR_SCHEMA ve ya yda ... –