web-dev-qa-db-ja.com

Angular2 RC5モックアクティブ化ルートパラメーター

コンポーネントをテストできるようにするには、アクティブ化されたルートパラメータをモックできる必要があります。

ここまでが私の最善の試みですが、うまくいきません。

_{ provide: ActivatedRoute, useValue: { params: [ { 'id': 1 } ] } },
_

ActivatedRouteは、次のように実際のコンポーネントで使用されます。

_this.route.params.subscribe(params => {
    this.stateId = +params['id'];

    this.stateService.getState(this.stateId).then(state => {
        this.state = state;
    });
});
_

私の現在の試みで私が得るエラーは単純です：

TypeError: undefined is not a constructor (evaluating 'this.route.params.subscribe')

どんな助けでも大歓迎です。

angulartypescriptangular2-routingangular2-testing
12
GlacialFlames

モックは、置き換えられるオブジェクトを反映する必要があります。君は .subscribeは、オブジェクトだけでなくオブザーバブルを返すため、モック値も必要です。

import { Observable } from 'rxjs/Rx';

...

{ provide: ActivatedRoute, useValue: { 'params': Observable.from([{ 'id': 1 }]) } }
36
jonrsharpe

@jonrsharpeの回答ではparamsをモックできますが、これらのパラメーターはすべてのテストで同じです。

paramsを変更してテストの開始時に設定できるようにするには、次のようにします。

頂点で：

describe('SomeComponent', () => {
  (...)
  let params: Subject<Params>;
  (...)

beforeEach（async one-where imports、providers etc.など）：

beforeEach(async(() => {
  params = new Subject<Params>();
  (...)

providers：

  (...)
  {
    provide: ActivatedRoute,
    useValue: {
      params: params
    }
  }
  (...)

そしてテスト中：

it('someTest', () => {
  params.next({'id': '123'});
  fixture.detectChanges();
  (...)

重要な注意

必ずfixture.detectChangesの後にparams.nextを呼び出してください。

つまり、beforeEachからfixture.detectChangesを削除して、すべてのテストに追加する必要があります。

2
pbialy