angular2测试:由于它不是'input'的已知属性,因此无法绑定到'ngModel'


101

我正在尝试测试angular2双向绑定的控件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');
  }));  
});

Answers:


213

您需要将导入FormsModuleTestBed配置中。

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

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

您正在做的TestBed是从头开始为测试环境配置NgModule。这样,您就可以仅添加测试所需的内容,而不必使用可能影响测试的不必要的外部变量。


42
这种棱角分明的东西似乎太随意了。谢谢您的帮助。
皮特·B

11
同意@PeteB。依赖注入是如此出色。...它可以为您自动完成所有事情...只是不要忘记在这里导入,而NO_ERROR_SCHEMA和yada yda ...
Adam Hughes

这消除了我的错误,但是它挂在Karma中,之后不再继续创建其他组件。现在卡住了,没有错误。
BlockchainDeveloper

1

我有同样的问题,即使在导入表单模块后也没有解决。所以我不得不对文本字段使用ngModel的替代方法。请检查此链接

总而言之,我已经使用[值]像这样为文本字段绑定模型。

([value])="searchTextValue"

另外,如果您使用日期字段,则需要在ts中绑定模型。在html中,调用方法

 (dateSelect)="onDateSelect($event)"

在类型脚本中,使用以下代码。仅在使用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;
 }

这节省了我很多时间。所有这些怪癖都存在于Angular测试台中。使我抓狂。
– Kiss-o-matic
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.