web-dev-qa-db-fra.com

Comment tester à l'unité un composant dépendant des paramètres de ActivatedRoute?

Je suis en train de tester un composant utilisé pour éditer un objet. L'objet a un unique id qui est utilisé pour extraire l'objet spécifique d'un tableau d'objets hébergé dans un service. Le id spécifique est obtenu via un paramètre qui est transmis via un routage, en particulier via la classe ActivatedRoute.

Le constructeur est comme suit:

 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];

Je veux exécuter des tests unitaires de base sur ce composant. Cependant, je ne suis pas sûr de savoir comment je peux injecter le paramètre id, et le composant nécessite ce paramètre.

Au fait: j'ai déjà une maquette pour le service Session, donc pas d'inquiétude là-bas.

unit-testingangularangular2-routingangular2-testing
63
Colby Cox

Le moyen le plus simple de procéder consiste simplement à utiliser l'attribut useValue et à fournir un observable de la valeur que vous souhaitez simuler.

{
  provide: ActivatedRoute,
  useValue: {
    params: Observable.of({id: 123})
  }
}
96
zmanc

J'ai compris comment faire cela!

Puisque ActivatedRoute est un service, un service fictif peut en être établi. Appelons ce service factice MockActivatedRoute. Nous étendrons ActivatedRoute dans MockActivatedRoute, comme suit:

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

La ligne super(null, ....) initialise la super classe, qui a quatre paramètres obligatoires. Cependant, dans ce cas, aucun de ces paramètres n’est nécessaire, nous les initialisons donc à la valeur null. Tout ce dont nous avons besoin est la valeur de params qui est un Observable<>. Par conséquent, avec this.params, nous remplaçons la valeur de params et nous l'initialisons pour qu'il soit le Observable<> du paramètre sur lequel s'appuie le sujet de test.

Ensuite, comme tout autre service fictif, initialisez-le et remplacez le fournisseur du composant.

bonne chance!

16
Colby Cox

Voici comment je l'ai testé dans angular 2.0 last ...

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

et dans la section fournisseurs

{
  provide: ActivatedRoute,
  useValue: {
    data: {
      subscribe: (fn: (value: Data) => void) => fn({
        yourData: 'yolo'
      })
    }
  }
}
8
Rady

Ajoutez simplement une maquette de 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: () => {} } }
  };
}
3
Francesco Borzi

Pour certains utilisateurs de Angular> 5, si Observable.of (); ne fonctionne pas, ils peuvent utiliser uniquement of () en important l'importation {of} de 'rxjs'; =

1
Shashank Sharma