模拟服务时Angular2测试失败 [英] Angular2 test fail when mocking a service
问题描述
尝试测试具有服务依赖关系的组件,该组件调用rest API,并使用扩展真实服务的类制作了该服务的模拟版本.
Trying to test a component with a service dependency that call rest API, made a mocked version of the service, with a class that extends the real service.
现在,如果我用模拟的提供程序覆盖提供程序,则因果报应程序会出现奇怪的错误,首先是2个不存在的文件(实际上不应该存在)的404,然后是"{originalErr:{}}".我的意思是至少告诉我我做错了什么:)
Now if I override the provider with the mocked one, weird error comes out of karma reporter, first 404 for 2 not existing files (that really should not exist) and then "{originalErr: {}}". I mean at least tell me what I've done wrong :)
describe('App: HeaderComponent', () => {
it('should get categories on initialization',
async(
inject([TestComponentBuilder], (builder: TestComponentBuilder) => {
let fixture: ComponentFixture<HeaderComponent>;
expect(builder).toBeDefined();
return builder
.overrideProviders(HeaderComponent, [{provide: CategoryService, useClass: MockCategoryService}])
.createAsync(HeaderComponent).then((_fixture) => {
fixture = _fixture;
let $el = fixture.debugElement;
let el = $el.nativeElement;
let component = $el.componentInstance;
component.ngOnInit();
fixture.detectChanges();
expect(el.querySelector('a')).toHaveText('Electric');
});
})
)
);
});
输出:
01 08 2016 11:58:29.684:WARN [karma]: No captured browser, open http://localhost:9876/
01 08 2016 11:58:29.713:INFO [karma]: Karma v1.1.2 server started at http://localhost:9876/
01 08 2016 11:58:29.718:INFO [launcher]: Launching browser Chrome with unlimited concurrency
01 08 2016 11:58:29.729:INFO [launcher]: Starting browser Chrome
01 08 2016 11:58:32.277:INFO [Chrome 52.0.2743 (Windows 10 0.0.0)]: Connected on socket /#Semtu7s7yqM-TW0GAAAA with id 14496897
01 08 2016 11:58:35.315:WARN [web-server]: 404: /base/dist/app/shared/services.js
01 08 2016 11:58:35.318:WARN [web-server]: 404: /base/dist/app/shared/services/mocks.js
Chrome 52.0.2743 (Windows 10 0.0.0) ERROR
{
"originalErr": {}
}
如果我删除该行,则测试通过(但不执行"then(...)"代码块):
If i remove the line the test pass (but doesn't execute the "then(...)" code block):
overrideProviders(HeaderComponent, [{provide: CategoryService, useClass: MockCategoryService}])
推荐答案
好吧,万一有人遇到相同的问题,原来应该导入"ts"文件本身,而不是通过桶.意思是你应该这样写:
Well, in case anybody encounter the same problem, it turned out one should import the "ts" file itself, not through a barrel. meaning you should write something like this:
import { CategoryService } from '../../shared/services/category/category.service';
import { MockCategoryService } from '../../shared/services/category/category.service.mock';
代替
import { CategoryService, MockCategoryService } from '../../shared/services/category';
即使您在导出文件的目录中有index.ts.
even though you have index.ts in the directory that export the files.
野蛮人,嗯?
仍然,存在不执行异步操作的问题,我不知道为什么
Still the problem of not executing the async operation exist, I don't know why
这篇关于模拟服务时Angular2测试失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!