Develop Reference

Angular 10 Test: Component Resolver Data Subscription Error

I've spend the last few days trying to get up to speed with ng test and all the spec files #angular/cli creates when creating components and, well, pretty much else.
As I was working on my own portfolio website, I have come across an issue that I cannot seem to understand or fix.
I have this component (pretty vanilla stuff):
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Title } from '#angular/platform-browser'
import { ProjectDetails } from './project-details'
#Component({
selector: 'app-projects-details',
templateUrl: './projects-details.component.html',
styleUrls: ['./projects-details.component.sass']
})
export class ProjectsDetailsComponent implements OnInit {
// Class variables
currentContent: ProjectDetails
constructor(
private route : ActivatedRoute,
private title: Title
) { }
ngOnInit() {
// Assign the data to local variable for use
this.route.data.subscribe(content => {
this.currentContent = content.project.view //<-- This line causes the issue
// Set the title for the Projects view
this.title.setTitle(this.currentContent.view_title)
})
}
}
And this spec file (more vanilla stuff):
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { RouterTestingModule } from '#angular/router/testing'
import { ProjectsDetailsComponent } from './projects-details.component';
import { ProjectDetails } from './project-details'
describe('ProjectsDetailsComponent', () => {
let component: ProjectsDetailsComponent;
let fixture: ComponentFixture<ProjectsDetailsComponent>;
const projectDetails : ProjectDetails = { /* valid object content */ }
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[
RouterTestingModule
],
declarations: [ ProjectsDetailsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectsDetailsComponent);
component = fixture.componentInstance;
component.currentContent = projectDetails
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
When running the tests, I get this error:
TypeError: content.project is undefined in http://localhost:9876/_karma_webpack_/main.js (line 1576)
So, I'm not sure exactly what's going on here. No matter what I do, the error prevails.I have a similarly setup component that doesn't have this issue and a side by side comparison shows no differences in the spec.ts file aside from imports.
I tried changing the file to this:
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { RouterTestingModule } from '#angular/router/testing'
import { ProjectsDetailsComponent } from './projects-details.component';
import { ProjectDetails } from './project-details'
import { ActivatedRoute } from '#angular/router';
describe('ProjectsDetailsComponent', () => {
let component: ProjectsDetailsComponent;
let fixture: ComponentFixture<ProjectsDetailsComponent>;
const projectDetails : ProjectDetails = {/* valid content */}
beforeEach(async(() => {
TestBed.configureTestingModule({
// imports:[
// RouterTestingModule
// ],
providers: [
{ provide: ActivatedRoute, useValue: projectDetails }
],
declarations: [ ProjectsDetailsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectsDetailsComponent);
component = fixture.componentInstance;
component.currentContent = projectDetails
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Which changes the error to this (which confuses me more):
TypeError: this.route.data is undefined in http://localhost:9876/_karma_webpack_/main.js (line 1575)
The question to the community: how do I fix this? What's the reason this error is coming up?

Instead of providing the raw projectDetails, provide an Observable in its data property:
import {of} from 'rxjs';
...
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
// Properly provide the activated route mock object.
{ provide: ActivatedRoute, useValue: { data: of(projectDetails) } }
],
declarations: [ ProjectsDetailsComponent ]
})
.compileComponents();
}));
...
If you look at how you access the route data, you can see that it uses an Observable:
this.route.data.subscribe(content => {...});

Angular 8 testing component with karma fails

I'm trying to start testing my component. The first thing that I wanted to test is if the ngOnInit calls the correct services.
agreement.component.ts:
constructor(private agreementService: AgreementService,
private operatorService: OperatorService,
private accountService: AccountService,
private route: ActivatedRoute,
private router: Router,
private sessionService: SessionService,
private settingsService: SettingsService) {
this.agreementId = Number(this.route.snapshot.paramMap.get('agreementId'));
}
async ngOnInit() {
this.session = await this.sessionService.getSession();
this.settings = await this.settingsService.getSettings();
this.operatorService.getOperators(this.session.bic).subscribe(data => {
this.operators = data;
});
...
}
agreement.component.spec.ts
import {AgreementComponent} from './agreement.component';
import {async, TestBed} from '#angular/core/testing';
import {ActivatedRoute, convertToParamMap, Router} from '#angular/router';
import {RouterTestingModule} from '#angular/router/testing';
import {AgreementService} from '../../../services/agreement.service';
import {AccountService} from '../../../services/account.service';
import {SessionService} from '../../../services/session.service';
import {SettingsService} from '../../../services/settings.service';
describe('agreementComponent', () => {
let mockAgreementService: AgreementService;
let mockOperatorService;
let mockAccountService: AccountService;
let mockRoute: ActivatedRoute;
let mockRouter: Router;
let mockSessionService: SessionService;
let mockSettingsService: SettingsService;
let component: AgreementComponent;
beforeEach(async(() => {
mockAgreementService = jasmine.createSpyObj(['getAgreement']);
mockOperatorService = jasmine.createSpyObj(['getOperators']);
mockAccountService = jasmine.createSpyObj(['getFeeAccounts']);
mockRoute = jasmine.createSpyObj(['route']);
mockRouter = jasmine.createSpyObj(['router']);
mockSessionService = jasmine.createSpyObj(['getSession']);
mockSettingsService = jasmine.createSpyObj(['getSettings']);
TestBed.configureTestingModule({
declarations: [AgreementComponent],
imports: [
RouterTestingModule
],
providers: [
{
provide: ActivatedRoute, useValue:
{
snapshot: {
paramMap: convertToParamMap({agreementId: '0'})
}
}
},
]
});
component = new AgreementComponent(mockAgreementService, mockOperatorService, mockAccountService,
mockRoute, mockRouter, mockSessionService, mockSettingsService);
}));
it('should call operators service', () => {
component.ngOnInit();
expect(mockOperatorService).toHaveBeenCalled();
});
});
Currently I'm getting:
Failed: Cannot read property 'paramMap' of undefined
TypeError: Cannot read property 'ngOnInit' of undefined
I'm really sure this code lacks a lot of things in order to work fine, I just can't figure out what exactly is missing and what should be done differently, because googling my errors got me confused with ton of different solutions. I'm pretty new with angular testing so would like to have some pieces of advice how to write tests in the correct way.

Take a different approach by creating Stubs as explained in one of my articles.
Created reusable stubs as:
export class MockOperatorService{
getOperators(){
return of({data: "someVal"})
}
}
and so on for other other services.
Use RouterTestingModule as and when required in imports
Mock ActivatedRoute and other services in as below:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AgreementComponent],
imports: [
RouterTestingModule
],
providers: [
{
provide: ActivatedRoute, useValue:
{
snapshot: {
paramMap: convertToParamMap({agreementId: '0'})
}
}
},
{provide: OperatorService , useClass: MockOperatorService},
{....similarly for AgreementService etc etc}
]
});
}));
beforeEach(() => {
fixture = TestBed.createComponent(AgreementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
I realized that there is a lack of proper set of articles to learn about angular testing so I wrote collection of articles which you can find on the bottom of this page. I hope it'll help
Update:
To spy as asked in comment, you can do:
it('should call getOperators service in ngOnInit', () => {
spyOn(component.operatorService,"getOperators").and.callThrough();
component.ngOnInit();
expect(component.operatorService.getOperators).toHaveBeenCalled();
// you can also be more specific by using ".toHaveBeenCalledWith()"
});

Jasmine error while testing redux dispatch

I'm throwing a coin in the ocean after spending a couple hours trying to fix an ngRedux testing error.
Here is the component itself, as you can see, it's calling the ModuleActions:
#Component
class TestedClass {
constructor(private actions: ModuleActions) {}
restoreDefault() {
this.action.reloadPageModule(true);
}
}
Here is the module action class, I'm using an if to dispatch the action or not, because I also call it from an epic:
#Injectable()
export class ModuleActions {
constructor(private ngRedux: NgRedux<PageModules>) {}
...
reloadPageModule(dispatch?: boolean) {
if(dispatch) {
this.ngRedux.dispatch({
type: ModuleActions.RELOAD_PAGE_MODULES,
meta: { status: 'success' }
});
} else {
return {
type: ModuleActions.RELOAD_PAGE_MODULES,
meta: { status: 'success' }
};
}
}
}
And this is my testedClass component test:
it('should fire the reload page module action', () => {
const executeActionSpy = spyOn(component['action'], 'loadSucceeded');
component.restoreDefault();
expect(executeActionSpy).toHaveBeenCalled()
})
...
const compileAndCreate = () => {
TestBed.configureTestingModule({
declarations: [
...
],
providers: [
ModuleActions,
NgRedux
]
}).compileComponents().then(() => {
fixture = TestBed.createComponent(EditorComponent);
component = fixture.componentInstance;
})
...
This is giving me a this.ngRedux.dispatch() is not a function error when called from the

In order to fix it, I modified my test to use an import of NgReduxTestingModule instead of a providers of NgRedux:
import { NgReduxTestingModule } from '#angular-redux/store/testing';
TestBed.configureTestingModule({
imports: [NgReduxTestingModule, ...],
providers: [
...

Can't run service in Angular2 test (code copy pasted from the docs)

I have the following error (unit testing Angular2):
Cannot configure the test module when the test module has already been
instantiated. Make sure you are not using inject before
TestBed.configureTestingModule
Here is my code (it's basically a copy paste from the angular docs) which throws the above error:
import { TestBed, async } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component'
import { MyServiceService } from './my-service.service'
beforeEach(() => {
// stub UserService for test purposes
let userServiceStub = {
isLoggedIn: true,
user: { name: 'Test User'}
};
TestBed.configureTestingModule({
declarations: [ AppComponent],
providers: [ {provide: MyServiceService, useValue: userServiceStub } ]
});
let fixture = TestBed.createComponent(AppComponent);
let comp = fixture.componentInstance;
// UserService from the root injector
let userService = TestBed.get(MyServiceService);
// get the "welcome" element by CSS selector (e.g., by class name)
let de = fixture.debugElement.query(By.css('.nesto'));
let el = de.nativeElement;
it('should welcome "Bubba"', () => {
userService.user.name = 'something'; // welcome message hasn't been shown yet
fixture.detectChanges();
expect(el.textContent).toContain('some');
});
});
I want to run a service but it seems that I just can't do that.

The most likely problem is that you're attempting to run testing within your beforeEach(). You need to make sure all it() methods are outside/after the beforeEach():
beforeEach(() => {
// stub UserService for test purposes
let userServiceStub = {
isLoggedIn: true,
user: { name: 'Test User'}
};
TestBed.configureTestingModule({
declarations: [ AppComponent],
providers: [ {provide: MyServiceService, useValue: userServiceStub } ]
});
let fixture = TestBed.createComponent(AppComponent);
let comp = fixture.componentInstance;
// get the "welcome" element by CSS selector (e.g., by class name)
let de = fixture.debugElement.query(By.css('.nesto'));
let el = de.nativeElement;
});
it('should welcome "Bubba"', inject([MyServiceService], (userService) => {
userService.user.name = 'something'; // welcome message hasn't been shown yet
fixture.detectChanges();
expect(el.textContent).toContain('some');
}));

This works, removed the instance in the beforeEach() and injected into the it().
All credits go to Z. Bagley
import { TestBed, async, inject } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component'
import { MyServiceService } from './my-service.service'
import { Inject } from '#angular/core';
beforeEach(() => {
// stub UserService for test purposes
let userServiceStub = {
isLoggedIn: true,
user: { name: 'Test User'}
};
TestBed.configureTestingModule({
declarations: [ AppComponent],
providers: [ {provide: MyServiceService, useValue: userServiceStub } ]
});
});
it('should welcome "Bubba"', inject([MyServiceService], (userService) => {
let fixture=TestBed.createComponent(AppComponent);
fixture.detectChanges();
expect(userService.user.name).toContain('se');
}));

Angular 2 Final Release Router Unit Test

How do I unit test routers in Angular version 2.0.0 with karma and jasmine?
Here's what my old unit test looks like in version 2.0.0-beta.14
import {
it,
inject,
injectAsync,
beforeEach,
beforeEachProviders,
TestComponentBuilder
} from 'angular2/testing';
import { RootRouter } from 'angular2/src/router/router';
import { Location, RouteParams, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT } from 'angular2/router';
import { SpyLocation } from 'angular2/src/mock/location_mock';
import { provide } from 'angular2/core';
import { App } from './app';
describe('Router', () => {
let location, router;
beforeEachProviders(() => [
RouteRegistry,
provide(Location, {useClass: SpyLocation}),
provide(Router, {useClass: RootRouter}),
provide(ROUTER_PRIMARY_COMPONENT, {useValue: App})
]);
beforeEach(inject([Router, Location], (_router, _location) => {
router = _router;
location = _location;
}));
it('Should be able to navigate to Home', done => {
router.navigate(['Home']).then(() => {
expect(location.path()).toBe('');
done();
}).catch(e => done.fail(e));
});
});

For testing we now create a testing module using TestBed. We can use the TestBed#configureTestingModule and pass a metadata object to it the same way we would pass to #NgModule
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ /* modules to import */ ],
providers: [ /* add providers */ ],
declarations: [ /* components, directives, and pipes */ ]
});
});
For routing, instead of using the normal RouterModule, we would instead use RouterTestingModule. This sets up the Router and Location, so you don't need to yourself. You can also pass routes to it, by calling RouterTestingModule.withRoutes(Routes)
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent }
])
]
})
To get the Location and Router in the test, the same thing works, as in your example.
let router, location;
beforeEach(() => {
TestBed...
});
beforeEach(inject([Router, Location], (_router: Router, _location: Location) => {
router = _router;
location = _location;
}));
You could also inject into each test as necessary
it('should go home',
async(inject([Router, Location], (router: Router, location: Location) => {
})));
The async above is used like done except we don't need to explicitly call done. Angular will actually do that for us after all asynchronous tasks are complete.
Another way to get the providers is from the test bed.
let location, router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent }
])],
});
let injector = getTestBed();
location = injector.get(Location);
router = injector.get(Router);
});
Here's a complete test, refactoring your example
import { Component } from '#angular/core';
import { Location } from '#angular/common';
import { Router } from '#angular/router';
import { RouterTestingModule } from '#angular/router/testing';
import { fakeAsync, async, inject, TestBed, getTestBed } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
#Component({
template: `
<router-outlet></router-outlet>
`
})
class RoutingComponent { }
#Component({
template: ''
})
class DummyComponent { }
describe('component: RoutingComponent', () => {
let location, router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent }
])],
declarations: [RoutingComponent, DummyComponent]
});
});
beforeEach(inject([Router, Location], (_router: Router, _location: Location) => {
location = _location;
router = _router;
}));
it('should go home', async(() => {
let fixture = TestBed.createComponent(RoutingComponent);
fixture.detectChanges();
router.navigate(['/home']).then(() => {
expect(location.path()).toBe('/home');
console.log('after expect');
});
}));
});
UPDATE
Also, if you want to simply mock the router, which actually might be the better way to go in a unit test, you could simply do
let routerStub;
beforeEach(() => {
routerStub = {
navigate: jasmine.createSpy('navigate'),
};
TestBed.configureTestingModule({
providers: [ { provide: Router, useValue: routerStub } ],
});
});
And in your tests, all you want to do is test that the stub is called with the correct argument, when the component interacts with it
expect(routerStub.navigate).toHaveBeenCalledWith(['/route']);
Unless you actually want to test some routing, this is probably the preferred way to go. No need to set up any routing. In a unit test, if you are using real routing, you're involving unnecessary side effects that could affect what you are really trying to test, which is just the behavior of the component. And the behavior of the component is to simply call the navigate method. It doesn't need to test that the router works. Angular already guarantees that.

Good approach suggested by Paul
I have also configure my routing same way but additionally I have added service to update some data for routing and then check for current location.
so you can add service to update data on component which render some data and then will check about navigation.
configure below in TestBed.configureTestingModule
providers : [MyService]
then create get service in foreach
myService= TestBed.get(MyService);
update some data from service like
myService.someMethodCall();
This way you can play after some data rendering happen.

Instead of using useValue for routerStub, you can use useClass in the providers and it really worked for me.
export class RouterStub {
public url: string = '/';
constructor() { }
enter code here
navigateByUrl(url: any) {
this.url = url;
}
}
And in the beforeEach just instantiate the routerStub object like
routerStub = new RouterStub()
And in the test cases
component.router.navigateByUrl('/test');
fixture.detectChanges();