web-dev-qa-db-fra.com

test angular2: impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'

J'essaie de tester la liaison bidirectionnelle angular2 pour le contrôle input. Voici l'erreur:

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>

Le 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');
  }));  
});
testingangularangular-cliangular2-testing
82
beewest

Vous devez importer la FormsModule dans la configuration TestBed.

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

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

Ce que vous faites avec TestBed consiste à configurer un NgModule à partir de zéro pour l'environnement de test. Cela vous permet d’ajouter uniquement ce qui est nécessaire pour le test sans avoir de variables extérieures inutiles qui pourraient affecter le test.

181
Paul Samsotha