Teste angular2: Não é possível vincular a 'ngModel', pois não é uma propriedade conhecida de 'input'

101

Estou tentando testar a ligação bidirecional angular2 para controle input. Aqui está o erro:

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

O app.component.html

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

O 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');
  }));  
});
beewest
fonte

Respostas:

214

Você precisa importar o FormsModulepara a TestBedconfiguração.

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

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

O que você está fazendo com o TestBedé configurar um NgModule do zero para o ambiente de teste. Isso permite que você adicione apenas o que é necessário para o teste, sem ter variáveis ​​externas desnecessárias que podem afetar o teste.

Paul Samsotha
fonte
42
Essa coisa angular parece tão aleatória. Obrigado pela ajuda.
Pete B.
11
Concordo, @PeteB. A injeção de dependência é tão grande ... ela faz tudo para você automagicamente ... APENAS NÃO SE ESQUEÇA DE IMPORTAR AQUI E NO_ERROR_SCHEMA e yada yda ...
Adam Hughes
Isso me livrou do meu erro, mas ele trava no Karma e não continua criando os outros componentes depois. Ele está preso agora sem erros.
BlockchainDeveloper
1

Tive o mesmo problema, mesmo depois de importar o módulo de formulários não foi resolvido. Então eu tive que usar uma alternativa ao ngModel para o campo de texto. Verifique este link :

Em resumo, usei [valor] para vincular o modelo ao campo de texto dessa forma.

([value])="searchTextValue"

Além disso, se você estiver usando o campo de data, será necessário vincular o modelo em ts. no html, chame o método

 (dateSelect)="onDateSelect($event)"

No script de tipo, use o código a seguir. Isso é aplicável apenas se você estiver usando o seletor Ngbdate.

  onDateSelect(event) {
  let year = event.year;
  let month = event.month <= 9 ? '0' + event.month : event.month;;
  let day = event.day <= 9 ? '0' + event.day : event.day;;
  let finalDate = year + "-" + month + "-" + day;
  this.finalDateVlaue = finalDate;
 }
Venkatesh K
fonte
Isso me economizou muito tempo. Todas essas peculiaridades nos bancos de teste Angular. Me deixando louco.
kiss-o-matic