如何在 Angular 中模拟查询参数以进行服务测试？

Question

I am trying to test an observable from a service in Angular, which depends on the value of a queryParam.

I'm very stuck when trying to mock the queryParam in order to be able to perform the test for the observable.

I have tried different approaches, but I cannot get to implement the queryParam value.

This is the service:

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class CarService {
  private readonly _car$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(this.carStatus);

  constructor(private route: ActivatedRoute) {}

  public get car$(): Observable<boolean> {
    return this._car$.asObservable();
  }

  private get carStatus(): boolean {
    const isHybrid = this.route.snapshot.queryParamMap.get('hybrid') === 'true';
    if (isHybrid) return true;
    return false;
  }
}

These are the different approaches for the test file:

Option 1

import { TestBed } from '@angular/core/testing';
import { ActivatedRouteSnapshot } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import { CarService } from './carService.service';


describe('CarService', () => {
  let service: CarService;
  let route: ActivatedRouteSnapshot;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [CarService],
    });
    route = new ActivatedRouteSnapshot();
  });

  describe('When there is a hybrid car', () => {
    it('should enable the electric mode', (done) => {
      route.queryParams = {
        hybrid: 'true',
      };
      service = TestBed.inject(CarService);

      service.car$.subscribe((value: boolean) => {
        expect(value).toBe(true);
        done();
      });
    });
  });

  describe('When the car is not hybrid', () => {
    it('should NOT enable the electric mode', (done) => {
      route.queryParams = {
        hybrid: 'false',
      };
      service = TestBed.inject(CarService);

      service.car$.subscribe((value: boolean) => {
        expect(value).toBe(false);
        done();
      });
    });
  });

Option 2

import { TestBed } from '@angular/core/testing';
import { ActivatedRouteSnapshot } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import { CarService } from './carService.service';


describe('CarService', () => {
  let service: CarService;
  let route: ActivatedRouteSnapshot;

    beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [
        CarService,
        {
          provide: ActivatedRouteSnapshot,
          useValue: {
            snapshot: {
              queryParams: {
               hybrid: ‘true’,
              },
            },
          },
        },
      ],
    });
    route = TestBed.inject(ActivatedRouteSnapshot);
    service = TestBed.inject(CarService);
  });

  describe('When there is a hybrid car', () => {
    it('should enable the electric mode', (done) => {

      service.car$.subscribe((value: boolean) => {
        expect(value).toBe(true);
        done();
      });
    });
  });

Option 3 using spyOn

 describe('When there is a hybrid car', () => {
    it('should enable the electric mode', (done) => {
       const route = new ActivatedRouteSnapshot();
       spyOn(route.queryParamMap, 'get').and.returnValue('true');

       service = TestBed.inject(CarService);

     service.car$.subscribe((value: boolean) => {
        expect(value).toBe(true);
        done();
      });
    });
  });

I also tried to implement an ActivatedRouteStub like in the documentation here ( https://angular.io/guide/testing-components-scenarios#routed-components ), but I get to the same point as in the previous options. The get carStatus() in the service can never read the queryParam, because it's empty.

If someone could help me with this, I'd be very grateful.

Answer 1

Try this (we are using option 1):

import { TestBed } from '@angular/core/testing';

import { CarService } from './carService.service';


describe('CarService', () => {
  let service: CarService;
  let route: ActivatedRoute;
  let queryParamMapGet: jasmine.Spy;

  beforeEach(() => {
    // create a spy for the get method
    queryParamMapGet = jasmine.createSpy('queryParamMapGet');
    TestBed.configureTestingModule({
      providers: [CarService
        { 
          provide: ActivatedRoute, 
          useValue: { 
           snapshot: {
              queryParamMap: {
                        get: queryParamMapGet // assign it to the get spy
              } 
          } 
         } 
        }
      ],
    });
  });

  describe('When there is a hybrid car', () => {
    it('should enable the electric mode', (done) => {
      // return true for the get value
      queryParamMapGet.and.returnValue('true');

      service = TestBed.inject(CarService);

      service.car$.subscribe((value: boolean) => {
        expect(value).toBe(true);
        done();
      });
    });
  });

  describe('When the car is not hybrid', () => {
    it('should NOT enable the electric mode', (done) => {
      // return false for the get value
      queryParamMapGet.and.returnValue('true');

      service = TestBed.inject(CarService);

      service.car$.subscribe((value: boolean) => {
        expect(value).toBe(false);
        done();
      });
    });
  });