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

Posted 2023-03-13

【中文标题】ngModel、自定义管道和模式的单元测试错误[重复]

【英文标题】：Unit testing errors for ngModel, custom pipe and modal [duplicate]

【发布时间】：2017-09-21 17:33:07

【问题描述】：

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

无法绑定到“ngModel”，因为它不是“输入”的已知属性。 找不到管道“sortOnLike”。 'app-edit-message-modal' 不是已知元素：
如果“app-edit-message-modal”是一个 Angular 组件，则验证它是否是该模块的一部分。 如果“app-edit-message-modal”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

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

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

来自 html 文件的片段：

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">

sn-ps 来自 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  

【问题讨论】：

1.您没有将FormsModule 包含在测试台中。 2. 或者，就此而言，sortOnLike 管道。 3. 或者app-edit-message-modal，想想看。

参见例如***.com/q/39467740/3001761、***.com/q/39597952/3001761 和其他各种问题，他们没有在 TestBed 中包含组件的依赖项。您能否扩展一下“类似错误的答案对我没有多大帮助”，因为我发现了很多可以做的事情 - 哪些答案，您尝试了什么以及发生了什么？

【参考方案1】：

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

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

以下是您缺少的： 我想你可能会错过更多..

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