Question

尝试测试我的Angular应用程序，但在尝试创建我的组件时，我遇到了多个错误。

无法绑定到＆＃39; ngModel＆＃39;因为它不是“输入”的已知属性。
烟斗＆＃39; sortOnLike＆＃39;无法找到。
＆＃39;应用程序编辑的消息模态＆＃39;不是一个已知的元素：
1. 如果＆＃39; app-edit-message-modal＆＃39;是一个Angular组件，然后验证它是否是该模块的一部分。
2. 如果＆＃39; app-edit-message-modal＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。

类似错误的答案对我没什么帮助。

dashboard.spec.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();

}

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 { }

Answer 1

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

所有使用过的管道，组件和指令必须声明。在您的情况下：SortOnLikePipe和EditMessageModalComponent
所有使用过的模块都必须导入。在您的情况下：FormsModule
所有需要的服务必须提供

以下是您遗失的内容：我想你可能会错过更多......

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

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

1 个答案: