angular - 如果组件调用 Http Service 方法,则进行 Angular 单元测试:错误:: 找不到要监视的对象
问题描述
我的目的是测试组件方法是否调用服务方法。服务方法实现是一个 Post,但是我对 post 机制不感兴趣,因为我计划在服务中测试它,而我只想知道是否调用了正确的服务方法。
我是单元测试的新手,但是错误表明 spyon 的用法如下用法 spyOn('object, methodName'),表明我没有正确创建要测试的服务对象的实例,但是为了创建服务对象它需要构造函数中的 HttpClient,我已经尝试了很多解决方案,并且我已经阅读了几个小时,非常感谢帮助。
最好的,SC
单元测试
describe('SchedulerComponent', () => {
let component : SchedulerComponent;
let fixture : ComponentFixture<SchedulerComponent>;
let schedulerReportService : SchedulerReportService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SchedulerComponent ],
imports: [BrowserAnimationsModule,
MatSlideToggleModule,
MatRadioModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatNativeDateModule,
MatDatepickerModule,
NativeDateModule,
NgxMaterialTimepickerModule,
ReactiveFormsModule,
FormsModule,
HttpClientTestingModule],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [{provide : SchedulerReportService}]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SchedulerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
fit('onSubmit should call scheduleReportService',inject([SchedulerReportService], (service: SchedulerReportService) => {
let scheduleServiceSpy = spyOn(schedulerReportService, 'submitScheduledReport') ;
let submitReportSpy = spyOn(component, 'onSubmit');
submitReportSpy.and.callThrough();
expect(scheduleServiceSpy).toHaveBeenCalled();
}))
对应的服务代码如下
@Injectable({
providedIn: 'root'
})
export class SchedulerReportService {
constructor(private http: HttpClient) { }
submitScheduledReport(servicerequest: ScheduleService) {
console.log(servicerequest)
// const headers = new HttpHeaders({'key':'value'});
// return this.http.post<ScheduleService>(localUrl, servicerequest, {headers : headers} ).pipe(
// retry(1), catchError(this.handleError<ScheduleService>('scheduled report post error')));
}
该组件包含一个触发服务的方法
export class SchedulerComponent implements OnInit {
constructor(private fb: FormBuilder,
private schedulerReportService: SchedulerReportService) {
onSubmit(){
let report = this.schedulerForm.value;
let scheduleServiceModel = new ScheduleService(report)
this.schedulerReportService.submitScheduledReport(scheduleServiceModel);
}
}
解决方案
要专门解决上面代码中的问题,您需要在调用之前设置服务实例spyOn
。像这样的东西:
schedulerReportService = fixture.debugElement.injector.get(SchedulerReportService);
...
let scheduleServiceSpy = spyOn(schedulerReportService, submitScheduledReport');
但是,我推荐另一种方法,即使用服务间谍存根。由于您不需要测试您的服务,只需调用一个服务方法,您就不需要注入原始方法,SchedulerReportService
而是可以像这样向 Angular 提供服务对象间谍:
describe('SchedulerComponent', () => {
let component : SchedulerComponent;
let fixture : ComponentFixture<SchedulerComponent>;
let schedulerReportService = jasmine.createSpyObj('SchedulerReportService', ['submitScheduledReport']);
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SchedulerComponent ],
imports: [BrowserAnimationsModule,
MatSlideToggleModule,
MatRadioModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatNativeDateModule,
MatDatepickerModule,
NativeDateModule,
NgxMaterialTimepickerModule,
ReactiveFormsModule,
FormsModule,
HttpClientTestingModule],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
providers: [{provide : SchedulerReportService, useValue: schedulerReportService}]
})
.compileComponents();
fixture = TestBed.createComponent(SchedulerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('onSubmit should call scheduleReportService', () => {
component.onSubmit();
expect(schedulerReportService.submitScheduledReport).toHaveBeenCalled();
}));
通过这种方式,您可以schedulerReportService.submitScheduledReport
在没有原始服务 http 调用开销的情况下进行测试。
推荐阅读
- python - 两个列表的乘积,仅在一个列表上轮换
- java - Java将链表与另一个文件进行比较并删除重复条目
- python - 如何将包含浮点数组的熊猫列转换为整数数组
- cplex - 如何获得docplex中的总剪切数?
- class - 如何创建影响python类中其他实例的方法?
- android - 在 android studio 中将所有文本视图翻译成其他语言
- python - Bs4错误可能来自错误的pip安装位置,我解决了但不是以pythonic方式
- php - Laravel 将聚合与另一个表中的值进行比较
- php - 服务器损坏文档上的 PHPWord 缺少提及某些部分
- javascript - 使用函数设置对象的值