Angular2,Jasmine-Karma,http测试API错误{" isTrusted":true}

时间:2017-03-20 10:20:47

标签: unit-testing angular karma-jasmine

我已经使用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;
&#13;
&#13;

Spec.ts文件

&#13;
&#13;
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;
&#13;
&#13;

1 个答案:

答案 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