Angular unit Testing : TypeError: Cannot read property 'root' of undefined

Question

I'm working on unit testing under my Angular app.

My version of Angular is 4.0.0.

My component look like this:

component.ts:

import { GdfaClientService } from '../../../service/gdfa-client.service'; import { SharedclientService } from '../../../service/sharedclient.service'; import { Client } from '../../model/client'; import { RouteNavigator } from '../../util/route-navigator'; import { Component, OnInit } from '@angular/core'; import {MonitoringService} from '../../../service/monitoring.service'; @Component({   selector: 'app-queue-again',   templateUrl: './queue-again.component.html',   styleUrls: ['./queue-again.component.css'], }) export class QueueAgainComponent implements OnInit {    //-- variables --//   showError = false;   queueChoices = [];   selectedQueue;   selectedReason;   requestInProgress = false;   client: Client;   errorMessage: string;   queues: any;   bankNotAllowed: boolean = false;    constructor(private sharedclientService: SharedclientService, private gdfaClientService: GdfaClientService     , private router: RouteNavigator, private monitoringService: MonitoringService) { }    ngOnInit() {     this.client = this.sharedclientService.getShared360Client();     this.getQueues();     this.bankNotAllowed = this.sharedclientService.bankNotAllowed;   }     goToPrevious() {     this.router.goToHomeAccordingToProfile();   }    queueAgain() {     let currentNd = "";     let currentUniverse = "";     let currentCuid = "";     if (!this.selectedReason) {       return;     }     this.requestInProgress = true;      let reg = {       registrationId: this.client.registration.gdfaId,       gdfaQueueId: this.selectedQueue.id,       gdfaReasonId: this.selectedReason.id,       firstProfile: (this.client.firstProfile ? true : false)     };      this.gdfaClientService.queueAgain(reg).then(any => {         currentCuid = this.client.clientIdentity.customerId;          if (this.client.fromAdvSearch == undefined || this.client.fromAdvSearch == false) {        currentNd = this.client.nd;       if (currentNd != undefined && currentNd != "") {         if (currentNd == "0000000000") {           currentNd = "";           currentUniverse = "";         }         if (currentNd.substring(0, 2) == "06" || currentNd.substring(0, 2) == "07") {           currentUniverse = "Mobile";         } else {           currentUniverse = "Fixe";         }       }         }       this.trackReinsertClient(currentCuid, currentNd, currentUniverse);       this.requestInProgress = false;       this.showError = false;       this.sharedclientService.setShared360Client(new Client());       this.goToPrevious();     })       .catch(error => {         this.requestInProgress = false;         this.showError = true;         switch (error.status) {           case 403:             this.errorMessage = "Erreur lors de la réinjection du client : utilisateur inconnu";             console.log(this.errorMessage);             break;           case 500:             this.errorMessage = "Réinscription impossible";             console.log(this.errorMessage);             break;           default:             this.errorMessage = "Erreur lors de la réinjection du client";             console.log(this.errorMessage);         }       });   };     trackReinsertClient(cuid, nd, universe) {     let uri = "/api/gdfa/client/registration/reinsert";     let httpMethod = "PUT";     let name = "réinjection d'un client dans la file d'attente";     console.log('trackReinsertClient <' + cuid + '>');     this.monitoringService.trackingAction(name, uri, httpMethod, null, cuid, nd, universe);    }    selectQueue(queue) {     this.selectedQueue = queue;     this.selectedReason = false;   };    isSelectedQueue(queue) {     return this.selectedQueue.shortName == queue.shortName;   }    getQueues() {     let queueList = this.client.registration.queueAgainChoices;     // Search for residentiel queue and put it as selectedQueue     let indexSAVSAUMobile = -1;     let indexSAVSAUInternet = -1;     for (let queue of queueList) {       if (queue.shortName == 'RES')         this.selectedQueue = queue;     }      this.queues = queueList;     return queueList;   }    selectReason(reason) {     this.selectedReason = reason;    }     isSelectedReason(reason) {     if (this.selectedReason) {       return this.selectedReason.id == reason.id;     }     return null   }    getReasons(queue) {     let reasonList = this.selectedQueue.reasons;     return reasonList;   } } 

component.html:

<div>     <div [hidden]="!requestInProgress" id="div-spinner">         <img src="/assets/images/indicateur-attente-grand.gif"             class="spinner-loader" />     </div>     <div class="row">         <!-- fermeture de la recherche avancée -->         <div class="col-xs-1 pull-right closeCross">             <img id="ngClick_goToPreviousFromQueueAgain"                 src="/assets/images/asset_icon_close_popup_gray.png"                 class="pull-right mousePointer" (click)="goToPrevious()" />         </div>     </div>     <div class="row">         <div class="col-xs-10 col-xs-offset-1 error-message"             *ngIf="showError">{{errorMessage}}</div>         <div             class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0 register-bloc">             <div class="titre_bloc">File d'attente</div>             <div id="files-bloc">                 <div id="ngClick_selectQueueAgain" class="file-cell "                     *ngFor="let queue of queues | orderBy : 'id'"                            [ngClass]="{ 'selected-shop-queue': isSelectedQueue(queue)}"                     (click)='selectQueue(queue)'>                     <div class="vertical-center horizontal-middle file_nom">                         <div>{{queue.name}}</div>                     </div>                 </div>             </div>         </div>         <div             class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0 register-bloc">             <div class="titre_bloc">Motifs</div>             <div id="motifs-bloc">                 <div id="ngClick_queueAgain" class="motif-cell"                     [ngClass]="{'motif-cell-pro': selectedQueue?.reasons?.length == 4, 'motif-cell-selected':isSelectedReason(reason),                     'hide-class': (bankNotAllowed && reason.id === 12)}" [hidden]="bankNotAllowed && reason.id === 12"                     *ngFor="let reason of selectedQueue?.reasons | orderBy : 'motifOrder'"                     (click)='selectReason(reason)'>                     <div *ngIf="!bankNotAllowed || reason.id !== 12" class="mIcon">                             <img                                 src="/bower_components/nomadis/images-no-cache/{{reason?.imageName}}"                                 [ngClass]="{'motif-unique': client?.registration?.queue?.reasons?.length == 1}" />                             <span>{{reason.name}}</span>                     </div>                 </div>             </div>             <div class="col-sm-offset-4 col-sm-4  btn-validate-reinsert">                 <input id="validateReinsertBtn" type="submit" value="Valider"                     [ngClass]="{'queueAgain-disabled': !selectedReason}"                     class="btn btn-lg btn-primary btn-block"                     (click)='queueAgain()' />             </div>         </div>     </div>  </div> <router-outlet></router-outlet> 

As you can see I'm not using routeLink.

Within my test file config I've done this:

component.spec.ts:

import {async, ComponentFixture, TestBed, tick, fakeAsync} from '@angular/core/testing'; import {QueueAgainComponent} from './queue-again.component'; import {OrderByPipe} from 'app/home/pipe/order-by.pipe'; import {SharedclientService} from 'app/service/sharedclient.service'; import {GdfaClientService} from 'app/service/gdfa-client.service'; import {AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth} from 'angular2-jwt'; import {HttpModule} from '@angular/http'; import {EnvVarsService} from 'app/service/env-vars.service'; import {RouteNavigator} from 'app/home/util/route-navigator'; import {Router} from '@angular/router'; import {Observable} from 'rxjs/Observable'; import * as QueueAgainMocks from 'TU/mocks/queue-again-mocks'; import {RouterTestingModule} from '@angular/router/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core';  describe('QueueAgainComponent', () => {     let comp: QueueAgainComponent;     let fixture: ComponentFixture<QueueAgainComponent>;     let sharedclientService: SharedclientService;     let gdfaClientService: GdfaClientService;     let getShared360Client: jasmine.Spy;     let queueAgain: jasmine.Spy;     let client = QueueAgainMocks.CUSTOMER_MOCK;     let selectedQueue = QueueAgainMocks.SELECTED_QUEUE_MOCK;     let selectedReason = QueueAgainMocks.SELECTED_REASON;     let mockRouter = {         navigate: jasmine.createSpy('navigate')     };      // TestBed preparation (async)     beforeEach(async(() => {         TestBed.configureTestingModule({             imports: [HttpModule , RouterTestingModule],             declarations: [QueueAgainComponent, OrderByPipe],             providers: [SharedclientService, GdfaClientService, AuthHttp, EnvVarsService, RouteNavigator,                 {provide: Router, useValue: mockRouter},                 provideAuth({                     headerName: 'Authorization',                     headerPrefix: 'bearer',                     tokenName: 'token',                     tokenGetter: (() => localStorage.getItem('id_token')),                     globalHeaders: [{'Content-Type': 'application/json'}],                     noJwtError: true                 })             ],             schemas: [ NO_ERRORS_SCHEMA ]         }).compileComponents();     }));      // Fixture & Spies declarations     beforeEach(() => {         // Creation of the component fixture         fixture = TestBed.createComponent(QueueAgainComponent);         comp = fixture.componentInstance;         fixture.detectChanges();  // this line will call components ngOnInit() method           // Getting Services instances from fixture         sharedclientService = fixture.debugElement.injector.get(SharedclientService);         gdfaClientService = fixture.debugElement.injector.get(GdfaClientService);          // Call of fake methods of `sharedclientService` from the AlertServiceSpy         getShared360Client = spyOn(sharedclientService, 'getShared360Client').and.returnValue(client);         // Call of fake methods of `gdfaClientService` from the AlertServiceSpy         queueAgain = spyOn(gdfaClientService, 'queueAgain').and.callFake((reg) => {             return Observable.of('ok');         });          comp.ngOnInit();     });     // Test case of component compilation     it('should be defined', () => {         expect(comp).toBeDefined();     }); }); 

Although I've imported NO_ERRORS_SCHEMA and I've used a mockRouter, it seems that something is still going wrong with routing with this error:

TypeError: Cannot read property 'root' of undefined        at rootRoute (node_modules/@angular/router/bundles/router.umd.js:6110:30)       at _callFactory (packages/core/src/view/ng_module.ts:185:1)       at _createProviderInstance$1 (packages/core/src/view/ng_module.ts:124:1)       at resolveNgModuleDep (node_modules/@angular/core/bundles/core.umd.js:9517:17)       at _createClass (packages/core/src/view/ng_module.ts:158:1)       at _createProviderInstance$1 (packages/core/src/view/ng_module.ts:121:1)       at resolveNgModuleDep (node_modules/@angular/core/bundles/core.umd.js:9517:17)       at NgModuleRef_.Object.<anonymous>.NgModuleRef_.get (node_modules/@angular/core/bundles/core.umd.js:10609:16)       at resolveDep (node_modules/@angular/core/bundles/core.umd.js:11112:45)       at createClass (node_modules/@angular/core/bundles/core.umd.js:10976:32)       at createDirectiveInstance (node_modules/@angular/core/bundles/core.umd.js:10796:37)       at createViewNodes (packages/core/src/view/view.ts:354:1)       at createRootView (node_modules/@angular/core/bundles/core.umd.js:12139:5)       at callWithDebugContext (packages/core/src/view/services.ts:815:1)       at Object.debugCreateRootView [as createRootView] (node_modules/@angular/core/bundles/core.umd.js:12842:12)       at ComponentFactory_.Object.<anonymous>.ComponentFactory_.create (node_modules/@angular/core/bundles/core.umd.js:9904:46)       at initComponent (node_modules/@angular/core/bundles/core-testing.umd.js:924:49)       at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:392:26)       at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39)       at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:391:32)       at Object.onInvoke (node_modules/@angular/core/bundles/core.umd.js:3922:33)       at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:391:32)       at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone-node.js:142:43)       at NgZone.Object.<anonymous>.NgZone.run (node_modules/@angular/core/bundles/core.umd.js:3853:69)       at TestBed.Object.<anonymous>.TestBed.createComponent (packages/core/testing/src/test_bed.ts:471:1)       at Function.Object.<anonymous>.TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:691:29)       at src/app/home/advisor/queue-again/queue-again.component.spec.ts:53:27 

From the last line of the log that points on the 53:27 line which is exactly:

fixture = TestBed.createComponent(QueueAgainComponent); 

So it seems that it's not able to create the fixture.

Any ideas?

Answer 1

I had the same problem, just figured it out. Remove the line:

{provide: Router, useValue: mockRouter} 

and it will work.

The thing is when you import RouterTestingModule you should remove all router mocked providers, save for ActiveRoute, etc.