Tips for unit testing the getCurrentNavigation().extras.state method in Angular 7

Question

Tips for unit testing the getCurrentNavigation().extras.state method in Angular 7

Attempting to create a unit test for getCurrentNavigation().extras.state with jasmine.

To address the problem, the router method was spied on.

The component's file,

@Component({
  selector: 'app-location-list',
  templateUrl: './location-list.component.html',
  styleUrls: ['./location-list.component.scss']
})
export class LocationListComponent implements OnInit{

  locationId;
  locationName;
  constructor(private activatedRoute: ActivatedRoute, private router: Router) {
    if (this.router.getCurrentNavigation().extras.state) {
      this.locationId = this.router.getCurrentNavigation().extras.state.locationId;
    }
    if (this.router.getCurrentNavigation().extras.state) {
      this.locationName = this.router.getCurrentNavigation().extras.state.locationName;
    }
  }
  ngOnInit() { }
}

The Spec file,

describe('LocationListComponent ', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent >;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
      providers: []
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LocationListComponent );
    component = fixture.componentInstance;
    spyOn(Router.prototype, 'getCurrentNavigation').and.returnValues({ 'extras': { 'state': { 'locationId': 100, 'locationName': "UK" } } });
    fixture.detectChanges();
  });

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

Encountering the error message below:

TypeError: Cannot read property `extras` of null

In need of assistance to fix this issue. Developed using Angular 7.2

angular typescript jasmine karma-jasmine angular7-router

Answer 1

Answer №1

When attempting to utilize both RouterTestingModule and

{provide: Router, useClass: RouterStub}

, an error may be thrown stating

cannot read property 'root' of undefined

To avoid this issue, one solution is to directly create a spy for Route and return its value

describe('LocationListComponent', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent>;
  let router: jasmine.SpyObj<Router>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    router = TestBed.get(Router);
    spyOn(router, 'getCurrentNavigation').and.returnValue({ extras: { state: { message: 'msg'} } } as any);
    fixture = TestBed.createComponent(LocationListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Answer 2

When attempting to utilize both RouterTestingModule and

{provide: Router, useClass: RouterStub}

, an error may be thrown stating

cannot read property 'root' of undefined

To avoid this issue, one solution is to directly create a spy for Route and return its value

describe('LocationListComponent', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent>;
  let router: jasmine.SpyObj<Router>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    router = TestBed.get(Router);
    spyOn(router, 'getCurrentNavigation').and.returnValue({ extras: { state: { message: 'msg'} } } as any);
    fixture = TestBed.createComponent(LocationListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Answer 3

Answer №2

To simplify this process, you can utilize the stub and useClass methods which can be easily applied to other spec files by creating them in a separate file and exporting the RouterStub class:

In your spec file, define a stub that mimics the methods of the Router class:

class RouterStub{
 getCurrentNavigation(){
   return {
      extras: {
         state:{
           locationId: 'someId',
           locationName: 'someName'
         }
       }
     }
   }
}

Then, within the beforeEach() block:

describe('LocationListComponent ', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent >;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
      providers: [ {provide: Router, useClass: RouterStub}]
    })
      .compileComponents();
  }));

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

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

Answer 4

To simplify this process, you can utilize the stub and useClass methods which can be easily applied to other spec files by creating them in a separate file and exporting the RouterStub class:

In your spec file, define a stub that mimics the methods of the Router class:

class RouterStub{
 getCurrentNavigation(){
   return {
      extras: {
         state:{
           locationId: 'someId',
           locationName: 'someName'
         }
       }
     }
   }
}

Then, within the beforeEach() block:

describe('LocationListComponent ', () => {
  let component: LocationListComponent ;
  let fixture: ComponentFixture<LocationListComponent >;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        LocationListComponent 
      ],
      providers: [ {provide: Router, useClass: RouterStub}]
    })
      .compileComponents();
  }));

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

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

Answer 5

Answer №3

To effectively test the functionality of router.getCurrentNavigation(), follow these 3 simple steps:

First, create a mock router object:

const fakeRouter = {
  getCurrentNavigation: jasmine.createSpy('getCurrentNavigation')
};

Next, inject this mock object into the providers array:

providers: [{ provide: Router, useValue: fakeRouter }]

Finally, define the desired mocked return value within the beforeEach() function:

fakeRouter.getCurrentNavigation.and.returnValue({
  extras: {
    state: {
      example: ''
    }
  }
});

Answer 6

To effectively test the functionality of router.getCurrentNavigation(), follow these 3 simple steps:

First, create a mock router object:

const fakeRouter = {
  getCurrentNavigation: jasmine.createSpy('getCurrentNavigation')
};

Next, inject this mock object into the providers array:

providers: [{ provide: Router, useValue: fakeRouter }]

Finally, define the desired mocked return value within the beforeEach() function:

fakeRouter.getCurrentNavigation.and.returnValue({
  extras: {
    state: {
      example: ''
    }
  }
});

Answer 7

Answer №4

Make sure to retrieve the router instance from the fixture

routerInstance = fixture.debugElement.injector.get(Router);

Answer 8

Make sure to retrieve the router instance from the fixture

routerInstance = fixture.debugElement.injector.get(Router);

Tips for unit testing the getCurrentNavigation().extras.state method in Angular 7

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Decoding the Mystery: What Do the + and # Symbols Mean in Angular 4 Routes?

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

The MatFormField component requires a MatFormFieldControl to be present in order to function properly. This error may occur if the

Is there a way to execute a code snippet just once when focusing on a specific field?

Angular allows for the dynamic inclusion and exclusion of components, providing a flexible

Creating a JSON file using an object to send requests in Angular

Getting the highest level object in a nested Angular component structure

Using Angular 5 to integrate a jQuery plugin

What is the best way to retrieve a Map object from Firebase in a TypeScript environment?

Discovering the art of incorporating an API post response into an array with the assistance of the pipe and map operator within the Angular framework. Witness the transformative power as

How to authenticate users using JWT in Angular and retrieve user data?

Is there a convenient method to combine arrays of objects in JavaScript using ellipses or an equivalent approach?

Error: Attempting to access a property called 'sign' on an undefined value

Utilize the power of TypeScript to display data with impact

In the realm of JavaScript and TypeScript, the task at hand is to locate '*' , '**' and '`' within a string and substitute them with <strong></strong> and <code></code>

Can we define the input and return types for functions using httpsCallables?

Issue with retrieving all phone numbers from a contact in Ionic

Guidance on showcasing the current day's weekday name through TypeScript

Issue: Unhandled promise rejection: BraintreeError: The 'authorization' parameter is mandatory for creating a client

Having trouble accessing an Angular app through express and Heroku?