ngModel，自定义管道和模态的单元测试错误

-2

试图测试我的Angular应用程序，但是当尝试创建我的组件时，我得到了多个错误。ngModel，自定义管道和模态的单元测试错误

无法绑定到'ngModel'，因为它不是'input'的已知属性。
无法找到管道'sortOnLike'。
“应用 - 编辑消息模态”不是已知的元件：
1. 如果“应用 - 编辑消息模态”是角状的部件，然后验证它是该模块的一部分。
2. 如果'app-edit-message-modal'是一个Web组件，那么将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas'以禁止此消息。

解答类似的错误，并没有帮助我很多。

dashboard.spec.ts从HTMLFILE

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(); 
    }); 
});

片断：

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();

}

app.module.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 { }

来源

2017-04-24 martvo

1 。你不在测试平台中包含'FormsModule'。或者，就此而言，“sortOnLike”管道。 3.或者'app-edit-message-modal'，来想一想。 – jonrsharpe

参见例如http://stackoverflow.com/q/39467740/3001761，http://stackoverflow.com/q/39597952/3001761和其他各种问题，他们没有在“TestBed”中包含组件的依赖关系。你能否扩展*“类似错误的答案对我没有多大帮助”*，因为我发现了很多这样做 - 哪些答案，你试过了什么，发生了什么？ – jonrsharpe

在您的测试，内部beforeEach块。您需要将以下添加到TestBed.configureTestingModule

所有使用过的管道，组件和指令必须宣布。在你的情况下：SortOnLikePipe和EditMessageModalComponent
所有使用的模块必须是进口。你的情况：FormsModule
所需的所有服务都要提供

这里是你缺少的那些：我想像你可能会丢失更多..

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

来源

2017-04-24 21:50:33

ngModel，自定义管道和模态的单元测试错误

回答

相关问题