Angular 4 test case .then() n'est pas une fonction

Question

J'essaie de couvrir mon appel de service dans le composant avec le cas de test comme décrit ci-dessous. Mais obtenir l'erreur lors de l'exécution ng test comme indiqué ci-dessous:

Failed: this.monthService.getMonthView(...).then is not a function TypeError: this.monthService.getMonthView(...).then is not a function

Service: (MonthService.ts)

getMonthView est l'appel de service à l'intérieur MonthService

getMonthView(forecastMonth: string): Promise<any[]> { 
     const options = new RequestOptions({ headers: this.headers }); 
     const url = this.BaseUrl + forecastMonth; 
     return this.http.get(url, options) 
      .toPromise() 
      .then(response => response.json() as any[]) 
      .catch(this.handleError); 
    } 

Composant: (MonthComponent.ts)

MonthService est importé et injecté dans MonthComponent.ts

loadDataOnMonthViewClicked(forecastMonth) { 
      this.monthService.getMonthView(forecastMonth) 
       .then(response => 
        this.result = response 
       ); 
     } 

Test Suite:

beforeEach(() => { 
     /** 
      * Ref:https://angular.io/guide/testing#!#component-fixture 
      */ 
     fixture = TestBed.createComponent(MonthComponent); 
     component = fixture.componentInstance;   
     myService = TestBed.get(MonthService);   
     //fixture.detectChanges(); 
    }); 
    it('should be created',() => { 
     expect(component).toBeTruthy(); 
    }); 

    fit('should test loadDataOnMonthViewClick', async(() => { 
     let data=["10","20","30"]; 
     spyOn(component.monthService, 'getMonthView').and.returnValue(result);   
     component.loadDataOnMonthViewClicked('Jan'); 
     fixture.detectChanges(); 
     expect(component.result).toBe(data); 
    })); 

Answer 1

Voici ce que je l'ai fait pour le faire fonctionner.

// the component 

import { Component, OnInit } from "@angular/core"; 
import { MonthService } from "./month.service"; 

@Component({ 
    selector: "app-root", 
    template: "", 
}) 
export class AppComponent { 
    result = undefined; 
    constructor(private monthService: MonthService) { } 

    loadDataOnMonthViewClicked(forecastMonth) { 
    this.monthService 
     .getMonthView(forecastMonth) 
     .then(response => (this.result = response)); 
    } 
} 

et le service

// the service 

import { Injectable } from "@angular/core"; 
import { Http } from "@angular/http"; 
import "rxjs/add/operator/toPromise"; 

@Injectable() 
export class MonthService { 
    constructor(private http: Http) { } 

    getMonthView(_forecastMonth: string) { 
    return this.http 
     .get("http://jsonplaceholder.typicode.com/posts/1") 
     .toPromise() 
     .then(response => response.json()) 
     .catch(console.error); 
    } 
} 

et le test

import { TestBed, async, ComponentFixture } from "@angular/core/testing"; 
import { AppComponent } from "./app.component"; 
import { MonthService } from "./month.service"; 
import { HttpModule } from "@angular/http"; 
import { Observable } from "rxjs/Observable"; 
import "rxjs/add/observable/of"; 

describe("AppComponent",() => { 
    let fixture: ComponentFixture<AppComponent>; 
    let component: AppComponent; 
    let myService; 

    beforeEach(
    async(() => { 
     TestBed.configureTestingModule({ 
     providers: [MonthService], 
     declarations: [AppComponent], 
     imports: [HttpModule], 
     }).compileComponents(); 
    }), 
); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(AppComponent); 
    component = fixture.componentInstance; 
    myService = fixture.debugElement.injector.get(MonthService); 
    fixture.detectChanges(); 
    }); 

    it(
    "should test loadDataOnMonthViewClick", 
    async(() => { 
     let data = ["10", "20", "30"]; 
     spyOn(myService, "getMonthView").and.callFake(() => 
     Promise.resolve(data), 
    ); 
     component.loadDataOnMonthViewClicked("Jan"); 
     fixture.whenStable().then(() => { 
     expect(component.result).toBe(data); 
     }); 
    }), 
); 
}); 

Mais je suggère de se moquer de service tout à fait, avec quelque chose comme

providers: [ 
    { provide: FetchDataService, useClass: FetchDataServiceMock } 
],