javascript / intermediate
Snippet
Mocking ActivatedRoute Query Param Maps in Jasmine Tests
When testing components that depend on URL search parameters, providing a full Router instance introduces unnecessary complexity. Utilizing Angular's convertToParamMap utility alongside an RxJS of() observable creates an isolated and deterministic stub of ActivatedRoute.queryParamMap for unit assertions.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { TestBed } from '@angular/core/testing';import { ActivatedRoute, convertToParamMap } from '@angular/router';import { of } from 'rxjs';import { DashboardComponent } from './dashboard.component';describe('DashboardComponent Route Testing', () => {beforeEach(async () => {await TestBed.configureTestingModule({imports: [DashboardComponent],providers: [{provide: ActivatedRoute,useValue: {queryParamMap: of(convertToParamMap({ view: 'analytics', page: '2' }))}}]}).compileComponents();});});
angular
Breakdown
1
import { ActivatedRoute, convertToParamMap } from '@angular/router';
Imports route interfaces and the utility to build immutable param maps.
2
queryParamMap: of(convertToParamMap({ view: 'analytics', page: '2' }))
Wraps simulated query parameters in an observable stream emulating router emissions.