Angular 独立地测试具有依赖性的角度服务

我正在测试一个依赖于Http服务的angular 4服务。建议使用独立单元测试，其中使用

new

关键字创建服务实例：

beforeEach(() => { service = new FancyService(); });

但是当FancyService使用Http服务时，我得到了错误

提供的参数与调用目标的任何签名都不匹配

这是有意义的，因为Http服务位于FancyService构造函数中。因此，我添加了一个新的Http实例，如下所示，但我得到了相同的错误

beforeEach(() => { service = new FancyService(new Http())})

---

如何使我的服务在测试中可用？

您需要模拟依赖关系-将存根服务与Nessery方法一起使用

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/take';

class FancyService {
  constructor(private http: HttpClient) {}

  getFancy(): Observable<any> {
    return this.http.get('url');
  }
}

describe('FancyService', () => {
  let service: FancyService;

  it('can get fancy', () => {
    const fakeHttpClient = {
      get: () => {}
    };
    spyOn(fakeHttpClient, 'get').and.returnValue(Observable.of('data'));

    service = new FancyService(<any>fakeHttpClient);

    service.getFancy().take(1).subscribe(
      (result: any) => {
        expect(result).toBe('data');
      }
    );
    expect(fakeHttpClient.get).toHaveBeenCalledTimes(1);
    expect(fakeHttpClient.get).toHaveBeenCalledWith('url');
  });
});

从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/of”；
导入'rxjs/add/operator/take'；
类FancyService{
构造函数（私有http:HttpClient）{}
getFancy（）：可观察{
返回此.http.get（'url'）；
}
}
描述（'FancyService'，（）=>{
让服务：FancyService；
它（'可以变得花哨'，（）=>{
const fakeHttpClient={
获取：（）=>{}
};
spyOn（fakeHttpClient，'get'）。和.returnValue（Observable.of（'data'））；
服务=新的FancyService（fakeHttpClient）；
service.getFancy（）.take（1）.订阅(
（结果：任何）=>{
期望（结果）。toBe（“数据”）；
}
);
期望（fakeHttpClient.get）.tohavebeincalledtimes（1）；
expect（fakeHttpClient.get）.toHaveBeenCalledWith（'url'）；
});
});

对于独立测试，我该如何做呢？谢谢，但是当设置

service=new FancyService（…

Type'{get:（）=>void；}'无法转换为类型'HttpClient'。类型'{get:（）=>void；}'Use

service=new FancyService（fakeHttpClient）中缺少属性'handler'

instead您是否在测试模块中导入了HttpModule？另外，我建议在特定测试中使用注入（因此没有新的FancyService（））不，我已尝试将其与链接中的示例保持一致。唯一的区别是现在

FancyService

有一个返回

http.get]的函数（…

。所以在测试中，我刚刚从

@angular/Http

导入了

Http

，并如上所述插入它。