2017-10-19 13 views
2

Je suis nouveau sur l'angulaire 4 et essaye de tester l'une des fonctions angulaires 4 router.paramMap des tests unitaires, Lecture des paramètres de route en mode jachère et fonctionnement comme prévu dans mon application.Comment tester unitairement un composant Angular 4 qui utilise router.paramMap

constructor(private router:Router, private actRoute:ActivatedRoute) { 
} 

ngOnInit() { 
    this.router.paramMap.subscribe(params => { 
     params.get(id); 
    }) 
...... 
} 

Mais lors de l'exécution de test unitaire, j'obtiens l'erreur qui dit ne peut pas appeler s'abonner méthode non définie, même si je suis passe la route qui passe comme ci-dessous param.

{ 
    provide: ActivatedRoute, 
    useValue: { params: Observable.of({id: 1}) } 
} 

S'il vous plaît suggérer

Répondre

3

Vous devez fournir paramMap au lieu de params. paramMap doit être de type ParamMap de @angular/router, donc l'objet normal peut être converti en ParamMap en utilisant la méthode convertToParamMap() de @angular/routing.

Vous pouvez fournir la ActivatedRoute maquette comme ci-dessous:

import { convertToParamMap} from '@angular/router'; 
.... 
..... 

{ 
     provide: ActivatedRoute, 
     useValue: { paramMap: Observable.of(convertToParamMap({id: 1})) } 
} 
0

nous utilisons actuellement ceci:

{ provide: ActivatedRoute, useValue: { 'params': Observable.from([{ 'id': '1'}]) } }, 
+0

Merci @Lotte Lemmens pour votre réponse, mais je suis tombé sur une autre question - TypeError: params.get est pas une fonction, une solution? –

+0

Y a-t-il une valeur supplémentaire pour utiliser paramMap? this.router.params.subscribe (par => { const idFromParams = par.id }) Cela devrait être testables comme mentionné ci-dessus –

0

Votre code a un problème, afin d'obtenir une URL de l'param, vous devez écrire des choses dans un autrement.

constructor(private router:Router, private actRoute:ActivatedRoute) { 
} 

ngOnInit() { 
    this.router.paramMap 
     .switchMap((params: ParamMap) => { 
      params.get(id); 
      .... 
     }) 
     .subscribe((....) => { 
      .... 
     }) 
}