Angular 需要使用karma jasmine解决组件的服务依赖性错误

我的目标是对NewServicesRequestsComponent进行单元测试，我能够解决其他依赖项，但仍然坚持使用名为GenericService的服务依赖项

我尝试通过在我的规范文件中将XHRbackend作为提供程序并使用Mockbackend来解决XHRbackend错误，一旦XHRbackend被解决，它就给出了“RequestOptions没有提供程序”错误，因此在搜索上述错误时，我发现Mockbackend已被弃用，并且@angular/http/testing也被弃用，即使坚持到底 我无法解决与泛型服务相关的问题。 我在下面给出了组件、规范和GenericService文件

NewServicesRequestComponent

 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { FormGroup, NgForm } from '@angular/forms';
 import { Component, OnInit, Input, Output, EventEmitter, ViewChild, Inject 
 } from '@angular/core';

 import * as $ from 'jquery';

 import { environment } from './../../../environments/environment';
 import { ModalComponent } from './../../shared/modal/modal.component';
 import { GenericService } from './../../core/services/generic.service';

 import { ServiceControllerService } from './../../service/api/service- 
 controller.service';
 import { ServiceType } from '../../service/types/service.type';
 import { NgDatepickerModule, DatepickerOptions } from 'ng2-datepicker';
 import { Territory } from '../../models/territory';
 import { GLOBALS, Global } from './../../core/globals/global';

 import { AddServicesComponent } from '../new-services-request/add- 
 services/add-services.component';
 import { ServiceRequestService } from './new-services- 
 request.component.service';
 import { NavbarService } from '../../core/services/navbar.service';
 import { HeaderbarService } from '../../core/services/headernav.service';
 import { Subject } from 'rxjs/Subject';
 import { WBSSearch } from '../../shared/integrations/wbs/wbsModel';
 import { LineOfService } from '../../models/line.of.service';
 import { BusinessUnit } from '../../models/business.unit';
 import { RequestPackage } from './request.package';
 import { ServiceRequestDataSharing } from '../service-request-data- 
 sharing';
 import { OrderByPipe } from './../../shared/shared-pipes/order-by.pipe';
 import { RestrictionFolderSearchModel } from 
 '../../restriction/restrictionFolderSearchModel';
 import { RibbonMessageComponent } from '../../shared/ribbon- 
 message/ribbon-message.component';
 import { RibbonMessageService } from '../../shared/ribbon-message/ribbon- 
 message.service';
 import { EngagementForecast } from './types/engagement-forecast.type';

 const loadingActions = {
 renderAssuranceFields: 'NEW-SERVICES-REQUEST-RENDER-ASSURANCE-FIELDS',
 getAllRestrictionConfigs: 'NEW-SERVICES-GET-ALL-RESTRICTION-CONFIGS',
 loadBusinessUnits: 'NEW-SERVICES-LOAD-BUSINESS-UNITS',
  fetchWBSfromIntegration: 'NEW-SERVICES-FETCH-WBS-FROM-INTEGRATION',
 checkEngagementDuplicacy: 'NEW-SERVICE-CHECK-ENGAGEMENT-DUPLICACY',
 saveDraftEngagement: 'NEW-SERVICE-SAVE-DRAFT-ENGAGEMENT',
 otherSaveDraftEngagement: 'NEW-SERVICE-OTHER-SAVE-DRAFT-ENGAGEMENT',
 updateExistingEngagement: 'NEW-SERVICE-UPDATE-EXISTING-ENGAGEMENT',
 deleteEngagement: 'NEW-SERVICE-DELETE-ENGAGEMENT',
 submitServiceEngagementPackage: 'NEW-SERVICE-SUBMIT-SERVICE-ENGAGEMENT- 
 PACKAGE',
 getUsersInEngDelRoles: 'NEW-SERVICE-GET-USERS-IN-ENG-DEL-ROLES'
 };

@Component({
selector: 'app-new-services-request',
templateUrl: './new-services-request.component.html',
styleUrls: ['./new-services-request.component.scss']
   })

   export class NewServicesRequestComponent implements OnInit {
  @ViewChild('servReqForm') servReqForm: NgForm;
  @ViewChild('actionModalCancel') actionModalCancel: ModalComponent;
  @ViewChild('cancelActionModal') cancelActionModal: ModalComponent;
  @ViewChild('actionModalClaim') actionModalClaim: ModalComponent;
  @ViewChild('editResourceGroup') editResourceGroup: ModalComponent;
  @ViewChild('wbsErrorMessageRibbon') wbsErrorMessageRibbon: 
  RibbonMessageComponent;
  @ViewChild('gemMSG') gemMSG: RibbonMessageComponent;
  territory: any;
  businessUnit: any;
    options: DatepickerOptions = {
  //  minDate: new Date(this.currentDate.setDate(this.currentDate.getDate() 
  - 
  1)),
  displayFormat: 'MM/DD/YYYY'
    };

  constructor(@Inject(GLOBALS) private g: Global, private gs: 
  GenericService,
  public nav: NavbarService, private orderByPipe: OrderByPipe,
  public header: HeaderbarService,
  private serviceConfigService: ServiceControllerService, private router: 
  Router,
  private ribbonMessageService: RibbonMessageService,
  private route: ActivatedRoute, private serviceControllerAPI: 
  ServiceControllerService,
  public dataService: ServiceRequestService,
  private servReqDataSharing: ServiceRequestDataSharing) {
  var datepickerPos = this.datepickerPos;

}

 handleWBSChange(val) {
console.log(val.BillPartnerName);
 }

 ngOnInit() {}
  //various http and normal methods of generic service file being used
  }

====================

一般服务

` 
   import { Injectable, Inject } from '@angular/core';
   import { Http, XHRBackend, ConnectionBackend, RequestOptions, Request, 
   RequestOptionsArgs, Response, Headers, ResponseContentType } from 
   '@angular/http';
   import 'rxjs/add/operator/map';
   import { Observable } from 'rxjs/Rx';
   import { Subject } from 'rxjs/Subject';
   import 'rxjs/add/operator/map';
   import 'rxjs/add/operator/catch';
   import 'rxjs/add/operator/do';
   import 'rxjs/add/operator/finally';
   import { environment } from './../../../environments/environment';
   import "rxjs/add/operator/toPromise";
   import "rxjs/add/operator/switchMap";
   import 'rxjs/add/observable/throw';
   import { ToastsManager,Toast } from 'ng2-toastr';
   import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from 
   '@angular/common/http';
   import { IdamAuthenticationService } from '@pa-util/angular2-idam';
   import { v4 as uuid } from 'uuid';
   import { CookieService } from 'ngx-cookie-service';
   import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
   import { catchError, retry } from 'rxjs/operators';
   import { Router } from '@angular/router'
   import { GLOBALS, Global } from '../globals/global';
   import { EngagementSharedDataForForecast } from 
   '../../forecast/forecast.type';
    import {RibbonMessageService} from '../../shared/ribbon-message/ribbon- 
   message.service';

   export interface IRequestOptions {
     headers?: HttpHeaders;
     observe?: 'body';
     params?: HttpParams;
     reportProgress?: boolean;
     responseType?: 'json';
     withCredentials?: boolean;
     body?: any;
    }
   export class iDamRequestOptions implements IRequestOptions { }
    @Injectable()

     export class GenericService {
      //various get,post,put,delete and other methods being used by 
      NewServicesRequestComponent
   }

NewServicesRequest.component.spec.ts

 `

  import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { NewServicesRequestComponent } from './new-services- 
  request.component';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { WbsComponent } from 
   './../../shared/integrations/wbs/wbs.component';
  import { MaxCharCheckPipe } from './../../shared/shared-pipes/maxchar- 
  validator.pipe';
  import { NgDatepickerModule } from 'ng2-datepicker';
  import { HandleTeamMemberComponent } from './../../shared/handle-team- 
  member/handle-team-member.component';
  import { ModalComponent } from './../../shared/modal/modal.component';
  import { DynamicFormAddServiceComponent } from './../../shared/dynamic- 
  form-add-service/dynamic-form-add-service.component';
  import {OrderByPipe} from './../../shared/shared-pipes/order-by.pipe';
  import { MandatoryCheckPipe } from './../../shared/mandatory-check.pipe';
  import { StringToBoolPipe } from './../../pipes/string-to-boolean.pipe';
  import { PeoplePickerComponent } from 
  './../../shared/integrations/people-picker/people-picker.component';
  import { PopoverModule } from 'ng2-popover';
  import { NoWhitespaceDirective } from './../../shared/whitespace- 
  validator/whitespace.directive';
  import {NG_VALIDATORS } from '@angular/forms';
  import { GLOBALS, Global } from './../../core/globals/global';
  import { GenericService } from './../../core/services/generic.service';
   import { HttpClientModule } from '@angular/common/http';
  import { HttpClientTestingModule,HttpTestingController } from 
  '@angular/common/http/testing';
  //import { XHRBackend } from '@angular/http';
  //import { MockBackend, MockConnection } from '@angular/http/testing';


   const GLOBALS1 = [{provide:GLOBALS}]
   fdescribe("new service request form",() =>{

   let component: NewServicesRequestComponent;
   let fixture: ComponentFixture<NewServicesRequestComponent>;

    beforeEach(async() => {
    TestBed.configureTestingModule({
     declarations : 
      [NewServicesRequestComponent,WbsComponent,MaxCharCheckPipe,
       HandleTeamMemberComponent,ModalComponent,
       DynamicFormAddServiceComponent,OrderByPipe,StringToBoolPipe,
       PeoplePickerComponent,MandatoryCheckPipe,NoWhitespaceDirective],
       imports:[FormsModule,ReactiveFormsModule,NgDatepickerModule,
       PopoverModule, HttpClientTestingModule],
       providers: [{ provide: NG_VALIDATORS, useExisting: 
       NoWhitespaceDirective, multi: true },GLOBALS1,GenericService]
     }).compileComponents();

  });

    beforeEach(() => { 
    fixture = TestBed.createComponent(NewServicesRequestComponent);
    component = fixture.debugElement.componentInstance;
    fixture.detectChanges();
    })

   it("is new service request form compoenent defined",() =>{

   expect(component).toBeTruthy();
  });

  });

`
从“@angular/core/testing”导入{async，ComponentFixture，TestBed}；
从“./新服务”导入{NewServicesRequestComponent}
请求.组成部分'；
从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
从导入{WbsComponent}
“../../../shared/integrations/wbs/wbs.component”；
从“./../../shared/shared pipes/maxchar-
验证器.管道'；
从“ng2日期选择器”导入{NgDatepickerModule}；
从“./../../shared/handle团队导入{HandleTeamMemberComponent}
成员/处理团队成员。组件'；
从'./../../shared/modal/modal.component'导入{ModalComponent}；
从“./../../shared/dynamic”导入{DynamicFormadServiceComponent}
表单添加服务/动态表单添加服务.component'；
从“/../../shared/shared pipes/order by.pipe”导入{OrderByPipe}；
从“/../../shared/mandatorycheck.pipe”导入{MandatoryCheckPipe}；
将{StringToBoolPipe}从“./../../pipes/string导入boolean.pipe”；
从导入{PeoplePickerComponent}
“../../../shared/integrations/people picker/people picker.component”；
从“ng2 popover”导入{PopoverModule}；
从“./../../shared/whitespace”导入{NoWhitespaceDirective}
验证器/空白。指令'；
从'@angular/forms'导入{NG_VALIDATORS}；
从“/../../core/GLOBALS/Global”导入{GLOBALS，Global}；
从“/../core/services/generic.service”导入{GenericService}；
从'@angular/common/http'导入{HttpClientModule}；
从导入{HttpClientTestingModule，HttpTestingController}
“@angular/common/http/testing”；
//从'@angular/http'导入{XHRBackend}；
//从'@angular/http/testing'导入{MockBackend，MockConnection}；
常量GLOBALS1=[{provide:GLOBALS}]
fdescribe（“新服务请求表”，（）=>{
let组件：NewServicesRequestComponent；
let夹具：组件夹具；
beforeach（异步（）=>{
TestBed.configureTestingModule({
声明：
[NewServicesRequestComponent、WBSCOComponent、MaxCharCheckPipe、，
HandleteMemberComponent、ModalComponent、，
动态格式服务组件、OrderByPipe、StringToToolPipe、，
PeoplePickerComponent、MandatoryCheckPipe、NoWhitespaceDirective]，
导入：[FormsModule、ReactiveFormsModule、NgDatepickerModule、，
PopoverModule，HttpClientTestingModule]，
提供程序：[{提供：NG_验证程序，使用现有的：
NoWhitespaceDirective，multi:true}，GLOBALS1，GenericService]
}).compileComponents（）；
});
在每个（（）=>{
fixture=TestBed.createComponent（NewServicesRequestComponent）；
组件=fixture.debugElement.componentInstance；
fixture.detectChanges（）；
})
它（“定义了新的服务请求表单组件”，（）=>{
expect（component.toBeTruthy（）；
});
});

我得到的实际结果 错误：RequestOptions没有提供程序 错误：没有XHRBackend的提供程序

预期：

---

至少应该对组件进行单元测试

试图为这个问题找到一个解决方案是相当困难的！我消除了文件级和测试床中的大部分无关导入，试图关注您所说的问题：

我能够解决其他依赖项，但仍然坚持使用名为GenericService的服务依赖项

` 
   import { Injectable, Inject } from '@angular/core';
   import { Http, XHRBackend, ConnectionBackend, RequestOptions, Request, 
   RequestOptionsArgs, Response, Headers, ResponseContentType } from 
   '@angular/http';
   import 'rxjs/add/operator/map';
   import { Observable } from 'rxjs/Rx';
   import { Subject } from 'rxjs/Subject';
   import 'rxjs/add/operator/map';
   import 'rxjs/add/operator/catch';
   import 'rxjs/add/operator/do';
   import 'rxjs/add/operator/finally';
   import { environment } from './../../../environments/environment';
   import "rxjs/add/operator/toPromise";
   import "rxjs/add/operator/switchMap";
   import 'rxjs/add/observable/throw';
   import { ToastsManager,Toast } from 'ng2-toastr';
   import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from 
   '@angular/common/http';
   import { IdamAuthenticationService } from '@pa-util/angular2-idam';
   import { v4 as uuid } from 'uuid';
   import { CookieService } from 'ngx-cookie-service';
   import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
   import { catchError, retry } from 'rxjs/operators';
   import { Router } from '@angular/router'
   import { GLOBALS, Global } from '../globals/global';
   import { EngagementSharedDataForForecast } from 
   '../../forecast/forecast.type';
    import {RibbonMessageService} from '../../shared/ribbon-message/ribbon- 
   message.service';

   export interface IRequestOptions {
     headers?: HttpHeaders;
     observe?: 'body';
     params?: HttpParams;
     reportProgress?: boolean;
     responseType?: 'json';
     withCredentials?: boolean;
     body?: any;
    }
   export class iDamRequestOptions implements IRequestOptions { }
    @Injectable()

     export class GenericService {
      //various get,post,put,delete and other methods being used by 
      NewServicesRequestComponent
   }

因此，我将重点放在GenericService上，我把它放在一起，它仍然拥有您在

新服务请求组件中提供的所有提供者。如果您也提供了html模板，我也可以加载一些导入，并查看它的呈现方式，但是，我再次尝试关注
GenericService
：）

正如你所看到的，我用间谍对象模拟了所有的服务调用。特别注意：

const genericSpy = jasmine.createSpyObj('GenericService', ['getTerritory', 'post', 'put']);

然后在试验台上，我提供了以下内容：

{ provide: GenericService, useValue: genericSpy },

所有这些都是为了现在可以模拟服务，并返回测试值来测试
NewServicesRequestComponent
中的方法。例如，我在StackBlitz组件中创建了一个名为
fetchData（）
的方法，该方法使用GenericService从后端获取一个
区域
，并对其进行了测试。为了测试这一点，我首先设置了一个mock，返回我希望从服务返回的值，然后测试组件是否将该值保存到class属性中，作为
fetchData（）
应该保存的值

我希望这能给你一个好的开始，让你模仿你的
NewServicesRequestComponent
Hi@dmcgrandle，很抱歉没有机会应用这个，我一定会检查并接受答案，你能帮我做这个吗？别忘了接受下面的答案，Enhu，如果它对你有帮助的话。虽然这不是强制性的，但鼓励这样做。