英文:
Angular - Test service subscribe on submit
问题
我如何测试提交操作的订阅事件覆盖率？我有以下代码：
onSubmit() {
this.myService.myMethod(value)
.subscribe((result: any) => {
console.log(result);
},
error => {
console.log(error);
},
() => {
console.log('completed');
}
);
}
测试
it('应该测试提交',
inject([myService, XHRBackend], (myService: any, mockBackend: any) => {
const mockResponse = {
error: false,
msg: `Completed`
};
mockBackend.connections.subscribe((connection: any) => {
connection.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(mockResponse)
})));
});
myService.myMethod().subscribe(() => { });
}));
我的测试覆盖率显示我没有测试订阅部分。
英文:
How can i coverage test of submit action with subscribe event? i have this:
onSubmit() {
this.myService.myMethod(value)
.subscribe((result: any) => {
console.log(result);
},
error => {
console.log(error);
},
() => {
console.log('completed);
}
);
}
test
it('should test submit',
inject([myService, XHRBackend], (myService: any, mockBackend: any) => {
const mockResponse = {
error: false,
msg: `Completed`
};
mockBackend.connections.subscribe((connection: any) => {
connection.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(mockResponse)
})));
});
myService.myMethod().subscribe(() => { });
}));
My test coverage show that i haven't tested the subscribe lines.
答案1
得分: 1
在onSubmit组件代码中存在一些缺陷。当你只是使用console.log等方式时，你如何测试结果呢？你需要处理某种标志并显示/隐藏旋转图标或提供一些错误/成功消息。然后你可以使用error和success来测试该函数。例如：
onSubmit() {
this.showSpinner = true;
this.myService.myMethod(value)
.subscribe((result: any) => {
this.msg = 'success';
},
error => {
this.msg = 'error';
},
() => {
this.showSpinner = false;
}
);
}
在测试文件中：
class MySvcMock{
myMethod() { return of('someVal')}
}
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [{provide: MyService, useClass: MySvcMock}]
}).compileComponents();
...
...
it('should set success msg on submit',() => {
component.msg = '';
component.onSubmit();
expect(component.msg).toBe('success');
expect(component.showSpinner).toBeFalsy();
})
it('should set error msg on submit error',() => {
component.msg = '';
spyOn(component.myService,'myMethod').and.returnValue(throwError('some error msg'));
component.onSubmit();
expect(component.msg).toBe('error');
expect(component.showSpinner).toBeFalsy();
})
你可以参考我的一系列文章，这些文章可以帮助你更熟悉Karma。
英文:
There are few flaws in the component code of onSubmit. How can you test the outcome when you are just doing console.log etc. You need to handle some kind of flag and show/hide spinner or provide some error/success message. Then you can test the function with error and success. For example:
onSubmit() {
this.showSpinner = true;
this.myService.myMethod(value)
.subscribe((result: any) => {
this.msg = 'success';
},
error => {
this.msg = 'error';
},
() => {
this.showSpinner = false;
}
);
}
in test file:
class MySvcMock{
myMethod() { return of('someVal')}
}
beforeEach(async(() => {
TestBed.configureTestingModule({
provider: [{provide: MyService, useClass: MySvcMock}]
}).compileComponents();
...
...
it('should set success msg on submit',()=>{
component.msg = '';
component.onSubmit();
expect(component.msg).toBe('success');
expect(component.showSpinner).toBeFalsy();
})
it('should set error msg on submit error',()=>{
component.msg = '';
spyOn(component.myService,'myMethod').and.returnValue(throwError('some error msg'));
component.onSubmit();
expect(component.msg).toBe('error');
expect(component.showSpinner).toBeFalsy();
})
You can refer to my series of article which can help you get more familiar with Karma.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论