ActivatedRoute의 매개 변수에 의존하는 구성 요소를 단위 테스트하는 방법은 무엇입니까?

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매개 변수를 삽입 할 수있는 방법이 확실하지 않으며 구성 요소 에이 매개 변수가 필요 합니다.

그건 그렇고 : 이미 Session서비스에 대한 모의가 있으므로 걱정할 필요가 없습니다.

---

이를 수행하는 가장 간단한 방법은 useValue속성을 사용하고 모의하려는 값의 Observable을 제공하는 것입니다.

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

---

나는 이것을하는 방법을 알아 냈다!

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값으로 초기화합니다 . 모든 우리의 필요의 값입니다 params이다 Observable<>. 따라서를 사용 this.params하여의 값을 재정의 하고 테스트 대상이 의존하는 매개 변수 params가되도록 초기화합니다 Observable<>.

그런 다음 다른 모의 서비스와 마찬가지로 초기화하고 구성 요소의 공급자를 재정의합니다.

행운을 빕니다!

---

angular 2.0 최신 버전에서 테스트 한 방법은 다음과 같습니다.

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

및 공급자 섹션

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

---

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

---

Angular> 5에서 작업하는 일부 사람들의 경우 Observable.of (); 작동하지 않으면 'rxjs'에서 import {of}를 가져 와서 of () 만 사용할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/38356084/how-to-unit-test-a-component-that-depends-on-parameters-from-activatedroute