预期间谍 "service method" 已被调用。 - Angular 10
Expected spy "service method" to have been called. - Angular 10
我正在 Angular 中编写组件单元测试用例,但我不确定我哪里做错了。之前,我也写过类似的测试用例,但是这个让我头疼。
请检查这里的代码:
组件代码:
ngOnInit(): void {
this.callFavoriteProjects();
}
/**
* @description To fetch all the favorites projects
*/
public callFavoriteProjects() {
this.loadingService.show('loading-favorites');
this.subscriptions[this.subscriptions.length] = this.projectsFavoriteService.getAllUserFavoriteProjects()
.subscribe((data) => {
this.favoriteProjectsList = data;
this.filteredProjectList = data;
this.loadingService.hide('loading-favorites');
},
(error) => {
this.toastrService.error('', 'There is an error while processing the favorite projects!', {
timeOut: 3000,
progressBar: true,
progressAnimation: 'increasing',
});
this.loadingService.hide('loading-favorites');
}
);
}
Jasmine 测试用例代码:
describe('FavoriteProjectsComponent', () => {
let component: FavoriteProjectsComponent;
let fixture: ComponentFixture<FavoriteProjectsComponent>;
let projectsFavoriteService: ProjectsFavoriteService;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
RouterTestingModule,
MaterialModule,
ToastrModule.forRoot()
],
declarations: [ FavoriteProjectsComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: NgxSpinnerService, useClass: NgxSpinnerServiceStub },
{ provide: ToastrService, useClass: ToastrServiceStub },
{ provide: ProjectsHelperService, useClass: ProjectsHelperServiceStub },
{ provide: ProjectsFavoriteService, useClass: ProjectsFavoriteServiceStub }
]
})
.compileComponents();
}));
beforeEach(() => {
projectsFavoriteService = TestBed.inject(ProjectsFavoriteService);
});
beforeEach(() => {
fixture = TestBed.createComponent(FavoriteProjectsComponent);
component = fixture.componentInstance;
// fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('method: ngOnInit should ', () => {
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() and return an Observable<any>', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(observableOf([]));
spyOn(component, 'callFavoriteProjects');
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() but throw Observable error', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(throwError({ message: 'Error Message' }));
spyOn(component, 'callFavoriteProjects');
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
});
});
项目收藏存根文件
import { of as observableOf } from 'rxjs';
export class ProjectsFavoriteServiceStub {
getAllUserFavoriteProjects() {
return observableOf([]);
}
}
因此,如果 ngOnInit 失败,则两个测试用例。我也尝试过 fixture.detectChanges() ,方法是在调用 ngOnInit() 之后将它放在 beforeEach plus 中的每个测试用例中。
我没有弄错方向。请帮忙。提前致谢。
问题是spyOn(component, 'callFavoriteProjects')
。当你这样做时,我们会丢失关于 callFavoriteProjects
的实现细节,其中这个 method/function 将 return 未定义,我们只知道它是否被调用。我们必须编写 .and.callTrough
来实际调用此函数,而不仅仅是监视它是否被调用。
我已经评论了需要更改的行。
describe('method: ngOnInit should ', () => {
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() and return an Observable<any>', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(observableOf([]));
spyOn(component, 'callFavoriteProjects').and.callThrough(); // change this line
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() but throw Observable error', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(throwError({ message: 'Error Message' }));
spyOn(component, 'callFavoriteProjects').and.callThrough(); // change this line
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
});
我正在 Angular 中编写组件单元测试用例,但我不确定我哪里做错了。之前,我也写过类似的测试用例,但是这个让我头疼。
请检查这里的代码:
组件代码:
ngOnInit(): void {
this.callFavoriteProjects();
}
/**
* @description To fetch all the favorites projects
*/
public callFavoriteProjects() {
this.loadingService.show('loading-favorites');
this.subscriptions[this.subscriptions.length] = this.projectsFavoriteService.getAllUserFavoriteProjects()
.subscribe((data) => {
this.favoriteProjectsList = data;
this.filteredProjectList = data;
this.loadingService.hide('loading-favorites');
},
(error) => {
this.toastrService.error('', 'There is an error while processing the favorite projects!', {
timeOut: 3000,
progressBar: true,
progressAnimation: 'increasing',
});
this.loadingService.hide('loading-favorites');
}
);
}
Jasmine 测试用例代码:
describe('FavoriteProjectsComponent', () => {
let component: FavoriteProjectsComponent;
let fixture: ComponentFixture<FavoriteProjectsComponent>;
let projectsFavoriteService: ProjectsFavoriteService;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
RouterTestingModule,
MaterialModule,
ToastrModule.forRoot()
],
declarations: [ FavoriteProjectsComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: NgxSpinnerService, useClass: NgxSpinnerServiceStub },
{ provide: ToastrService, useClass: ToastrServiceStub },
{ provide: ProjectsHelperService, useClass: ProjectsHelperServiceStub },
{ provide: ProjectsFavoriteService, useClass: ProjectsFavoriteServiceStub }
]
})
.compileComponents();
}));
beforeEach(() => {
projectsFavoriteService = TestBed.inject(ProjectsFavoriteService);
});
beforeEach(() => {
fixture = TestBed.createComponent(FavoriteProjectsComponent);
component = fixture.componentInstance;
// fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('method: ngOnInit should ', () => {
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() and return an Observable<any>', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(observableOf([]));
spyOn(component, 'callFavoriteProjects');
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() but throw Observable error', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(throwError({ message: 'Error Message' }));
spyOn(component, 'callFavoriteProjects');
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
});
});
项目收藏存根文件
import { of as observableOf } from 'rxjs';
export class ProjectsFavoriteServiceStub {
getAllUserFavoriteProjects() {
return observableOf([]);
}
}
因此,如果 ngOnInit 失败,则两个测试用例。我也尝试过 fixture.detectChanges() ,方法是在调用 ngOnInit() 之后将它放在 beforeEach plus 中的每个测试用例中。
我没有弄错方向。请帮忙。提前致谢。
问题是spyOn(component, 'callFavoriteProjects')
。当你这样做时,我们会丢失关于 callFavoriteProjects
的实现细节,其中这个 method/function 将 return 未定义,我们只知道它是否被调用。我们必须编写 .and.callTrough
来实际调用此函数,而不仅仅是监视它是否被调用。
我已经评论了需要更改的行。
describe('method: ngOnInit should ', () => {
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() and return an Observable<any>', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(observableOf([]));
spyOn(component, 'callFavoriteProjects').and.callThrough(); // change this line
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() but throw Observable error', () => {
spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(throwError({ message: 'Error Message' }));
spyOn(component, 'callFavoriteProjects').and.callThrough(); // change this line
component.ngOnInit();
expect(component.callFavoriteProjects).toHaveBeenCalled();
expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
});
});