ユニットテスト「成功」と「エラー」観測可能な応答が角度2のコンポーネント

Question

サービスOnInitを呼び出すコンポーネントの単体テストを作成しています。応答が「成功」である場合、取られた1つのアクションと「エラー」のための別のアクション。

両方のケースをテストする最良の方法は何ですか？私はコンポーネントと単体テストの簡略版を作成しました。両方のケースで簡単にテストできるもの。

私は解決策hereを実装しようとしましたが、私はその実装を中止する必要があります。私はまた、仕様やコメントに表示されるようにエラーを投げようとしました。

コンポーネント

@Component({ 
    selector: 'app-observer-throw-unit-test', 
    template: '<p>{{ data }}</p>' 
}) 
export class ObserverThrowUnitTestComponent implements OnInit { 
    public data: string; 

    constructor(private _observerThrowService: ObserverThrowService) { } 

    ngOnInit() { 
     this._observerThrowService.getData().subscribe(
      (data) => { 
       this.data = data; 
      }, 
      (error) => { 
       this.redirect() 
      } 
     ) 
    } 

    redirect() { 
     this.data = "Redirecting..."; 
    } 

} 

スペック

const data: string = "Lorem ipsum dolor sit amet."; 

const ObserverThrowServiceStub = { 
    error: false, 
    getData() { 
    return Observable.create((observer) => { 
     if(this.error) { 
     observer.error(new Error()); 
     } else { 
     observer.next(data); 
     } 
     observer.complete(); 
    }) 
    } 
} 

describe('ObserverThrowUnitTestComponent',() => { 
    let component: ObserverThrowUnitTestComponent; 
    let fixture: ComponentFixture<ObserverThrowUnitTestComponent>; 
    let _observerThrowService: ObserverThrowService; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ ObserverThrowUnitTestComponent ], 
     providers: [ 
     { provide: ObserverThrowService, useValue: ObserverThrowServiceStub }, 
     ] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(ObserverThrowUnitTestComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    _observerThrowService = TestBed.get(ObserverThrowService); 
    }); 

    it('should set "data" to "Lorem ipsum dolor sit amet." on success',() => { 
     expect(component.data).toEqual("Lorem ipsum dolor sit amet."); 
    }); 

    it('should set "data" on "Redirecting..." on error',() => { 
    ObserverThrowServiceStub.error = true; 
    // spyOn(_observerThrowService, "getData").and.returnValue(Observable.throw("error")); // This did not work and returned : TypeError: undefined is not a constructor (evaluating 'Observable_1.Observable.throw("error")') in src/test.ts 
    spyOn(_observerThrowService, "getData") 
    expect(component.data).toEqual("Redirecting..."); 
    }); 

    it('should set "data" on "Redirecting..." on error',() => { 
    // This works after setting error to true in the previous test 
    spyOn(_observerThrowService, "getData") 
    expect(component.data).toEqual("Redirecting..."); 
    }); 

}); 

Answer 1

私は2つのモック作成します - エラーがスロー1：

class ObserverThrowServiceStub { 
    getData() { 
    return Observable.throw(new Error('Test error')); 
    } 
} 

と正常に返さ一つ。

class ObserverSuccessServiceStub { 
    getData() { 
    return Observable.from(data); 
    } 
} 

その後、代わりにすべてのテストに同じモックサービスを提供する、あなたが適切に問題のテストに応じて、失敗/成功したモックサービスを提供する（明らかにあなたは、設定方法にあなたのモジュール構成を移動する必要がありますあなたは、各テスト内からではなく、.beforeEach()コードで呼び出すこと

（正確にこのモデルを使用しています）、ここで観測を使用して角度のサービスをテストするには本当に素晴らしい記事があり

：。 http://www.zackarychapple.guru/angular2/2016/11/25/angular2-testing-services.html

Answer 2

someObj.ObservableReturninFunction().subscribe(
    (obj)=> { 
     conosle.log(obj.message); 
    }, 
    (err)=>{ 
     console.log(err.message); 
    } 
}); 
when success; 
    SpyOn(someObj,"ObservableReturninFunction").and.returnValue(
      Observable.of({message: "something"})); 
when erro: 
    SpyOn(someObj,"ObservableReturninFunction").and.returnValue(
     Observable.throw({message: "some-error"})); 

は、 10