Angular 如何使用jasmineSpy测试角度分量？

我有如下组件和服务。我想编写一个单元测试来测试这个组件，尝试使用间谍来模拟服务，但是它在启动组件时抛出“no provider for HttpClient”错误，因为我的NewsService依赖于HttpClient

我应该如何调整代码以注入HttpClient

HomeComponent：

import { Component,Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { News } from '../models/news';
import { NewsService } from '../service/news.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [NewsService]
})
export class HomeComponent {
public news: News[];
public headline: News;
private baseUrl: string;
constructor(private router: Router, private service: NewsService) {

}
ngOnInit() {
  let baseUrl = document.getElementsByTagName('base')[0].href;
  var headurl = this.baseUrl + "api/News/Headline?country=us&category=business";
  this.service.getNews(headurl).subscribe((res) => { this.headline = res[0]; });

  var url = this.baseUrl + "api/News/Category?country=us&category=business";

  this.service.getNews(url).subscribe((res) => this.news = res);

}

新闻服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { News } from '../models/news';
import { Observable } from 'rxjs';

const httpOptions = {
headers: new HttpHeaders({
'Content-Type':  'application/json'
})
};

@Injectable()
export class NewsService {
constructor(
private http: HttpClient) {
}

getNews(url:string): Observable<News[]> {
  return this.http.get<News[]>(url);
  }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpParams}；
从'@angular/common/http'导入{HttpHeaders}；
从“../models/News”导入{News}；
从“rxjs”导入{Observable}；
常量httpOptions={
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”
})
};
@可注射（）
出口类新闻服务{
建造师(
专用http:HttpClient）{
}
getNews（url:string）：可观察{
返回此.http.get（url）；
}
}

试验

import{async，fakeAsync，ComponentFixture，TestBed，tick}来自“@angular/core/testing”；
从'@angular/common/http'导入{HttpClient，HttpResponse}；
从“../models/News”导入{News}；
从“../service/news.service”导入{newservice}；
从“../home/home.component”导入{HomeComponent}；
从“rxjs/observable/of”导入{of}；从'@angular/Router'导入{Router}；
描述（'HomeComponent'，（）=>{
let组件：HomeComponent；
let fixture:ComponentFixture；
让我们来看看新闻特务：茉莉。特务；
让头条新闻：HTMLElement；
让我们来看看标题：新闻[]；
让url:string；
在每个之前（（）=>{
测试标题=[{
NewsId:'测试'，
作者：'测试'，
说明:"标题",，
发布日期：“2018-8-8”，
标题：“安卓”，
网址：'http://www.ghostchina.com',
urlToImage:'http://static.ghostchina.com/image/c/06/765c76cb1ca259dd8fe8002459bbc.jpg'
}]作为新闻[]；
const newservice=jasmine.createSpyObj（'newservice'，['getNews']）；
让url='api/新闻/标题？国家=美国，类别=商业'；
getNewsSpy=newservice.getNews.and.returnValue（of（testheadline））；
const routerSpy=jasmine.createSpyObj（'Router'，['navigate']）；
TestBed.configureTestingModule({
声明：[HomeComponent]，
供应商：[{
提供：新闻服务，
useValue:新闻服务
}, {
提供：路由器，
useValue:routerSpy
}]
});
fixture=TestBed.createComponent（HomeComponent）；
组件=fixture.componentInstance；
});
描述（“#oninit”，（）=>{
它（'应该返回预期的类别新闻（调用一次）'，（）=>{
让url='api/News/Category？country=us&Category=business'；
fixture.detectChanges（）；//onInit（）
expect（getnewspy.calls.any（））.toBe（false，'getNews尚未调用'；}）；}）；

因此您会收到错误

@Component({
    providers: [NewsService]
})

当我们使用

@component.providers

在组件级别提供服务时，它优先于任何全局提供程序，这使得提供程序的范围仅限于组件

因此，没有必要向测试模块提供存根服务（因为您有一个组件级服务）

您需要做的是向组件提供服务存根。为此，您可以使用

TestBed.overrideComponent

方法。使用该方法，我们可以覆盖组件的模板和提供程序

 const newsService = jasmine.createSpyObj('NewsService', ['getNews']);

 TestBed.configureTestingModule({
   declarations: [HomeComponent]
 });

 TestBed.overrideComponent(HomeComponent, {
   set: {
    providers: [
                {provide: NewsService,useValue: newsService}
    ]
  }
})

您可以在中阅读有关重写组件的提供程序的更多信息

 const newsService = jasmine.createSpyObj('NewsService', ['getNews']);

 TestBed.configureTestingModule({
   declarations: [HomeComponent]
 });

 TestBed.overrideComponent(HomeComponent, {
   set: {
    providers: [
                {provide: NewsService,useValue: newsService}
    ]
  }
})