What is the best way to simulate an activatedRoute parent route in angular2 when conducting tests?

Question

What is the best way to simulate an activatedRoute parent route in angular2 when conducting tests?

Imagine I have the following code snippet:

export class QuestionnaireQuestionsComponent {

    questions: Question[] = [];
    private loading:boolean = true;


    constructor(
        private route: ActivatedRoute,
        public questionnaireService:QuestionnaireService) {}

    ngOnInit(){
        this.route.parent.params.subscribe((params:any)=>{
            this.questionnaireService.getQuestionsForQuestionnaire(params.id).subscribe((questions)=>{
                this.questions = questions;
                this.loading = false;
            });
        });
    }


}

Although my component is functioning well, I am facing a challenge when it comes to unit testing. The issue lies in mocking the this.route.parent object. Below is an example of my failing test case:

beforeEach(()=>{
    route = new ActivatedRoute();
    route.parent.params = Observable.of({id:"testId"});

    questionnaireService = jasmine.createSpyObj('QuestionnaireService', ['getQuestionsForQuestionnaire']);
    questionnaireService.getQuestionsForQuestionnaire.and.callFake(() => Observable.of(undefined));
    component = new QuestionnaireQuestionsComponent(route, questionnaireService);
});


describe("on init", ()=>{
    it("should call the service get questions for questionnaire",()=>{
        component.ngOnInit();
        expect(questionnaireService.getQuestionsForQuestionnaire).toHaveBeenCalled();
    });  
});

The test fails with the following error message:

TypeError: undefined is not an object (evaluating 'this._routerState.parent')

unit-testing angular typescript mocking jasmine

Answer 1

Answer №1

Utilizing TestBed for Testing

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [],
      providers: [
        {
          provide: ActivatedRoute, useValue: {
            params: Observable.of({ id: 'testing123' })
          }
        }
      ]
    })
      .compileComponents();
  }));

Answer 2

Utilizing TestBed for Testing

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [],
      providers: [
        {
          provide: ActivatedRoute, useValue: {
            params: Observable.of({ id: 'testing123' })
          }
        }
      ]
    })
      .compileComponents();
  }));

Answer 3

Answer №2

According to the Angular2 documentation, AcitvatedRoute is an interface. To work with it, I created a custom implementation called MockActivatedRoute.

import {Observable} from 'rxjs';
import {Type} from '@angular/core';
import {ActivatedRoute,Route,ActivatedRouteSnapshot,UrlSegment,Params,Data } from '@angular/router';

export class MockActivatedRoute implements ActivatedRoute {
    snapshot: ActivatedRouteSnapshot;
    url: Observable<UrlSegment[]>;
    params: Observable<Params>;
    queryParams: Observable<Params>;
    fragment: Observable<string>;
    data: Observable<Data>;
    outlet: string;
    component: Type<any>|string;
    routeConfig: Route;
    root: ActivatedRoute;
    parent: ActivatedRoute;
    firstChild: ActivatedRoute;
    children: ActivatedRoute[];
    pathFromRoot: ActivatedRoute[];

    toString(): string {
        return "";
    };
}

In my tests, I replaced references to ActivatedRoute with MockActivatedRoute like this:

beforeEach(()=>{
    route = new MockActivatedRoute();
    route.parent = new MockActivatedRoute();
    route.parent.params = Observable.of({id:"testId"});

    questionnaireService = jasmine.createSpyObj('QuestionnaireService', ['getQuestionsForQuestionnaire']);
    questionnaireService.getQuestionsForQuestionnaire.and.callFake(() => Observable.of(undefined));
    component = new QuestionnaireQuestionsComponent(route, questionnaireService);
});

Answer 4

According to the Angular2 documentation, AcitvatedRoute is an interface. To work with it, I created a custom implementation called MockActivatedRoute.

import {Observable} from 'rxjs';
import {Type} from '@angular/core';
import {ActivatedRoute,Route,ActivatedRouteSnapshot,UrlSegment,Params,Data } from '@angular/router';

export class MockActivatedRoute implements ActivatedRoute {
    snapshot: ActivatedRouteSnapshot;
    url: Observable<UrlSegment[]>;
    params: Observable<Params>;
    queryParams: Observable<Params>;
    fragment: Observable<string>;
    data: Observable<Data>;
    outlet: string;
    component: Type<any>|string;
    routeConfig: Route;
    root: ActivatedRoute;
    parent: ActivatedRoute;
    firstChild: ActivatedRoute;
    children: ActivatedRoute[];
    pathFromRoot: ActivatedRoute[];

    toString(): string {
        return "";
    };
}

In my tests, I replaced references to ActivatedRoute with MockActivatedRoute like this:

beforeEach(()=>{
    route = new MockActivatedRoute();
    route.parent = new MockActivatedRoute();
    route.parent.params = Observable.of({id:"testId"});

    questionnaireService = jasmine.createSpyObj('QuestionnaireService', ['getQuestionsForQuestionnaire']);
    questionnaireService.getQuestionsForQuestionnaire.and.callFake(() => Observable.of(undefined));
    component = new QuestionnaireQuestionsComponent(route, questionnaireService);
});

Answer 5

Answer №3

If you are new to this issue, the information provided in the angular docs addresses this specific case.

According to the documentation:

You can create a test double class called ActivatedRouteStub to mimic the behavior of the ActivatedRoute

import { ReplaySubject } from 'rxjs/ReplaySubject';
import { convertToParamMap, ParamMap, Params } from '@angular/router';

/**
 * An ActivateRoute test double with a `paramMap` observable.
 * Use the `setParamMap()` method to add the next `paramMap` value.
 */
export class ActivatedRouteStub {
  // Use a ReplaySubject to share previous values with subscribers
  // and pump new values into the `paramMap` observable
  private subject = new ReplaySubject<ParamMap>();

  constructor(initialParams?: Params) {
    this.setParamMap(initialParams);
  }

  /** The mock paramMap observable */
  readonly paramMap = this.subject.asObservable();

  /** Set the paramMap observables's next value */
  setParamMap(params?: Params) {
    this.subject.next(convertToParamMap(params));
  };
}

You can then utilize this stub in the test class like so:

activatedRoute.setParamMap({ id: '1234' });

Answer 6

If you are new to this issue, the information provided in the angular docs addresses this specific case.

According to the documentation:

You can create a test double class called ActivatedRouteStub to mimic the behavior of the ActivatedRoute

import { ReplaySubject } from 'rxjs/ReplaySubject';
import { convertToParamMap, ParamMap, Params } from '@angular/router';

/**
 * An ActivateRoute test double with a `paramMap` observable.
 * Use the `setParamMap()` method to add the next `paramMap` value.
 */
export class ActivatedRouteStub {
  // Use a ReplaySubject to share previous values with subscribers
  // and pump new values into the `paramMap` observable
  private subject = new ReplaySubject<ParamMap>();

  constructor(initialParams?: Params) {
    this.setParamMap(initialParams);
  }

  /** The mock paramMap observable */
  readonly paramMap = this.subject.asObservable();

  /** Set the paramMap observables's next value */
  setParamMap(params?: Params) {
    this.subject.next(convertToParamMap(params));
  };
}

You can then utilize this stub in the test class like so:

activatedRoute.setParamMap({ id: '1234' });

Answer 7

Answer №4

When you need to access query parameters from the ActivatedRouteSnapshot in scenarios like this:

this.someProperty = this.route.snapshot.data.query['paramKey'];

The following code snippet can be used in tests to provide query parameter data for the route:

{ 
  provide: ActivatedRoute, 
  useValue: {
    snapshot: {
      data: {
        query: {
          paramKey: 'paramValue'
        }
      }
    }
  }
}

Answer 8

When you need to access query parameters from the ActivatedRouteSnapshot in scenarios like this:

this.someProperty = this.route.snapshot.data.query['paramKey'];

The following code snippet can be used in tests to provide query parameter data for the route:

{ 
  provide: ActivatedRoute, 
  useValue: {
    snapshot: {
      data: {
        query: {
          paramKey: 'paramValue'
        }
      }
    }
  }
}

Answer 9

Answer №5

To modify the data of a mocked ActivatedRoute within each 'it' block, you can follow Kevin Black's suggestion and combine it with the code below.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [],
      providers: [
        {
          provide: ActivatedRoute, useValue: {
            queryParams: of({ id: 'test' })
          }
        }
      ]
    })
      .compileComponents();
  }));

Additionally, include the following code in the it('') block before initializing a component using fixture.detectChanges()

it('test', fakeAsync(() => {
  let activatedRoute: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
  activatedRoute.queryParams = of({ firstName: 'john', lastName: 'smith' });

  fixture.detectChanges(); // trigger ngOninit()
  tick();
}));

Answer 10

To modify the data of a mocked ActivatedRoute within each 'it' block, you can follow Kevin Black's suggestion and combine it with the code below.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [],
      providers: [
        {
          provide: ActivatedRoute, useValue: {
            queryParams: of({ id: 'test' })
          }
        }
      ]
    })
      .compileComponents();
  }));

Additionally, include the following code in the it('') block before initializing a component using fixture.detectChanges()

it('test', fakeAsync(() => {
  let activatedRoute: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
  activatedRoute.queryParams = of({ firstName: 'john', lastName: 'smith' });

  fixture.detectChanges(); // trigger ngOninit()
  tick();
}));

Answer 11

Answer №6

Angular 10 version

Start by setting up your mock:

 const mockActivatedRoute = { 
   parent: { 
     paramMap: of(convertToParamMap(
         { company: 'exampleCompany' }
     ))}
 };

Inject the Mock into Activated Route

  providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }]

Run the Test

 describe('ngOnInit', () => {
     it('should retrieve the route parameter', fakeAsync(() => {
       component.ngOnInit();

       expect(component.company).toBe('exampleCompany');
     }));
   });'

Here is the corresponding code being tested

   ngOnInit(): void {
     this.route.parent.paramMap.subscribe(params => {
       this.company = params.get('company');
     });
   }

Answer 12

Angular 10 version

Start by setting up your mock:

 const mockActivatedRoute = { 
   parent: { 
     paramMap: of(convertToParamMap(
         { company: 'exampleCompany' }
     ))}
 };

Inject the Mock into Activated Route

  providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }]

Run the Test

 describe('ngOnInit', () => {
     it('should retrieve the route parameter', fakeAsync(() => {
       component.ngOnInit();

       expect(component.company).toBe('exampleCompany');
     }));
   });'

Here is the corresponding code being tested

   ngOnInit(): void {
     this.route.parent.paramMap.subscribe(params => {
       this.company = params.get('company');
     });
   }

Answer 13

Answer №7

You can also simply insert

{params: {searchTerm: 'this is not me'}} as any) as ActivatedRouteSnapshot

More information about the code

(service.resolve(({params: {id: 'this is id'}} as any) as ActivatedRouteSnapshot,
{} as RouterStateSnapshot)as Observable<xyzResolveData>)
.subscribe((data) => {
expect((data as xyzResolveData).results).toEqual(xyzData.results);
});

Answer 14

You can also simply insert

{params: {searchTerm: 'this is not me'}} as any) as ActivatedRouteSnapshot

More information about the code

(service.resolve(({params: {id: 'this is id'}} as any) as ActivatedRouteSnapshot,
{} as RouterStateSnapshot)as Observable<xyzResolveData>)
.subscribe((data) => {
expect((data as xyzResolveData).results).toEqual(xyzData.results);
});

Answer 15

Answer №8

Expanding on the response from @S.Galarneau, here is an updated version of the ActivatedRoute interface for Angular 4+. It includes access modifiers and utilizes a limited number of types. Additionally, it demonstrates how to use the providers array and integrate with TestBed:

This method is effective for creating a mock interface and leveraging the providers array to incorporate your custom version of ActivatedRoute:

export class MockActivatedRoute implements ActivatedRoute{
  public snapshot;
  public url;
  public params;
  public queryParams: Observable<Params>;
  public fragment: Observable<string>;
  public data;
  public outlet;
  public component;
  public paramMap;
  public queryParamMap;
  public routeConfig;
  public root;
  public parent;
  public firstChild;
  public children;
  public pathFromRoot;
  public toString(): string {
    return '';
  };
}

To utilize this approach with TestBed and the Providers array, you can focus solely on the fragment property as shown below:

  beforeEach(async((): void => {
    const route = new MockActivatedRoute();
    route.fragment = of('#myhash?some_params=some_value'); 
    // since fragment is an Observable, we need to use `of(value)`

  TestBed.configureTestingModule({
    // declarations, imports, and providers come next:
    providers:[
        { provide: ActivatedRoute, useValue: route},
    ]
  })

Answer 16

Expanding on the response from @S.Galarneau, here is an updated version of the ActivatedRoute interface for Angular 4+. It includes access modifiers and utilizes a limited number of types. Additionally, it demonstrates how to use the providers array and integrate with TestBed:

This method is effective for creating a mock interface and leveraging the providers array to incorporate your custom version of ActivatedRoute:

export class MockActivatedRoute implements ActivatedRoute{
  public snapshot;
  public url;
  public params;
  public queryParams: Observable<Params>;
  public fragment: Observable<string>;
  public data;
  public outlet;
  public component;
  public paramMap;
  public queryParamMap;
  public routeConfig;
  public root;
  public parent;
  public firstChild;
  public children;
  public pathFromRoot;
  public toString(): string {
    return '';
  };
}

To utilize this approach with TestBed and the Providers array, you can focus solely on the fragment property as shown below:

  beforeEach(async((): void => {
    const route = new MockActivatedRoute();
    route.fragment = of('#myhash?some_params=some_value'); 
    // since fragment is an Observable, we need to use `of(value)`

  TestBed.configureTestingModule({
    // declarations, imports, and providers come next:
    providers:[
        { provide: ActivatedRoute, useValue: route},
    ]
  })

What is the best way to simulate an activatedRoute parent route in angular2 when conducting tests?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Inheritance of Type Member in TypeScript

Ensure service is instantiated within an Angular 2 sub-module (a different approach from AngularJS run block)

An event listener for input changes in Typescript that retrieves the value from

Deploying node.js on a live server

Tips for verifying the screen.width condition with karma and jasmine

Angular 2: Understanding the Initialization Process

django fixture unit testing - no matching object in query

Verify that the Angular service has been properly initialized

NodeJS TypeScript using ECMAScript as the target

Formatting dates in the Bootstrap Date Picker within Angular 6

Swapping out numerical value and backslash with Angular

Ways to access an observable's value without causing a new emit event

When utilized in a nested component, the service is found to be null

Guide on how to use window.resize subscription in an Angular service?

Issue with setting free drag position in Angular Material's CDK Drag module

Angular 13: Issue with Http Interceptor Not Completing Request

Guide on automatically populating a value in an input field

The div is not showing the image as expected

Best practices for utilizing forwardRef and next/dynamic in next.js version 13.4 with the "react-email-editor" component

Can someone guide me on incorporating shoelace.style components in Angular version 17?