Come testare un componente che dipende dai parametri di ActivatedRoute?

Question

L'unità sta testando un componente utilizzato per modificare un oggetto. L'oggetto ha un id univoco che viene utilizzato per prelevare l'oggetto specifico da una matrice di oggetti ospitati in un servizio. Lo specifico id viene fornito tramite un parametro passato tramite il routing, in particolare tramite la classe ActivatedRoute.

Il costruttore è la seguente:

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

voglio correre test di unità di base su questo componente. Tuttavia, non sono sicuro di come sia possibile iniettare il parametro id e il componente ha bisogno di questo parametro come.

A proposito: ho già una simulazione per il servizio Session, quindi non preoccuparti.

Answer 1

Il modo più semplice per farlo è di utilizzare solo l'attributo useValue e fornire un osservabile del valore che si desidera prendere in giro.

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

Answer 2

Ho capito come fare!

Poiché ActivatedRoute è un servizio, è possibile stabilire un servizio di simulazione. Chiamiamo questo servizio simulato MockActivatedRoute. Si estenderà ActivatedRoute in MockActivatedRoute, come segue:

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

La linea super(null, ....) inizializza il super classe, che ha quattro parametri obbligatori. Tuttavia, in questo caso, non abbiamo bisogno di nulla da nessuno di questi parametri, quindi li inizializziamo ai valori null. Tutto ciò di cui abbiamo bisogno è il valore di params che è un Observable<>. Pertanto, con this.params, si sostituisce il valore di params e lo si inizializza come Observable<> del parametro su cui si basa il soggetto di test.

Quindi, come qualsiasi altro servizio di simulazione, è sufficiente inizializzarlo e sovrascrivere il provider per il componente.

Buona fortuna!

Answer 3

Ecco come ho provato a angolare 2.0 ultima ...

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

e nella sezione Provider

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

Answer 4

Basta aggiungere un mock del 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:() => {} } } 
    }; 
}