How to mock ActivatedRoute in a jasmine test - jasmine

Question

I'm trying to mock the ActivatedRoute object is a test to simulate the passing of a parameter.
However every time the jasmine tests runs I get the following error:
Error: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?).
at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:485:22)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15700:1)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15535:1)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver._getInjectableMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15515:1)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver.getProviderMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15875:1)
at http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15786:1
at Array.forEach (<anonymous>)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15746:1)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15007:1)
at CompileMetadataResolver.webpackJsonp../node_modules/#angular/compiler/esm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/compiler/esm5/compiler.js:15848:26)
The Test looks like as follows:
import { TestBed } from '#angular/core/testing';
import { ReviewComponent } from './review.component';
import { ActivatedRoute, Router, Params } from '#angular/router';
import {AppModule} from "../app.module";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
class MockRouter {
navigate = jasmine.createSpy('navigate');
}
class MockActivatedRoute extends ActivatedRoute {
params: Observable<Params>;
constructor(parameters?: { [key: string]: any; }) {
super();
this.params = Observable.of(parameters);
}
}
describe('ReviewComponent', () => {
let mockActivatedRoute: MockActivatedRoute;
let mockRouter: MockRouter;
beforeEach(() => {
mockActivatedRoute = new MockActivatedRoute({'id': 1});
mockRouter = new MockRouter();
TestBed.configureTestingModule({
declarations: [ReviewComponent],
providers: [
{provide: ActivatedRoute, useValue: mockActivatedRoute},
{provide: Router, useValue: mockRouter}
],
imports: [AppModule]
}).compileComponents();
});
// beforeEach(async(() => {
//
// TestBed.configureTestingModule({
// declarations: [ ReviewComponent ],
// providers: [{provide: ActivatedRoute, useValue: activeRoute},
// {provide: Router, useValue: mockRouter}]
// })
// .compileComponents();
// }));
it('should create', () => {
const fixture = TestBed.createComponent(ReviewComponent);
fixture.detectChanges();
const editComponent = fixture.debugElement.componentInstance;
expect(editComponent).toBeTruthy();
});
// it('should have a review rating', () => {
// const compiled = fixture.debugElement;
// const title = compiled.query(By.css('.reviewRating'));
// expect(title).not.toBeNull();
// });
//
// it('should have a review product name', () => {
// const compiled = fixture.debugElement;
// const productName = compiled.query(By.css('.review-title'));
// expect(productName).not.toBeNull()
// });
//
// it('should have a header image', () => {
// const compiled = fixture.debugElement;
// const title = compiled.query(By.css('.reviewImageMain'));
// expect(title).not.toBeNull();
// });
});
I've tried a number of things to mock the object however as you can see from the log, for some reason the TestBed is not using the mock and is instead using import.
Can anyone help? I've lost so many hours today to this problem.
I almost forgot, the component looks like this:
import { Component, OnInit } from '#angular/core';
import {ActivatedRoute, Router} from "#angular/router";
import {OnDestroy} from "#angular/core/src/metadata/lifecycle_hooks";
#Component({
selector: 'app-review',
templateUrl: './review.component.html',
providers: [ActivatedRoute],
styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit, OnDestroy {
id: string;
private sub: any;
constructor(private route: ActivatedRoute, private router: Router){
}
cancel() {
this.router.navigate(['/search']);
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}

Answer 1

Got it :)
Wow, that was inconspicuous.
in review ReviewComponent in the providers I had included
providers: [ActivatedRoute]
This caused the the exception to happen, once I removed this line the test began to pass.
6 hours lost but bug found :)
import { Component, OnInit } from '#angular/core';
import {ActivatedRoute, Router} from "#angular/router";
import {OnDestroy} from "#angular/core/src/metadata/lifecycle_hooks";
#Component({
selector: 'app-review',
templateUrl: './review.component.html',
providers: [],
styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit, OnDestroy {
id: string;
private sub: any;
constructor(private route: ActivatedRoute, private router: Router){
}
cancel() {
this.router.navigate(['/search']);
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}