我已经使用jasmine-karma 为Angular2 app准备了一个 http测试用例,并且出现了API错误:未捕获的API错误
用例: 我需要使用Karma-Jasmine为我的Angular2 App测试一个http服务,我使用下面的方法来实现这个目的。
但是我遇到了API错误,这是未被捕获的,所以请建议我解决方案或任何替代方法来进行http服务测试
请提出解决方案,谢谢提前代码如下:
错误:
Chrome 56.0.2924 (Mac OS X 10.12.3)
"isTrusted": true
}
Error: API Error {
at CatchSubscriber.selector (http://localhost:9877webpack:///src/app/services/api/api.service.ts:39:32 <- config/spec-bundle.js:15376:193) [ProxyZone]
at CatchSubscriber.error (http://localhost:9877webpack:///~/rxjs/operator/catch.js:53:0 <- config/spec-bundle.js:43225:31) [ProxyZone]
at MapSubscriber.Subscriber._error (http://localhost:9877webpack:///~/rxjs/Subscriber.js:128:0 <- config/spec-bundle.js:542:26) [ProxyZone]
at MapSubscriber.Subscriber.error (http://localhost:9877webpack:///~/rxjs/Subscriber.js:102:0 <- config/spec-bundle.js:516:18) [ProxyZone]
at XMLHttpRequest.onError (http://localhost:9877webpack:///~/@angular/http/src/backends/xhr_backend.js:95:0 <- config/spec-bundle.js:58151:34) [ProxyZone]
at ProxyZoneSpec.onInvokeTask (http://localhost:9877webpack:///~/zone.js/dist/proxy.js:103:0 <- config/spec-bundle.js:66413:39) [ProxyZone]
at ZoneDelegate.invokeTask (http://localhost:9877webpack:///~/zone.js/dist/zone.js:366:0 <- config/spec-bundle.js:66859:36) [ProxyZone]
at Zone.runTask (http://localhost:9877webpack:///~/zone.js/dist/zone.js:166:0 <- config/spec-bundle.js:66659:47) [<root> => ProxyZone]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:9877webpack:///~/zone.js/dist/zone.js:420:0 <- config/spec-bundle.js:66913:38) [<root>]
&#13;
Spec.ts文件
import {Http,HttpModule,BaseRequestOptions,XHRBackend, Response, ResponseOptions} from '@angular/http';
import { MockBackend ,MockConnection} from '@angular/http/testing';
import { async, TestBed, inject,getTestBed } from '@angular/core/testing';
import {FactoryUsersApiService, User} from "../../../../services/api/factoryusers.api.service";
import {ApiService} from "../../../../services/api/api.service";
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers:[FactoryUsersApiService,ApiService,MockBackend]
})
.compileComponents();
}));
describe('Build Home Component', () => {
let subject: FactoryUsersApiService;
let backend: MockBackend;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [ {
provide: Http,
useFactory: (mockBackend, defaultOptions) => {
return new Http(mockBackend, defaultOptions);
},
}
]
});
}));
beforeEach(async(inject([ApiService, MockBackend], (apiservice, mockBackend) => {
subject = apiservice;
backend = mockBackend;
})));
it('should get Build Etl Report ', async(() => {
let factoryUsersApiService: FactoryUsersApiService = getTestBed().get(FactoryUsersApiService);
backend.connections.subscribe(
(connection: MockConnection) => {
connection.mockRespond(
new Response(
new ResponseOptions({
body: {
id: 200
}
}))
);
}
);
factoryUsersApiService.getBuildEtlReport("jaffarmohammad@exapmle.com").subscribe(
(res) => {
expect(res.id).toBe(200);
}
);
}));
});
&#13;
答案 0 :(得分:0)
通过Chrome浏览器进行所有调查之后,我发现是跨域问题,我已修复(跨域检查已禁用)这与COMMAND(在终端中)
COMMAND:
禁用跨域检查时运行Chrome:
对于OSX:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=ChromeUserData/
并尽可能地将代码缩小到下面:
import {HttpModule} from '@angular/http';
import {async, TestBed,getTestBed } from '@angular/core/testing';
import {FactoryUsersApiService} from "../../../../services/api/factoryusers.api.service";
import {ApiService} from "../../../../services/api/api.service";
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers:[FactoryUsersApiService,ApiService]
})
.compileComponents();
}));
describe('Build Home Component:', () => {
it('should get Current User(http server request)', async(() => {
let factoryUsersApiService: FactoryUsersApiService = getTestBed().get(FactoryUsersApiService);
factoryUsersApiService.getCurrentUser().subscribe(
(res:any) => {
console.log(res);
expect(res).toBeDefined();
}
);
}));
it('should get Build Etl Reports(http server request)', async(() => {
let factoryUsersApiService: FactoryUsersApiService = getTestBed().get(FactoryUsersApiService);
factoryUsersApiService.getBuildEtlReport("jaffarmohammad@example.com").subscribe(
(res:any) => {
console.log(res);
expect(res).toBeDefined();
}
);
}));
});
所以我可以毫无疑问地说,这段代码适用于Angular2 Karma-Jasmine Http测试。
喝彩! -Jaffar Khan