I am trying to write a unit test for my angular component and I am stuck at this error. I have researched a lot about this on stack overflow and some online docs. Here is the link of resources which I have tried so far with no luck.
https://dev.to/amerigom/how-to-activatedroute-in-angular-and-how-to-mock-it-in-unit-tests-2ne6
How to unit test a component that depends on parameters from ActivatedRoute?
How do you mock ActivatedRoute
Below is my code
.ts file
import { ResourceOverviewService } from '../../../../services/detail/resource-overview/resource-overview.service'
import {
Component,
OnInit,
} from '@angular/core';
import { UtilsService } from '../../../../services/common/utils.service';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-resource-overview',
templateUrl: './resource-overview.component.html',
styleUrls: ['./resource-overview.component.scss']
})
export class ResourceOverviewComponent implements OnInit {
uuid = '--';
resourceName = '--';
status = '--';
provider = '--';
providerAccount = '--';
resourceCategory = '--';
resourceType = '--';
region = '--';
overviewTags = '--';
correlationID = '--';
showMore = true;
crn = '--'
lastupdated : any;
providerAccountName = '--'
resourceId = '--'
creationDate = '--'
description = '--'
tags = '--'
dateTimeFormat = 'MMM d, y h:mm a';
lastUpdateTime: any;
dateTimeZone: any;
keyValue : { key: any, value: any }[] = [];
id = '--';
providerLastUpdated = '--';
providerStatus = '--';
breadcrumbs = [];
launchpadURL = `/launchpad`;
constructor(
private readonly resourceOverviewService: ResourceOverviewService,
private readonly utilsService: UtilsService,
private readonly router: Router,
readonly route: ActivatedRoute,
) {}
ngOnInit() {
this.id = this.route.snapshot.queryParamMap.get('id');
this.getDetails();
}
viewInventory(){
this.router.navigate(['..'], {
relativeTo: this.route
});
}
getDetails() {
if (this.id) {
this.getResourceOverview();
}
}
getResourceOverview(): void {
const resourceID = `search_keys=${"resource_id"}&search=${this.id}`
this.resourceId = this.id
this.resourceOverviewService
.getResourceOverview(resourceID)
.subscribe(
(response) => {
const result = response as any;
if (result && something) {
this.uuid = something || '--';
this.creationDate = something || '--' ;
this.correlationID = something || '--' ;
this.providerStatus = something || '--' ;
}
},
(error) => {
console.log('Resource overview details failed with error', error);
}
);
}
}
.ts.spec
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpWrapperService } from '../../../../services/common/http-wrapper.service';
import { ResourceOverviewComponent } from './resource-overview.component';
import { NGXLogger } from 'ngx-logger';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CarbonComponentsModule } from '@cloudMatrix-CAM/cb-carbon-components-lib';
import { CarbonModule } from '../../../../../carbon.module';
import { ApiContractService, CbTranslationUiLibModule, TranslationService,AuthenticationContractService } from '@cloudMatrix-CAM/cb-common-ui';
import { MockNGXLogger } from '../../../../components/discovery-inventory/list-view/list-view.component.spec';
import { convertToParamMap, Router } from '@angular/router';
import { ApiService } from '../../../../services/common/api.service';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CbCommonDiscoveryManagementMicroUiService } from '../../../../services/cb-common-discovery-management-micro-ui.service';
import { ActivatedRoute } from "@angular/router";
import { throwError, of, Observable } from 'rxjs';
import { RouterModule } from '@angular/router'
class mockHttpWrapperService {
readonly isApiReady = false;
}
describe('ResourceOverviewComponent', () => {
let component: ResourceOverviewComponent;
let fixture: ComponentFixture<ResourceOverviewComponent>;
let activatedRouteSpy;
beforeEach(async(() => {
activatedRouteSpy = {
snapshot: {
paramMap: convertToParamMap({
id: 'dads123',
code: 'IBM',
})
}
};
TestBed.configureTestingModule({
declarations: [ResourceOverviewComponent],
imports: [
CarbonComponentsModule, CarbonModule, CbTranslationUiLibModule.forRoot(),
RouterModule.forRoot([])
],
providers: [
{ provide: NGXLogger, useClass: MockNGXLogger },
{ provide: HttpWrapperService, useClass: mockHttpWrapperService },
{ provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); }},
ApiContractService,
TranslationService,
ApiService,
ApiContractService,
TranslationService,
CbCommonDiscoveryManagementMicroUiService,
{
provide: ActivatedRoute,
useValue: activatedRouteSpy
}
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(ResourceOverviewComponent);
component = fixture.debugElement.componentInstance;
fixture.detectChanges();
component.ngOnInit();
})
}));
it('should create 1 ', () => {
expect(component).toBeTruthy();
});
})
And below is the error message Chrome 93.0.4577 (Linux 0.0.0) ResourceOverviewComponent should create 1 FAILED TypeError: Cannot read properties of undefined (reading 'get')
Can anyone help me out with this error?
CodePudding user response:
In your test setup you provide the following activated route:
activatedRouteSpy = {
snapshot: {
paramMap: convertToParamMap({
id: 'dads123',
code: 'IBM',
})
}
};
And in your ngOnInit you access it like this:
this.id = this.route.snapshot.queryParamMap.get('id');
Your spy does not have a queryParamMap
property, but only a paramMap
. Rename it in your spy or supply both, the paramMap
and a queryParamMap
if you need both further down the line.