我一直在尝试使用Jasmine为Angular 2项目创建集成测试.我可以很好地模拟服务和数据并运行相应的单元测试,但现在我想测试以确保我的组件可以使用该服务实际连接到后端API.到目前为止,我可以确认我的组件和服务中的方法是从我的间谍中触发的,但是我的组件中的.subscribe(….)方法在测试完成/失败之后才会完成.我的规范代码如下：

import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing';
import { DebugElement } from "@angular/core";
import { By } from "@angular/platform-browser";

import { ReviewComponent } from './review.component';
import { FormsModule } from '@angular/forms';
import { UrlService } from 'app/shared/services/url.service';
import { HttpModule, Http } from '@angular/http';
import { ReviewService } from "./review.service";

describe('CommunicationLogComponent', () => {
  let component: ReviewComponent;
  let fixture: ComponentFixture<ReviewComponent>;
  let serviceSpy: jasmine.Spy;
  let componentSpy: jasmine.Spy;
  let service: ReviewService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, HttpModule],
      providers: [UrlService],
      declarations: [ReviewComponent]
    })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ReviewComponent);
    component = fixture.componentInstance;
    component.processId = 6;
    service = fixture.debugElement.injector.get(ReviewService);
    componentSpy = spyOn(component, "ngOnInit").and.callThrough();
    serviceSpy = spyOn(service, 'getReviewByProcess').and.callThrough();
  });

  it('should create component', () => {
    expect(component).toBeTruthy();
  });
  it('should not have called ngOnInit() yet', () => {
    expect(componentSpy).not.toHaveBeenCalled();
  });

  it('should make a call to ngOnInit() and by extension getReviewByProcess', () => {
    fixture.detectChanges();
    expect(componentSpy).toHaveBeenCalled();
    expect(serviceSpy).toHaveBeenCalled();
  });
  //ISSUES HERE
  it('should show review after the getReviewByProcess resolves', async(() => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(componentSpy).toHaveBeenCalled();
      fixture.detectChanges();
      expect(component.Reviews[0]).not.toBe(undefined);
    });
  }), 5000);        
});

所有测试直到标有“// ISSUES HERE”的测试工作正常并通过.

在尝试完成测试之前,我正在使用async()并等待fixture变得稳定.它还通过componentSpy确认已调用ngOnInit(它将连接到后端并订阅Review).

我的组件代码如下所示：

import { Component, EventEmitter, Input, OnInit } from '@angular/core';

//Service 
import { ReviewService } from "app/process/monitoring/shared/components/review/review.service";

//Classes
import { Review } from "app/process/monitoring/shared/components/review/review";

@Component({
  providers: [
    ReviewService
  ],
  selector: 'monitoring-review',
  templateUrl: './review.component.html',
  styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit {

  public Review: Review = new Review();
  public Reviews: Review[] = [];

  @Input() public processId: number;

  constructor(
    private ReviewService: ReviewService
  ) { }


  ngOnInit(): void {
    this.ReviewService.getReviewByProcess(this.processId, true).first().subscribe(
      Reviews => {
        if (Reviews) {
          this.Reviews = Reviews //doesn't trigger until test is finished
        }
      },
      error => console.log(error)
    );
  }
}

最后我的ReviewService看起来像这样：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions, RequestMethod, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

// App-wide Services
import { UrlService } from 'app/shared/services/url.service';

// Classes
import { Review } from "app/process/monitoring/shared/components/review/review";


@Injectable()
export class ReviewService {

  private devUrl: string;
  private jsonHeaders: Headers = new Headers({ 'Content-Type': 'application/json' });
  private prodUrl: string;
  private reviewPath: string = 'monitoring/program/';

  constructor(
    private urlService: UrlService,
    private http: Http
  ) {
    this.devUrl = this.urlService.getUrl('dev').url;
    this.prodUrl = this.urlService.getUrl('prod').url;
  }

  getReviewByProcess(processId: number, isProd: boolean = false): Observable<Review[]> {
    let targetUrl: string = (isProd ? this.prodUrl : this.devUrl) + this.reviewPath + "/" + processId;

    return this.http.get(targetUrl, { withCredentials: true })
      .map((res: Response) => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error')
      );
  };
}

使用Karma调试器,我可以确认我的测试调用ngOnInit,然后调用该服务,但它永远不会命中我的组件的内部部分(标记为“//不触发”)直到我的测试之后完成了.

总结一下：我想创建一个测试,可以使用“实时”后端测试我的组件与我的服务集成以收集我的数据.这是服务,我的组件不会嘲笑任何东西.我可以确认我的方法已经到达,但在我的ReviewComponent的ngOnInit()方法中找到的.subscribe(…)在测试完成/失败之后才能完成.

最佳答案 您需要返回observable并在测试中订阅它以使异步方法等待它.例如,以下假设测试将起作用.

it('', async(() => {
  observable().subscribe(
    (review) => {
       expect(component.Reviews[0]).not.toBe(undefined)
    }
  )
}));

问题是您没有等待在测试中执行异步调用.您可以稍微改变角度http服务,即：

import { Http, HttpModule, BaseRequestOptions, XHRBackend, HttpModule, ConnectionBackend } from '@angular/http';
const httpSubject = new Subject()
const http$= httpSubject.asObservable()
const httpFactory = (backend, options) => {
  const newHttp = new Http(backend, options);
  const helperHttp = new Http(backend, options);
  newHttp.get = function(strng, options) {
    return helperHttp.get(strng, options).do((response) => {
      setTimeout(() => {
        httpSubject.next({});
      }, 300);
    });
  };
  return newHttp;
}

TestBed.configureTestingModule({
  imports: [HttpModule, FormModule],
  providers: [
    UrlService,
    ConnectionBackend,
    BaseRequestOptions
    {
      provide: Http,
      useFactory: httpFactory,
      deps: [ XHRBackend, BaseRequestOptions] 
    }
  ],
  declarations: [ReviewComponent]
})

it('should show review after the getReviewByProcess resolves', 
  async(() => {
    http$.subscribe(() => {
      expect(componentSpy).toHaveBeenCalled();
      expect(component.Reviews[0]).not.toBe(undefined);
    })
    fixture.detectChanges();
}));