unit-testing - routertestingmodule - router jasmine test

¿Cómo probar un componente que depende de los parámetros de ActivatedRoute?

Question

Estoy probando un componente que se usa para editar un objeto. El objeto tiene una id única que se utiliza para capturar el objeto específico de una matriz de objetos alojados en un servicio. La id específica se obtiene a través de un parámetro que se pasa a través del enrutamiento, específicamente a través de la clase ActivatedRoute .

El constructor es el siguiente:

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

Quiero ejecutar pruebas unitarias básicas en este componente. Sin embargo, no estoy seguro de cómo puedo inyectar el parámetro id , y el componente necesita este parámetro.

Por cierto: ya tengo un simulacro para el servicio de Session , así que no te preocupes.

Answer 1

¡He descubierto cómo hacer esto!

Como ActivatedRoute es un servicio, se puede establecer un servicio simulado para él. Llamemos a este servicio simulado MockActivatedRoute . MockActivatedRoute ActivatedRoute en MockActivatedRoute , de la siguiente manera:

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

La línea super(null, ....) inicializa la superclase, que tiene cuatro parámetros obligatorios. Sin embargo, en este caso, no necesitamos nada de ninguno de estos parámetros, por lo que los inicializamos a valores null . Todo lo que necesitamos es el valor de params que es un Observable<> . Por lo tanto, con this.params , this.params el valor de params e inicializamos para que sea el Observable<> del parámetro en el que se basa el sujeto de prueba.

Luego, como cualquier otro servicio simulado, simplemente inicialícelo y anule el proveedor para el componente.

¡Buena suerte!

Answer 2

Así es como lo probé en angular 2.0 más reciente ...

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

y en la sección de Proveedores

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

Answer 3

La forma más sencilla de hacer esto es simplemente usar el atributo useValue y proporcionar un Observable del valor que desea burlarse.

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

Answer 4

Para algunas personas que trabajan en Angular> 5, si Observable.of (); no funciona, entonces pueden usar solo of () importando import {of} de ''rxjs'';

Answer 5

Simplemente agregue un simulacro 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: () => {} } }
  };
}