Angular 4 测试用例 .then() 不是函数答案

【问题标题】：Angular 4 test case .then() is not a functionAngular 4 测试用例 .then() 不是函数
【发布时间】：2017-10-17 05:40:58
【问题描述】：

我正在尝试使用测试用例覆盖组件中的服务调用，如下所述。但是在运行ng test 时出现错误，如下所示：

失败：this.monthService.getMonthView(...).then 不是函数 TypeError: this.monthService.getMonthView(...).then 不是函数

服务： (MonthService.ts)

getMonthView是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);
    }

组件： (MonthComponent.ts)

MonthService被导入并注入MonthComponent.ts

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

测试套件：

 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);
    }));

【问题讨论】：

标签： javascript angular jasmine karma-jasmine

【解决方案1】：

这是我为使其工作所做的工作。

// 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));
  }
}

和服务

// 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);
  }
}

和测试

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);
      });
    }),
  );
});

但我建议完全模拟该服务，例如

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

【讨论】：