角度2 RC観測単位のテスト方法

Question

角度2 RCアプリケーション用のテストをいくつか作成していますが、観測対象のテストにいくつか問題があります。ユニットは、嘲笑、観察に加入しようとするがテストされているとき、私は私がmodel3DServiceを注入し、観測可能であるmodel3DService.get3DModels()を呼び出して、私のDashboardComponentを、テストしていますエラーに'Cannot read property 'subscribe' of undefined'

を取得し、それはのように、観察Typeの設定方法を嘲笑が、 http要求を行い、3Dモデルオブジェクトの配列を返します。

ダッシュボードコンポーネント

import { Model3DService } from '../../services/model3D/model3D.service'; 
import { ProjectService } from '../../services/project/project.service'; 

@Component({ 
    selector: 'cmg-dashboard', 
    styles: [require('./css/dashboard.scss')], 
    template: require('./dashboard.html') 
}) 
export class DashboardComponent implements OnInit { 
    constructor(
    private projectService: ProjectService, 
    private model3DService: Model3DService 
) { } 

    ngOnInit(): void { 
    this.model3DService.get3DModels().subscribe((res: any[]) => { 
     this.findProjects(res); 
     this.models = res; 
     this.projectService.isProjectSelected = true; 
     this.createProject(res[0]); 
    }); 
    } 
} 

Model3DServiceオーケー

@Injectable() 
export class Model3DService { 
private models: any[] = []; 

public get3DModels(): Observable<any> { 
    return this.http.get('../../../json/3DModel.json') 
    .map((res: Response) => { 
     this.models = res.json(); 
     return this.models; 
    }); 
    } 
} 

今、我々はテストの下で私が書いているHERESにテストを持っていること：

はここにいくつかのサンプルコードです。

ダッシュボードコンポーネントのスペック

class MockModel3DService { 
    public get3DModels(): Observable<any> { 
    return; 
    } 
} 

describe('Dashboard Component',() => { 
    beforeEachProviders(() => { 
    return [ 
     DashboardComponent, 
     provide(ProjectService, { 
     useClass: MockProjectService 
     }), 
     provide(Model3DService, { 
     useClass: MockModel3DService 
     }) 
    ]; 
    }); 

    describe('ngOnInit',() => { 
    it('should call model3DService.get3DModels on init', (inject([DashboardComponent], (dashboardComponent: DashboardComponent, model3DService: MockModel3DService) => { 
     dashboardComponent.ngOnInit(); 
     expect(model3DService.get3DModels).toHaveBeenCalled(); 
    }))); 
    }); 
}); 

Answer 1

概念はAngularJSに$q約束をテストに似ています。 Stubbedメソッドは、観測可能なモックを返します。メソッドは、代わりにinheritsObservableを返すことができますが、オブザーバブルとオブザーバの両方のプロパティも持っています。

新鮮な被験者には模擬的な価値が提供されているので、事前に擬似的な約束を定義する必要があります（被験者は遅延性でこの特性を共有します、the relevant question参照）。

RxJS 4被験者は、スパイを避ける方法であるhasObserversを持っています。 RxJS 5の被験者はこの方法を逃しているが、observersの特性を明らかにする。

ほとんどの場合、それはその

let subject: Subject; 

class MockModel3DService { 
    public get3DModels(): Observable<any> { 
    return subject; 
    } 
} 

... 
// beforeEach(...) 
subject = new Subject; 
... 

// it(...) 
const models = ['mocked']; 
dashboardComponent.ngOnInit(); 

expect(subject.observers.length).toBe(1); 

subject.next(models); 
expect(model3DService.get3DModels).toHaveBeenCalled(); 
expect(dashboardComponent.models).toBe(models); 
... 

のようなものでなければなりません