web-dev-qa-db-fra.com

Comment se moquer de route.snapshot.params?

Dans mon composant Angular 4, j'ai quelque chose comme:

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.myId = this.route.snapshot.params['myId'];
}

Et j'essaie de créer une maquette qui suppose ressembler à ceci:

class MockActivatedRoute extends ActivatedRoute {
  public params = Observable.of({ myId: 123 });
}

Mon test échoue avec:

TypeError: Impossible de lire la propriété 'params' de indéfini.

Comment est-ce que je suppose pour me moquer de lui? Ai-je mal compris la bonne utilisation de ActivatedRoute et devrais-je mieux utiliser router.subscribe dans mon composant? J'ai vu des exemples compliqués où les gens se moquaient de l'instantané, mais pour moi, cela semble trop compliqué.

Le test lui-même est assez simple:

describe('ngOnInit', () => {
it('should set up initial state properly',
  () => {
  const component = TestBed.createComponent(MyComponent).componentInstance;
    component.ngOnInit();
    expect(component.myId).toEqual('123');
  });
});

Si je change simplement une méthode sous le test en quelque chose comme ceci - le test fonctionne:

ngOnInit() {
    //this.myId = this.route.snapshot.params['myId'];
    this.route.params.subscribe(params => {
    this.myId = params['myId'];
    });
}

Évidemment, je dois me moquer de l'instantané activé, mais y a-t-il une meilleure approche?

angularangular-testing
11
and85

Ok, j'ai trouvé comment se moquer de l'instantané ActivatedRoute de manière simple. Quelque chose comme ça fonctionne pour moi:

providers: [MyComponent, {
  provide: ActivatedRoute,
  useValue: {snapshot: {params: {'myId': '123'}}}
}

Merci :)

17
and85

Si vous utilisez plutôt route.snapshot.paramMap.get ('uuid'):

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

{
    provide: ActivatedRoute, useValue:
        { snapshot: { paramMap: convertToParamMap( { 'uuid': '99-88-77' } ) } }
}
11
Simon

Il y a une erreur de syntaxe de base dans votre code

Au lieu de

this.myId = this.route.snapshot.params['myId'];


Mettez à jour votre code avec

this.myId = this.route.snapshot.paramMap.get('myId');


Vous pourrez maintenant vous moquer de param avec succès.
Je suppose que vous avez déclaré la propriété du champ ma pièce d'identité.

0
varundhariyal