¿Cómo probar un componente que depende de parámetros de ActivatedRoute?
Estoy probando un componente que se usa para editar un objeto. El objeto tiene un único id que se utiliza para obtener el objeto específico de una matriz de objetos alojados en un servicio. El idespecífico se obtiene a través de un parámetro que se pasa a través de 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 id parámetro, y el componente necesita este parámetro.
Por cierto: ya tengo un simulacro para la Session servicio, así que no hay preocupaciones.
4 answers
La forma más sencilla de hacer esto es simplemente usar el atributo useValue y proporcionar un Observable del valor que desea simular.
{
provide: ActivatedRoute,
useValue: {
params: Observable.of({id: 123})
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-06 14:16:53
¡He descubierto cómo hacer esto!
Puesto que ActivatedRoute es un servicio, se puede establecer un servicio simulado para él. Llamemos a este servicio simulado MockActivatedRoute. Vamos a extender 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, anule el valor de params e inicialícelo para que sea el Observable<> del parámetro en el que se basa el sujeto de prueba.
Entonces, como cualquier otro servicio simulado, simplemente inicialícelo y anule el proveedor para el componente.
Buena suerte!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-13 15:59:01
Así es como lo probé en angular 2.0 latest...
import { ActivatedRoute, Data } from '@angular/router';
Y en la sección Proveedores
{
provide: ActivatedRoute,
useValue: {
data: {
subscribe: (fn: (value: Data) => void) => fn({
yourData: 'yolo'
})
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-15 12:36:44
Solo agrega un simulacro de la ruta activada:
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: () => {} } }
};
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-07 09:52:11