Angular 2에서 관측 가능한 장치 테스트

Angular 2에서 관측 가능한 장치 테스트

각도 2에서 관측 가능한 결과를 반환하는 서비스를 테스트하는 올바른 장치 방법은 무엇입니까?자동차 서비스 클래스에 getCars 방법이 있다고 가정해 보겠습니다.

...
export class CarService{
    ...
    getCars():Observable<any>{
        return this.http.get("http://someurl/cars").map( res => res.json() );
    }
    ...
}

테스트를 작성하려고 하면 'SPEC에는 기대가 없습니다'라는 경고가 표시됩니다.

it('retrieves all the cars', inject( [CarService], ( carService ) => {
     carService.getCars().subscribe( result => {         
         expect(result.length).toBeGreaterThan(0);
     } );       
}) );

injectionAsync를 사용하는 것은 작동하기 때문에 도움이 되지 않습니다.Promise내가 볼 수 있는 한 많은 물건들

정확한 방법은Angular(ver. 2+):

it('retrieves all the cars', waitForAsync(inject([CarService], (carService) => {
     carService.getCars().subscribe(result => expect(result.length).toBeGreaterThan(0)); 
}));

비동기 관측치 대 동기 관측치

관측치는 동기식일 수도 있고 비동기식일 수도 있다는 점을 이해하는 것이 중요합니다.

특정 예제에서 Observable은 비동기식입니다(http 호출을 래핑합니다).
따라서 특별한 비동기 테스트 존에서 본체 내부의 코드를 실행하는 기능을 사용해야 합니다.그것은 자신의 몸에서 만들어진 모든 약속을 가로채고 추적하여 비동기적인 행동이 완료되면 테스트 결과를 기대할 수 있게 합니다.

그러나 관측치가 동기식인 경우 다음과 같습니다.

...
export class CarService{
    ...
    getCars():Observable<any>{
        return Observable.of(['car1', 'car2']);
    }
    ...

당신은 필요하지 않았을 것입니다.waitForAsync기능과 당신의 시험은 간단해질 것입니다.

it('retrieves all the cars', inject([CarService], (carService) => {
     carService.getCars().subscribe(result => expect(result.length).toBeGreaterThan(0)); 
});

구슬

일반적인 관측치와 특히 각도를 검정할 때 고려해야 할 또 다른 사항은 대리석 검정입니다.

당신의 예는 꽤 간단하지만, 보통 논리는 단지 전화하는 것보다 더 복잡합니다.http서비스와 이 논리를 시험하는 것은 골칫거리가 됩니다.
구슬은 매우 짧고 간단하고 포괄적인 검정을 만듭니다(ngrx 효과를 검정하는 데 특히 유용합니다).

사용하시는 경우Jasmine재스민 구슬을 사용할 수 있습니다.Jestjest-marbles가 있지만 다른 것을 선호한다면 rxjs-marbles가 있으며 모든 테스트 프레임워크와 호환되어야 합니다.

여기에 구슬로 경주 상태를 재현하고 고정하는 좋은 예가 있습니다.

---

시험 공식안내

https://angular.io/guide/testing 은 현재 몇 가지 방법을 보여주고 있습니다.여기 하나 있습니다.

it('#getObservableValue should return value from observable',
    (done: DoneFn) => {
       service.getObservableValue().subscribe(value => {
       expect(value).toBe('observable value');
       done();
    });
});

마지막으로 실무적인 예로 마치겠습니다.Observableclass에는 Observable을 Promise 개체로 변환하는 Promise 메서드가 있습니다.올바른 방법은 다음과 같습니다.

it('retrieves all the cars', injectAsync( [CarService], ( carService ) => {
  return carService.getCars().toPromise().then( (result) => {         
     expect(result.length).toBeGreaterThan(0);
  } );       
}) );

위의 코드는 Observable 객체와 함께 작동하지만, 여전히 문제가 있습니다.Observables는 Http 요청에서 반환되었는데, 이 요청은 아마도 버그일 것입니다.다음은 위의 사례를 보여주는 플렁커입니다. http://plnkr.co/edit/ak2qZH685QzTN6RoK71H?p=preview

삭제:
버전 베타.14 현재 제공된 솔루션과 제대로 작동하는 것으로 보입니다.

저는 이 방법을 추천합니다. 제가 생각하기에 더 우아하다고 생각합니다.

expectAsync(carService.getCars().toPromise()).toBeResolvedWith(myExpectedValue);

Jasmine Matcher를 사용하여 자신만의 비동기식을 제공할 수도 있습니다.

AsyncTestCompleter는 https://github.com/angular/angular/issues/5443 에서 사용되지 않습니다.injectAsynchttps://github.com/angular/angular/issues/4715#issuecomment-149288405 으로 대체했습니다.
그렇지만 injectAsync또한 현재는 사용되지 않습니다.
injectAsync더 이상 사용하지 않습니다. https://github.com/angular/angular/pull/5721 (@ErdincGuzel의 코멘트 참조)

it('retrieves all the cars', injectAsync( [CarService], ( carService ) => {
     var c = PromiseWrapper.completer();
     carService.getCars().subscribe( result => {         
         expect(result.length).toBeGreaterThan(0);
         c.resolve();
     } ); 
     return c.promise;      
}) );

제가 그럭저럭 할 수 있었던 방법은 예약 후에 가입하고 전화를 하는 것입니다.

it('should equal bar', (done: any) => {
 bar.getFoo().subscribe(v => {
  expect(v).toBe('foo');
  done();
 });
});

언급URL : https://stackoverflow.com/questions/34607990/unit-testing-an-observable-in-angular-2