在 Angular 2 中测试 API 调用

Question

我有以下 2 个组件和一个由两者共享的服务。我需要对它们进行单元测试，但我无法弄清楚如何测试服务对以下组件的依赖性。

//a.component.ts
import { Component, Input } from '@angular/core';
import { Http, Response } from '@angular/http';
import { SharedService } from './shared/shared.service';

@Component({
  selector: 'a',
  providers: [],
  templateUrl: './a.component.html'
})
export class AComponent {
  ax = {};

  constructor(public helperService: SharedService) {
    helperService.getFromAPI().subscribe(data => this.ax = data["people"]);
  }

}



//b.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared/shared.service';
import { Subscription }   from 'rxjs/Subscription';


@Component({
  selector: 'b',
  providers: [],
  templateUrl: './b.component.html'
})

export class BComponent {
  subscription: Subscription;
  x = '';

  constructor(public helperService: SharedService) {}

  ngOnInit() {
    this.subscription = this.helperService.c$.subscribe(
      data => {
        this.x = data;
      });
  }
}

这是调用 API 的服务。另一个函数setC 在单击按钮时将值添加到可观察对象，并且该值将由BComponent 访问。

// shared.service
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';

@Injectable()
export class SharedService {

  private c = new Subject<string>();
  c$ = this.c.asObservable();

  constructor(
    private http: Http
  ) { }

  getFromAPI() {
    return this.http.get('url')
      .map((res: Response) => res.json());
  }

  setC(data: string) {
    this.c.next(data);
  }
}

如何在 Jasmine 中进行测试？到目前为止，我的努力都是徒劳的。

我尝试过这样做

it('xxx', inject([SharedService], (service: SharedService) => {
    const fixture = TestBed.createComponent(AComponent);
    const app = fixture.componentInstance;

    spyOn(service, 'c$').and.callThrough;

    service.setC('Random Name');
    expect(service.c$).toHaveBeenCalled();

  }));

Expected spy c$ to have been called. 测试失败。

Answer 1

您似乎在监视Observable，但是当您调用setC 时调用的是您主题的next 函数。所以你可能想监视它。

spyOn(service.c, 'next').and.callThrough() 之类的东西应该可以解决问题。

希望对你有帮助。

---

更新：如果您想明确测试 Observable 的功能，那么我只需订阅它，调用 setC 并测试响应，如下所示：

service.$c.subscribe((data) => {
    expect(data).toBe('foobar');
});
service.setC('foobar');

---

在评论中回答您的问题：由于您的 c 是私人的，您可以像这样监视它：spyOn(service['c'], 'next').and.callThrough()。 可能是您的 ide 会唠叨要监视私有方法，在这种情况下，您可以像这样添加 any 类型：spyOn<any>(...)