124

I am unit testing a component that is used to edit an object. The object has an unique id that is used in order to grab the specific object from an array of objects that are hosted in a service. The specific idis procured through a parameter that is passed via routing, specifically through the ActivatedRoute class.

The constructor is as follows:

constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) {}
    
ngOnInit() {
  this._curRoute.params.subscribe(params => {
    this.userId = params['id'];
    this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0];

I want to run basic unit tests on this component. However, I am not sure as to how I can inject the id parameter, and the component needs this parameter.

By the way: I already have a mock for the Session service, so no worries there.

12 Answers 12

163

The simplest way to do this is to just use the useValue attribute and provide an Observable of the value you want to mock.

RxJS < 6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
...
{
  provide: ActivatedRoute,
  useValue: {
    params: Observable.of({id: 123})
  }
}

RxJS >= 6

import { of } from 'rxjs';
...
{
  provide: ActivatedRoute,
  useValue: {
    params: of({id: 123})
  }
}
10
  • 12
    Observable.of does not exists for me! :S Dec 26, 2016 at 11:47
  • 4
    Import Observable from rxjs/Observable
    – zmanc
    Dec 26, 2016 at 13:06
  • 6
    This code makes this error in my project: Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/HomeContentComponent.ngfactory.js'. at http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2605
    – mixalbl4
    Aug 8, 2017 at 16:18
  • 5
    RxJs 6 of should be used alone. Also you'd likely use RouterTestingModule instead of this answer's code. Oct 21, 2018 at 20:01
  • 5
    @BenRacicot this answer was given before RxJs 6 existed. Also instead saying "do this instead" provide an answer that can be upvoted directly.
    – zmanc
    Nov 1, 2018 at 14:13
42

In angular 8+ there is the RouterTestingModule, which you can use in order to have access to the ActivatedRoute or Router of the component. Also you can pass routes to the RouterTestingModule and create spies for the requested methods of route.

For example in my component I have:

ngOnInit() {
    if (this.route.snapshot.paramMap.get('id')) this.editMode()
    this.titleService.setTitle(`${this.pageTitle} | ${TAB_SUFFIX}`)
}

And in my test I have:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductLinePageComponent ],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [
        RouterTestingModule.withRoutes([])
      ],
    })
    .compileComponents()
  }))

  beforeEach(() => {
    router = TestBed.get(Router)
    route = TestBed.get(ActivatedRoute)
  })

and later in the 'it' section:

  it('should update', () => {
    const spyRoute = spyOn(route.snapshot.paramMap, 'get')
    spyRoute.and.returnValue('21')
    fixture = TestBed.createComponent(ProductLinePageComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
    expect(component).toBeTruthy()
    expect(component.pageTitle).toBe('Edit Product Line')
    expect(component.formTitle).toBe('Edit Product Line')
    // here you can test the functionality which is triggered by the snapshot
  })

In a similar way, I think you can test directly the paramMap via the spyOnProperty method of jasmine, by returning an observable or using rxjs marbles. It might save some time & also it does not require to maintain an extra mock class. Hope that it is useful and it makes sense.

5
  • So much better than having to maintain an extra mock and you can easily set different parameters in tests. Thank you!
    – crackmigg
    Jan 16, 2020 at 13:49
  • This helps. Do you know how to spy on different params: const dirName = this.route.snapshot.paramMap.get('dirName'); const actionType = this.route.snapshot.paramMap.get('actionType'); On which of bot will spy spyOn(route.snapshot.paramMap, 'get') ? Can I specify key to listen ?
    – speksy
    Apr 5, 2020 at 11:57
  • As I mention above, I think you could use spyOnProperty instead of spyOn, for example spyOnProperty(route.snapshot.paramMap.get, 'dirName'). If I haven't answered your question completely, don't hesitate to tell me. Thanks. Apr 6, 2020 at 11:47
  • Thank you , this was informative and helpful ☺ Oct 12, 2021 at 17:03
  • 1
    This works with Angular 6
    – walkeros
    May 18, 2022 at 20:18
20

I have figured out how to do this!

Since ActivatedRoute is a service, a mock service for it can be established. Let's call this mock service MockActivatedRoute. We will extend ActivatedRoute in MockActivatedRoute, as follows:

class MockActivatedRoute extends ActivatedRoute {
    constructor() {
        super(null, null, null, null, null);
        this.params = Observable.of({id: "5"});
    }

The line super(null, ....) initializes the super class, which has four mandatory parameters. However, in this instance, we need nothing from any of these parameters, so we initialize them to null values. All we need is the value of params which is an Observable<>. Therefore, with this.params, we override the value of params and initialize it to be the Observable<> of the parameter on which the test subject is relying.

Then, as any other mock service, just initialize it and override the provider for the component.

Good luck!

3
  • 1
    I am facing this right now! However, I'm getting errors when I try to use super or Observable. Where do these come from?
    – Aarmora
    Jul 14, 2016 at 18:39
  • super() is built in. Observable is from rxjs/Observable or just rxjs depending on your version. You'd get it using import {Observable} from 'rxjs'.
    – oooyaya
    Mar 22, 2017 at 1:53
  • You've accepted one answer and posted another... if this was Highlander (and there could only be one), which one did you "really" pick and why? That is, I think this essentially reduces to the same thing as zmanc's answer, which you accepted. Did you find additional value from setting up this [slightly] more complicated mock?
    – ruffin
    Oct 11, 2019 at 12:32
11

Here is how I tested it in angular 2.0 latest...

import { ActivatedRoute, Data } from '@angular/router';

and in Providers section

{
  provide: ActivatedRoute,
  useValue: {
    data: {
      subscribe: (fn: (value: Data) => void) => fn({
        yourData: 'yolo'
      })
    }
  }
}
6
  • Can you provide the complete code for the providers section? Nov 29, 2016 at 18:25
  • This is a complete unit test class. plnkr.co/edit/UeCKnJ2sCCpLLQcWqEGX?p=catalogue
    – Rady
    Dec 2, 2016 at 4:35
  • How do you test unsubscribe in ngOnDestroy
    – shiva
    Feb 2, 2017 at 17:44
  • This will break in a real life usecase because you aren't returning a subscription and you won't be able to use call .unsubscribe() in ngOnDestroy.
    – Quovadisqc
    Feb 20, 2017 at 16:07
  • 1
    data: Observable.of({yourData: 'yolo'}) would work though.
    – Quovadisqc
    Feb 20, 2017 at 16:09
8

Just add a mock of the ActivatedRoute:

providers: [
  { provide: ActivatedRoute, useClass: MockActivatedRoute }
]

...

class MockActivatedRoute {
  // here you can add your mock objects, like snapshot or parent or whatever
  // example:
  parent = {
    snapshot: {data: {title: 'myTitle ' } },
    routeConfig: { children: { filter: () => {} } }
  };
}
0
4

Ran into the same issue while creating test suites for a routing path as:

{
   path: 'edit/:property/:someId',
   component: YourComponent,
   resolve: {
       yourResolvedValue: YourResolver
   }
}

In the component, I initialized the passed property as:

ngOnInit(): void {    
   this.property = this.activatedRoute.snapshot.params.property;
   ...
}

When running the tests, if you do not pass a property value in your mock ActivatedRoute "useValue", then you will get undefined when detecting changes using "fixture.detectChanges()". This is because the mock values for ActivatedRoute does not contain the property params.property. Then, it is required for the mock useValue to have those params in order for the fixture to initialize the 'this.property' in the component. You can add it as:

  let fixture: ComponentFixture<YourComponent>;
  let component: YourComponent;
  let activatedRoute: ActivatedRoute; 

  beforeEach(done => {
        TestBed.configureTestingModule({
          declarations: [YourComponent],
          imports: [ YourImportedModules ],
          providers: [
            YourRequiredServices,
            {
              provide: ActivatedRoute,
              useValue: {
                snapshot: {
                  params: {
                    property: 'yourProperty',
                    someId: someId
                  },
                  data: {
                    yourResolvedValue: { data: mockResolvedData() }
                  }
                }
              }
            }
          ]
        })
          .compileComponents()
          .then(() => {
            fixture = TestBed.createComponent(YourComponent);
            component = fixture.debugElement.componentInstance;
            activatedRoute = TestBed.get(ActivatedRoute);
            fixture.detectChanges();
            done();
          });
      });

The you can start testing as for example:

it('should ensure property param is yourProperty', async () => {
   expect(activatedRoute.snapshot.params.property).toEqual('yourProperty');
   ....
});

Now, lets say you would like to test a different property value, then you can update your mock ActivatedRoute as:

  it('should ensure property param is newProperty', async () => {
    activatedRoute.snapshot.params.property = 'newProperty';
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.debugElement.componentInstance;
    activatedRoute = TestBed.get(ActivatedRoute);
    fixture.detectChanges();

    expect(activatedRoute.snapshot.params.property).toEqual('newProperty');
});

Hope this helps!

2
  • it's working, i just dont know why it is not working when i only put activatedRoute.snapshot and fixture.detect.. in the it . but when i copied your code its working Aug 12, 2021 at 15:02
  • do you have any idea, why do i have to initialize again the fixture and component in it block even if it has already in the beforeeach? Aug 12, 2021 at 15:29
4

You can do this using the beforeAll function. Since beforeAll is called before all of your beforeEach functions, you can change your member variables before the component is compiled.

describe('MyComponent', () => {

  let fakeActivatedRoute = {
    paramMap: of(convertToParamMap({ id: '123' })),
    queryParamMap: of(convertToParamMap({ query: 'active' }))};


  beforeEach(async() => {
    await TestBed.configureTestingModule({

      providers: [
        ...
        { provide: ActivatedRoute, useValue: fakeActivatedRoute }],
      }).compileComponents();
    });
  });

  describe('id is present in route', () => {
    beforeAll(() => {
      fakeActivatedRoute.paramMap = 
        of(convertToParamMap({ id: '123' }));
      fakeActivatedRoute.queryParamMap = 
        of(convertToParamMap({ query: '' }));
    });

    it('should call service to look up id', () => {
      ...
    });
  });

  describe('id is not present in route', () => {
    beforeAll(() => {
      fakeActivatedRoute.paramMap = 
        of(convertToParamMap({ id: '' }));
      fakeActivatedRoute.queryParamMap = 
        of(convertToParamMap({ query: '' }));
    });

    it('should not call service to look up id', () => {
      ...
    });
  });

  describe('query is present in route', () => {
    beforeAll(() => {
      fakeActivatedRoute.paramMap = 
        of(convertToParamMap({ id: '123' }));
      fakeActivatedRoute.queryParamMap = 
        of(convertToParamMap({ query: 'inactive' }));
    });

    it('should call service to look up the inactive id', () => {
      ...
    });
  });
});

1
  • 1
    You saved my day, thanks! I have added data attribute also: typescript const fakeActivatedRoute = { data: of({ app: 'note' }), }; Feb 26 at 23:14
3

For some folks working on Angular > 5, if Observable.of(); is not working then they can use just of() by importing import { of } from 'rxjs';

3

angular 11: add this in your spec file

imports: [
   RouterTestingModule.withRoutes([])
],

this help me out with just a single line, with other you need to mock provider

0

Added provider in the test class as:

{
  provide: ActivatedRoute,
  useValue: {
    paramMap: of({ get: v => { return { id: 123 }; } })
  } 
}
0

All other answers so far only do provide the value for the route param. What if you want to test the route change trigger itself? You can provide the ActivatedRoute in your test with a Subject and its Observable, so you can trigger the route change with source.next().

Code under test:

    constructor(private readonly route: ActivatedRoute) {}

    ngOnInit(): void {
      this.routeParamSubscription = this.route.params.subscribe((params) => {
        if (params['id']) {
          this.loadDetails(params['id']);
        }
      });
    }

Testing code:

    let routeChangeSource: BehaviorSubject<Params>;
    // In TestBed.configureTestingMethod
    ...
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            params: routeChangeSource.asObservable()
          }
        }
      ]
    ...
    it('loads data on route change', fakeAsync(() => {
      const spy = spyOn(component, 'loadDetails').and.callThrough();
      routeChangeSource.next({ id: 99 });
      tick();
      expect(spy).toHaveBeenCalledOnceWith(99);
    }));

This tests the triggered action after the route change and makes sure it is activated.

0

In this case if the parameter is being accessed by the get method of the paramMap

in the .ts:

this.id= this.activatedRoute.snapshot.paramMap.get('id');

in the .spec.ts

providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {
              paramMap: {
                get() {
                  return '97dbf5d7';
                }
              }
            }
          }
        }
      ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.