Home > Net >  Cannot read properties of undefined (reading 'imoCode') Angular
Cannot read properties of undefined (reading 'imoCode') Angular

Time:08-22

Angular testing using Jasmine/Karma

I am trying to test a component but I am getting following error. Can anyone please provide a detailed solution for it. I have included all the imports but I don't know how to do mock implementation of imocode which is being called in resolve() method.Not only this for every component I am facing this issue. I want to increase the code coverage that's why I am simply checking whether that method is been called or not.

.ts file code

import { Injectable } from '@angular/core';
import {
  Resolve
} from '@angular/router';
import { DailyplanningService } from '../service/dailyplanning.service';

@Injectable({
  providedIn: 'root'
})
export class DailyPlanningGuardResolver implements Resolve<boolean> {



  constructor(public dailyPlanningService: DailyplanningService) { }
  resolve(postData:any) {
     return this.dailyPlanningService.getReportData(postData.params.imoCode)

  }
}

sepc.ts file code

import { TestBed } from '@angular/core/testing';
import {HttpClientTestingModule , HttpTestingController } from '@angular/common/http/testing';
import {HttpClientModule} from '@angular/common/http';
import { DailyPlanningGuardResolver } from './daily-planning-guard.resolver';
import { DailyplanningService } from '../service/dailyplanning.service';
import { AppConfigService } from 'src/app/services/config/app-config.service';

describe('DailyPlanningGuardResolver', () => {
  let resolver: DailyPlanningGuardResolver;
  

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DailyPlanningGuardResolver,
        {provide:
          AppConfigService,
          useValue: {
              getConfig: () => ({ 
                baseUrl: 'dummy-url',
                serviceBase: 'api-base'
              })
            }
          }]
    });
    resolver = TestBed.inject(DailyPlanningGuardResolver);
  });

  it('should be created', () => {
    expect(resolver).toBeTruthy();
  });

  it('should call method resolve ', () => {
    resolver.resolve('');
    expect(resolver.resolve).toBeTruthy();
  });

});

errormessage

DailyPlanningGuardResolver > should call method resolve
TypeError: Cannot read properties of undefined (reading 'imoCode')
TypeError: Cannot read properties of undefined (reading 'imoCode')
    at DailyPlanningGuardResolver.resolve (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/pages/daily-planning/resolver/daily-planning-guard.resolver.ts:16:69)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/pages/daily-planning/resolver/daily-planning-guard.resolver.spec.ts:34:14)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:371:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:567:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:582:1)
    at <Jasmine>

.ts file method

getEntitlment() {
    this.entitlementResponse = sessionStorage.getItem('entitlements')
    let loggedJson = JSON.parse(this.entitlementResponse);
    let entitlements = JSON.parse(loggedJson.entitlements);
    this.entitlementResponse = entitlements;
    this.getEntitilementDeatils();
  }

spec.ts file

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';

import { RfqToValidateComponent } from './rfq-to-validate.component';
import { AppConfigService } from 'src/app/services/config/app-config.service';


describe('RfqToValidateComponent', () => {
  let component: RfqToValidateComponent;
  let fixture: ComponentFixture<RfqToValidateComponent>;
  let entitlements: {params: {entitlements: 'something'}};

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ RfqToValidateComponent ],
      imports: [ReactiveFormsModule,
                RouterTestingModule,
                HttpClientTestingModule],
                providers: [
                  {
                     provide: 
                     AppConfigService,
                     useValue: {
                         getConfig: () => ({ 
                           baseUrl: 'dummy-url',
                           serviceBase: 'api-base'
                         })
                     }
                  }
               ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(RfqToValidateComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should call', () => {
component.getEntitlment();
expect(component.getEntitlment).toBeTruthy();});});

giving me this error

    RfqToValidateComponent > should call
TypeError: Cannot read properties of null (reading 'entitlements')
TypeError: Cannot read properties of null (reading 'entitlements')
    at RfqToValidateComponent.getEntitlment (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/pages/order-management/rfq-to-validate/rfq-to-validate.component.ts:30:46)
    at new RfqToValidateComponent (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/pages/order-management/rfq-to-validate/rfq-to-validate.component.ts:23:10)
    at NodeInjectorFactory.RfqToValidateComponent_Factory [as factory] (ng:///RfqToValidateComponent/ɵfac.js:4:10)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:3565:1)
    at instantiateRootComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:10159:1)
    at createRootComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:12260:1)
    at ComponentFactory.create (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:21598:1)
    at initComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.mjs:1772:1)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)

CodePudding user response:

DailyPlanningGuardResolver's resolve method expects an object in a form of {params: {imoCode}} format. You should pass postData object in the desired format while calling the resolve method.

resolver.resolve({
   params: {imoCode: 'something'},
});
  • Related