Javascript 带karma的Angular 8测试组件失败
我正在尝试开始测试我的组件。我想测试的第一件事是Javascript 带karma的Angular 8测试组件失败,javascript,angular,typescript,unit-testing,karma-jasmine,Javascript,Angular,Typescript,Unit Testing,Karma Jasmine,我正在尝试开始测试我的组件。我想测试的第一件事是ngOnInit是否调用了正确的服务 协议.组件.ts: constructor(private agreementService: AgreementService, private operatorService: OperatorService, private accountService: AccountService, private route:
ngOnInit
是否调用了正确的服务
协议.组件.ts:
constructor(private agreementService: AgreementService,
private operatorService: OperatorService,
private accountService: AccountService,
private route: ActivatedRoute,
private router: Router,
private sessionService: SessionService,
private settingsService: SettingsService) {
this.agreementId = Number(this.route.snapshot.paramMap.get('agreementId'));
}
async ngOnInit() {
this.session = await this.sessionService.getSession();
this.settings = await this.settingsService.getSettings();
this.operatorService.getOperators(this.session.bic).subscribe(data => {
this.operators = data;
});
...
}
协议组件规范ts
import {AgreementComponent} from './agreement.component';
import {async, TestBed} from '@angular/core/testing';
import {ActivatedRoute, convertToParamMap, Router} from '@angular/router';
import {RouterTestingModule} from '@angular/router/testing';
import {AgreementService} from '../../../services/agreement.service';
import {AccountService} from '../../../services/account.service';
import {SessionService} from '../../../services/session.service';
import {SettingsService} from '../../../services/settings.service';
describe('agreementComponent', () => {
let mockAgreementService: AgreementService;
let mockOperatorService;
let mockAccountService: AccountService;
let mockRoute: ActivatedRoute;
let mockRouter: Router;
let mockSessionService: SessionService;
let mockSettingsService: SettingsService;
let component: AgreementComponent;
beforeEach(async(() => {
mockAgreementService = jasmine.createSpyObj(['getAgreement']);
mockOperatorService = jasmine.createSpyObj(['getOperators']);
mockAccountService = jasmine.createSpyObj(['getFeeAccounts']);
mockRoute = jasmine.createSpyObj(['route']);
mockRouter = jasmine.createSpyObj(['router']);
mockSessionService = jasmine.createSpyObj(['getSession']);
mockSettingsService = jasmine.createSpyObj(['getSettings']);
TestBed.configureTestingModule({
declarations: [AgreementComponent],
imports: [
RouterTestingModule
],
providers: [
{
provide: ActivatedRoute, useValue:
{
snapshot: {
paramMap: convertToParamMap({agreementId: '0'})
}
}
},
]
});
component = new AgreementComponent(mockAgreementService, mockOperatorService, mockAccountService,
mockRoute, mockRouter, mockSessionService, mockSettingsService);
}));
it('should call operators service', () => {
component.ngOnInit();
expect(mockOperatorService).toHaveBeenCalled();
});
});
目前我得到:
失败:无法读取未定义的属性“paramMap”
TypeError:无法读取未定义的属性“ngOnInit”
我确信这段代码缺少很多东西才能正常工作,我就是不知道到底缺少了什么以及应该做些什么,因为谷歌搜索我的错误让我对大量不同的解决方案感到困惑。我对角度测试非常陌生,因此我想就如何以正确的方式编写测试提出一些建议。采用不同的方法,创建存根,如中所述
ActivatedRoute
和中的其他服务,如下所示:
it('should call getOperators service in ngOnInit', () => {
spyOn(component.operatorService,"getOperators").and.callThrough();
component.ngOnInit();
expect(component.operatorService.getOperators).toHaveBeenCalled();
// you can also be more specific by using ".toHaveBeenCalledWith()"
});
很好,谢谢,先生,真的很有帮助。我相信beforeach设置现在工作正常,现在我想测试
getOperators
fromoperatorservice
是否正在ngonit
上调用。我在想我该怎么做间谍。它应该在组件上还是在服务上?我尝试过这样创建:spyOn(MockOperatorService.prototype,'getOperators')。和.callThrough()代码>component.ngOnInit()代码>expect(MockOperatorService.prototype.getOperators).toHaveBeenCalled()代码>但我得到了一个错误:预期spy getOperators会被调用。
@developer1:m很高兴它有所帮助。我已经更新了答案。本文还介绍了如何使用spy
。看看那些文章。也请将此标记为帮助其他人寻找类似问题的答案:)好的,谢谢!但它仍然没有像预期的那样工作。但是你确定我应该监视组件.操作器服务吗?我不应该监视我的模拟服务,然后期望调用模拟服务方法吗?嗯,这很奇怪。因为当我测试是否调用了sessionService.getSession()
时,我的测试通过了。但是如果我尝试测试是否调用了settingsService.getSettings()
,这就像在ngOnInit
中调用相同一样,它会失败。有什么区别或问题吗?如果我正在测试是否调用了异步方法,我的it
函数调用是否也应该是异步的?
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AgreementComponent],
imports: [
RouterTestingModule
],
providers: [
{
provide: ActivatedRoute, useValue:
{
snapshot: {
paramMap: convertToParamMap({agreementId: '0'})
}
}
},
{provide: OperatorService , useClass: MockOperatorService},
{....similarly for AgreementService etc etc}
]
});
}));
beforeEach(() => {
fixture = TestBed.createComponent(AgreementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should call getOperators service in ngOnInit', () => {
spyOn(component.operatorService,"getOperators").and.callThrough();
component.ngOnInit();
expect(component.operatorService.getOperators).toHaveBeenCalled();
// you can also be more specific by using ".toHaveBeenCalledWith()"
});