- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我的目标是对 NewServicesRequestsComponent 进行单元测试,我能够解决其他依赖项但坚持使用名为 GenericService 的服务依赖项
我尝试通过在我的规范文件中将其作为提供者提供并使用 Mockbackend 来解决 XHRbackend 错误,一旦 XHRbackend 得到解决,它就会给出“No provider for RequestOptions”错误,因此在搜索上述错误时我遇到了MockBackend 已被弃用,并且 @angular/http/testing 也被弃用,即使在完成之后 https://angular.io/guide/testing#component-with-a-dependency我无法解决与 GenericServices 有关的问题。我在下面给出了 component 、 spec 和 GenericService 文件
新服务请求组件
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();
});
});
我得到的实际结果错误:没有 RequestOptions 的提供者错误:没有 XHRBackend 的提供者
预期:至少应该对组件进行单元测试
最佳答案
很难想出一个 MCVE对于这个问题!我在文件级别和您的 TestBed 中消除了大部分无关的导入,试图专注于您所说的问题:
I was able to resolve other dependencies but stuck with the service dependency named GenericService
然后专注于 GenericService,我把这个 StackBlitz 放在一起,其中仍然包含您在 new-services-request-component
中提供的所有提供程序。如果您也提供了 html 模板,我也可以加载一些导入并查看它是如何呈现的,但同样 - 我试图专注于 GenericService
的问题。 :)
如您所见,我使用 spyObjects 模拟了所有服务调用。特别注意:
const genericSpy = jasmine.createSpyObj('GenericService', ['getTerritory', 'post', 'put']);
然后在 TestBed 中我提供了以下内容:
{ provide: GenericService, useValue: genericSpy },
所有这些都是为了现在可以模拟服务,并返回测试值以测试 NewServicesRequestComponent
中的方法。例如,我在 StackBlitz 的组件中编写了一个名为 fetchData()
的方法,该方法使用 GenericService 从后端获取一个 territory
,并对其进行了测试。为了对此进行测试,我首先设置了一个模拟,返回我想要从服务中获取的值,然后进行测试以查看组件是否将该值保存到类属性中,正如 fetchData()
应该做的那样。
我希望这会给您一个良好的开端,让您开始模拟 NewServicesRequestComponent
的真实方法。
关于angular - 需要使用 karma jasmine 解决组件的服务依赖错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54126890/
我使用 File > Settings > JavaScript > Libraries 在 Webstorm 8.0.4 中设置 Jasmine 集成。我添加了 karma-jasmine带有我的
假设我有 spyOn($cookieStore,'get').and.returnValue('abc'); 对于我的用例来说,这太笼统了。任何时候我们打电话 $cookieStore.get('so
我正在阅读有关 Jasmine 测试的教程,它建议您应该使用标准 Jasmine 目录树结构(这似乎与 RSpec 目录树结构有关)。我用谷歌搜索了一个小时,找不到任何有关此标准目录树的信息。 考虑到
问题 如何使用Jasmine插件通过Jasmine运行Karma时更新所使用的karma-jasmine的版本? 仅当Jasmine插件集成了较新版本的karma-jasmine时,才会更新Jasmi
我想在每个规范执行后获得测试的通过或失败状态: var passed = jasmine.getEnv().currentSpec.results().passed(); if (!pas
我有一个与 Karma 一起运行的 Jasmine 测试: describe('When a logged in user chooses Rent and Payment PIN is enable
在我的新手理解中,Jasmine 提供了以下语法: describe('FooBar', function(){ it('should blah-blah', function(){ ex
我认为我通过编写这样的 Jasmine 模拟取得了很好的进展。但我无法修复这个错误。 spyOn 方法实际上是如何工作的?事实上这种方法似乎被广泛使用。 2.0 有什么变化 describe('Tes
有大量文档展示了如何将匹配器添加到 Jasmine 规范(例如 here )。 有人找到了向整个环境添加匹配器的方法吗?我想创建一组有用的匹配器,供任何和所有测试调用,而无需在我的规范中复制粘贴。 目
我正在尝试查找所有现有 Jasmine 期望匹配器(例如“toContain”等)的列表... 哪里可以找到这个?我搜索了一段时间,但找不到像 api 这样的东西。 Jasmine 网站也没有任何类型
我熟悉 python 单元测试测试,如果断言失败,该测试将被标记为“失败”,并继续进行其他测试。另一方面,即使其中一个失败, Jasmine 也会继续完成所有期望。如何让 Jasmine 在第一个期望
工具:Protractor 3.3.0、Jasmine 2.4.1、Selenium Standalone Server。 我有一个测试套件,里面有大量的 spec.js 文件,每个文件都包含我的应用
Jasmine 中是否有与 console.log 类似的方法?如果我想注销我 mock 的 $controller 或服务的值,有没有办法做到这一点? 最佳答案 您应该只使用 console.log
我已经通过运行 npm install jasmine -g 全局安装了 jasmine。 运行 jasmine -v 给我 jasmine v2.5.0 jasmine-core v2.5.0 然后
我有gulp-jasmine-phantom正在运行,但我得到 ReferenceError: Tictactoe is not defined 。我感觉我犯了一些根本性的错误。 我的文件结构: gu
我已经创建了一个 JavaScript 项目,需要使用 Jasmine 进行单元测试。我遵循了以下步骤: 1. npm install jasmine --save-dev - 从项目根目录 2.现在
我正在为我的应用程序使用 Yeoman+Angular Generator,我一直在努力与 Jasmine 相处!这就是我卡住的地方。我希望能够在 Jasmine 测试中使用 jQuery 选择器。我
it('should for something', function check(done) { browser.sleep(2000); $('.csTx').isPresent().th
Javascript 编码有点新,所以请耐心等待。 我阅读了以下链接 jasmine with jscoverage automated testing 但是,由于我没有 Ruby 项目,因此它似乎不
在Jasmine headless (headless)Webkit中运行测试时,我遇到了一个简单的TypeError: 'undefined' is not an object失败。但是没有提示在哪
我是一名优秀的程序员,十分优秀!