web-dev-qa-db-ja.com

route.snapshot.paramsをモックする方法は？

私のAngular 4コンポーネントには、次のようなものがあります。

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.myId = this.route.snapshot.params['myId'];
}

そして、私は次のように見えると思われるモックを作成しようとしています：

class MockActivatedRoute extends ActivatedRoute {
  public params = Observable.of({ myId: 123 });
}

私のテストは失敗します：

TypeError：未定義のプロパティ「params」を読み取ることができません。

どうやってそれをモックすると思いますか？ ActivatedRouteの適切な使用法を誤解したことがありますが、router.subscribe私のコンポーネントに？スナップショット自体をitself笑した複雑な例をいくつか見ましたが、私にとっては複雑すぎるようです。

テスト自体は非常に簡単です。

describe('ngOnInit', () => {
it('should set up initial state properly',
  () => {
  const component = TestBed.createComponent(MyComponent).componentInstance;
    component.ngOnInit();
    expect(component.myId).toEqual('123');
  });
});

テスト対象のメソッドを次のように変更するだけで、テストは機能します。

ngOnInit() {
    //this.myId = this.route.snapshot.params['myId'];
    this.route.params.subscribe(params => {
    this.myId = params['myId'];
    });
}

明らかに、アクティブ化されたスナップショットをモックする必要がありますが、より良いアプローチはありますか？

angularangular-testing
11
and85

OK、ActivatedRouteスナップショットを簡単な方法でモックする方法を見つけました。このような何かが私のために働く：

providers: [MyComponent, {
  provide: ActivatedRoute,
  useValue: {snapshot: {params: {'myId': '123'}}}
}

ありがとう：）

17
and85

代わりにroute.snapshot.paramMap.get（ 'uuid'）を使用する場合：

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

{
    provide: ActivatedRoute, useValue:
        { snapshot: { paramMap: convertToParamMap( { 'uuid': '99-88-77' } ) } }
}
11
Simon

コードに基本的な構文エラーがあります

の代わりに

_this.myId = this.route.snapshot.params['myId'];_


でコードを更新します

this.myId = this.route.snapshot.paramMap.get('myId');


これで、paramを正常にモックできるようになります。
フィールドプロパティを宣言していると仮定しています 私のID。

0
varundhariyal