How to mock Routing state in angular for unit tests - unit-testing

Question

I am writing unit tests for my component but having trouble in creating the instance of the component and showing following error:
TypeError: Cannot read property 'patientId' of null
I have tried mocking all the providers including router and active router
here is how I am calling the component:
public onSelectedOrganizationInsurance(organizationInsurance: OrganizationInsurance) {
this.router.navigate(['../search-insurance-plan'], {
relativeTo: this.activatedRoute,
state: {
selectedOrganizationInsurance: organizationInsurance,
patientId: this.patientId
}
});
My component.ts is
export class PatientInsurancePlanSearchComponent implements OnInit {
private patientId: number = -1;
public selectedOrganizationInsurance: OrganizationInsurance;
public organizationInsurancePlans$: Observable<OrganizationInsurancePlan[]>;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private biilingHttpService: BillingHttpService
) {
this.selectedOrganizationInsurance = new OrganizationInsurance();
}
ngOnInit() {
this.patientId = history.state.patientId as number;
this.selectedOrganizationInsurance = history.state.selectedOrganizationInsurance as OrganizationInsurance;
this.organizationInsurancePlans$ = this.biilingHttpService.getOrganizationInsurancePlans(this.selectedOrganizationInsurance.id);
}
spec.ts
class FakeInsurancePlanSearchComponent {
#Input() public organizationInsurancePlans: OrganizationInsurancePlan[] = [];
#Input() public selectedOrganizationInsurance: OrganizationInsurance;
}
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PatientInsurancePlanSearchComponent
, FakeInsurancePlanSearchComponent ],
imports: [
StoreModule.forRoot({}),
HttpClientModule,
RouterTestingModule,
],
providers: [
Store,
{
provide: ActivatedRoute, useValue: {
state: of({ selectedorganizationInsurancePlan: 'AETNA'})
}
},
BillingHttpService
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PatientInsurancePlanSearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
Kindly guide me whats I am missing.

Answer 1

you can access your routing state via "Location" injection of #angular/common.
Like this:
constructor(private readonly location: Location) {}
ngOnInit() {
this.patientId = this.location.getState().patientId as number;
}
now you can create a spy on location in your unit test:
let location: Location;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PatientInsurancePlanSearchComponent
, FakeInsurancePlanSearchComponent ],
imports: [
StoreModule.forRoot({}),
HttpClientModule,
RouterTestingModule,
],
providers: [
Store,
BillingHttpService
]
})
.compileComponents();
}));
beforeEach(() => {
location = TestBed.inject(Location);
fixture = TestBed.createComponent(PatientInsurancePlanSearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
spyOn(location, 'getState').and.returnValue(yourObject);
expect(component).toBeTruthy();
});