Unit testing errors for ngModel, custom pipe and modal

Question

Trying to test my Angular application, but when trying to create my component I get multiple errors.

Can't bind to 'ngModel' since it isn't a known property of 'input'.
The pipe 'sortOnLike' could not be found.
'app-edit-message-modal' is not a known element:
1. If 'app-edit-message-modal' is an Angular component, then verify that it is part of this module.
2. If 'app-edit-message-modal' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Answers to similar errors haven't helped me much.

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

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

snippets from 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. You don't include the `FormsModule` in the test bed. 2. Or, for that matter, the `sortOnLike` pipe. 3. Or `app-edit-message-modal`, come to think of it. — jonrsharpe, Apr 24 '17 at 21:50
See also e.g. http://stackoverflow.com/q/39467740/3001761, http://stackoverflow.com/q/39597952/3001761 and various other questions where they hadn't included the component's dependencies in the `TestBed`. Could you expand on *"Answers to similar errors haven't helped me much"*, because I've found quite a few that do - which answers, what have you tried and what happened? — jonrsharpe, Apr 24 '17 at 21:55

score 2 · Accepted Answer · answered Apr 24 '17 at 21:50

in your test, inside beforeEach block. You need to add the following to TestBed.configureTestingModule

All used pipes, components and directives have to be declared. in your case: SortOnLikePipe and EditMessageModalComponent
all used modules have to be imported. in your case: FormsModule
all needed services have to be provided

Here are the ones you are missing: I'd imagine you might be missing more..

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

Unit testing errors for ngModel, custom pipe and modal

1 Answers1