web-dev-qa-db-ja.com

ActivatedRouteのパラメーターに依存するコンポーネントを単体テストする方法は？

オブジェクトの編集に使用されるコンポーネントの単体テストをしています。オブジェクトには、サービスでホストされているオブジェクトの配列から特定のオブジェクトを取得するために使用される一意のidがあります。特定のidは、ルーティングを介して、特にActivatedRouteクラスを介して渡されるパラメーターを介して取得されます。

コンストラクタは次のとおりです。

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

このコンポーネントで基本的な単体テストを実行したい。ただし、idパラメーターとコンポーネントneedsこのパラメーターをどのように注入できるかはわかりません。

ところで、私はすでにSessionサービスのモックを持っているので、心配はありません。

unit-testingangularangular2-routingangular2-testing
63
Colby Cox

これを行う最も簡単な方法は、useValue属性を使用して、モックする値のObservableを提供することです。

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

これを行う方法を見つけました！

ActivatedRouteはサービスであるため、そのための模擬サービスを確立できます。この模擬サービスをMockActivatedRouteと呼びましょう。次のように、ActivatedRouteをMockActivatedRouteに拡張します。

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

super(null, ....)行は、4つの必須パラメーターを持つスーパークラスを初期化します。ただし、このインスタンスでは、これらのパラメーターのいずれも必要ないため、null値に初期化します。必要なのは、Observable<>であるparamsの値だけです。したがって、this.paramsを使用して、paramsの値をオーバーライドし、テストサブジェクトが依存しているパラメーターのObservable<>になるように初期化します。

次に、他のモックサービスと同様に、初期化してコンポーネントのプロバイダーをオーバーライドします。

幸運を祈ります！

16
Colby Cox

最新のangular 2.0でテストした方法は次のとおりです...

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

およびプロバイダセクション

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

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: () => {} } }
  };
}
3
Francesco Borzi

Angular> 5で作業している一部の人々にとっては、if Observable.of（）;動作していない場合、 'rxjs'からimport {of}をインポートすることで、ちょうどof（）を使用できます;

1
Shashank Sharma