Unit testing errors for ngModel, custom pipe and modal [duplicate] - unit-testing

Question

This question already has answers here:
angular2 testing: Can't bind to 'ngModel' since it isn't a known property of 'input'
(2 answers)
Closed 5 years ago.
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:
If 'app-edit-message-modal' is an Angular component, then verify that it is part of this module.
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 { }

Answer 1

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 },
],
})