Question

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

失败：this.monthService.getMonthView（...）。然后不是一个函数 TypeError：this.monthService.getMonthView（...）。然后不是函数

服务：（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);
    }));

Answer 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 }
],

Angular 4测试用例.then（）不是函数

1 个答案: