web-dev-qa-db-fra.com

Comment vous moquez ActivatedRoute

J'apprends Angular et je veux faire des tests, mais je suis coincé. J'ai une fonction:

ngOnInit(): void {
    this.route.paramMap
    .switchMap((params: ParamMap) => 
        this.SomethingService.getSomething(params.get('id')))
        .subscribe(something => {
            this.something = something;
            this.doSomethingElse();
    });
}

où 

route: ActivatedRoute

et je veux le tester mais je ne sais pas comment se moquer d'ActivatedRoute

angularunit-testingangular-router
6
Daria Domagała

Voici un moyen simple de simuler ActivatedRoute:

    TestBed.configureTestingModule({
      declarations: [YourComponenToTest],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            params: Observable.from([{id: 1}]),
          },
        },
      ]
    });

Ensuite, dans votre test, il sera disponible et votre fonction devrait fonctionner avec cela (au moins la partie ActivatedRoute)

Vous pouvez l'obtenir avec TestBed.get(ActivatedRoute) dans vos fonctions it si vous voulez le stocker dans une variable.

N'oubliez pas d'importer Observable de rxjs/Rx et non de rxjs/Observable

10
Nicolas DINQUEL

Pour ceux qui sont intéressés par la façon de le faire correctement avec plusieurs propriétés, voici comment vous définissez votre classe fictive:

import { convertToParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export class ActivatedRouteMock {
    public paramMap = Observable.of(convertToParamMap({ 
        testId: 'abc123',
        anotherId: 'd31e8b48-7309-4c83-9884-4142efdf7271',          
    }));
}

De cette façon, vous pouvez vous abonner à votre paramMap et récupérer plusieurs valeurs - dans ce cas, testId et anotherId.

6
Andrius Naruševičius

Je faisais face au même problème en utilisant paramMap au lieu de params. Cela a fonctionné pour moi, au moins pour le cas le plus simple:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { ComponentToTest } from './component-to-test.component';
import { ActivatedRoute } from '@angular/router';

TestBed.configureTestingModule({
  declarations: [ComponentToTest],
  providers: [
    { 
        provide: ActivatedRoute, 
        useValue: {
            paramMap: Observable.of({ get: (key) => 'value' })
        }
    }
  ]
});
5
Flaid

Modifier la réponse d'Andrus ci-dessus. . .

Pour RxJS 6+:

import { convertToParamMap } from '@angular/router';
import { of } from 'rxjs';


export class ActivatedRouteMock {
    public paramMap = of(convertToParamMap({ 
        testId: 'abc123',
        anotherId: 'd31e8b48-7309-4c83-9884-4142efdf7271',          
    }));
}

https://www.learnrxjs.io/operators/creation/of.html

3
schuno