ngModel、自定义管道和modal的单元测试错误[重复]

Question

试图测试我的Angular应用程序，但当试图创建我的组件时，我得到了多个错误。

1. 无法绑定到“ngModel”，因为它不是“input”的已知属性

类似错误的答案对我帮助不大。

仪表板规格ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from "@angular/router";
import { MockAF } from "../../providers/mockAf";
import { AF } from "../../providers/af";
import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;
  let routerStub;

  beforeEach(async(() => {
    routerStub = {
      navigate: jasmine.createSpy('navigate')
    };
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ],
      providers: [
        { provide: AF, useClass: MockAF },
        { provide: Router, useValue: routerStub },
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
 });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

来自HTMLfile的片段：

dashboard.component.html

<figure class="highlight">
   <input type="textarea" class="message-text" [(ngModel)]="newMessage"
   (keyup.enter)="sendMessage()">
   <a class="send-message" (click)="sendMessage()">SEND</a>
</figure>


<a *ngIf="isMe(message.email)" type='edit' class='edit-text' style="cursor: 
    pointer;" (click)="show(message.$key, message.message)">Edit</a>
<!-- Modal (popup) for editing messages belonging to you -->
<app-edit-message-modal>
// modal form 
</app-edit-message-modal>


<div *ngFor="let message of afService.messages | async | 
    sortOnLike:'votes':false">

dashboard.component.ts片段

import { Component, OnInit, AfterViewChecked, ElementRef, ViewChild } from 
  '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AF } from '../../providers/af';
import { FirebaseListObservable, AngularFire } from 'angularfire2';
import { Bubble } from './bubble';
import { EditMessageModalComponent } from '../edit-message-modal/edit-
   message-modal.component';

show(key: string, message: string): void {
  this.modalMessage = message;
  this.modalMessageKey = key;
  this.modal.show();
}

hide(): void {
  this.modalMessage = null;
  this.modalMessageKey = null;
  this.modal.hide();

}

应用程序。单元ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes }   from '@angular/router';
import { AngularFireModule } from 'angularfire2';
import { AppComponent } from './app.component';
import { RegistrationPageComponent } from './registration-page/registration-
  page.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AF } from '../providers/af';
import { FrontscreenComponent } from './frontscreen/frontscreen.component';
import { StudentDashboardComponent } from './student-dashboard/student-
  dashboard.component';
import { LecturerDashboardComponent } from './lecturer-dashboard/lecturer-
  dashboard.component';
import { firebaseConfig } from './config';
import { EditCourseModalComponent } from './edit-course-modal/edit-course-
  modal.component';
import { EditMessageModalComponent } from './edit-message-modal/edit-
  message-modal.component';
import { SortOnLikePipe } from './sort-on-like.pipe'

@NgModule({
declarations: [
  AppComponent,
  RegistrationPageComponent,
  LoginPageComponent,
  DashboardComponent,
  FrontscreenComponent,
  StudentDashboardComponent,
  LecturerDashboardComponent,
  EditCourseModalComponent,
  EditMessageModalComponent,
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  AngularFireModule.initializeApp(firebaseConfig),
  RouterModule.forRoot(routes),
  SortOnLikePipe
],
providers: [AF],
bootstrap: [AppComponent],

})
export class AppModule { }

Answer 1

在测试中，在每个块之前的内。您需要将以下内容添加到TestBed。配置测试模块

1. 所有使用的管道，组件和指令必须声明.在您的情况下：SortOnLikePipe和EditMessageModalComponent
2. 所有使用的模块都必须被导入.在你的情况下：FormsMoules
3. 必须提供所有需要的服务

以下是你错过的那些：我想你可能错过更多。。

TestBed.configureTestingModule({
      declarations: [ DashboardComponent, SortOnLikePipe, EditMessageModalComponent  ],
      imports:[FormsModule]
      providers: [
        { provide: AF, useClass: MockAF },
        { provide: Router, useValue: routerStub },
      ],
    })