无法在假异步测试中制作XHR

时间:2017-10-03 12:25:28

标签: angular karma-jasmine

Karma / Jasmine的新手寻求一些帮助。我试图运行以下测试,我得到错误"无法在假异步测试中制作XHR"。我已经包含了我试图调用的测试和方法。非常感谢任何帮助。

import...

fdescribe('CageService', () => {

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            RouterTestingModule,
            HttpModule
        ],
        providers: [
            BaseRequestOptions,
            MockBackend,
            CageService,
            { provide: 'appHttpService', useClass: AppHttpService },
            { provide: 'appHttpHelperService', useClass: AppHttpHelperService },
            { provide: 'appUtilityService', useClass: AppUtilityService },
            { provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
                return new Http(backend, defaultOptions);
            }, deps: [MockBackend, BaseRequestOptions] }
        ]
    });
});

it('will load cages', inject([CageService, MockBackend], fakeAsync(( cageService, mockBackend\) => {

    var res;
    mockBackend.connections.subscribe( c => {

        expect(c.request.url).toBe('http://example.com');
        let response = new ResponseOptions( { body: '{"name": "charles"}' } );
        c.mockRespond( new Response( response ) );
    });

    cageService.load({}).subscribe((_res) => {

        res = _res;
    });

    tick(100);
    discardPeriodicTasks();
    expect(res.name).toBe('Charles');
})));
});

我正在调用的方法是

load ( criteria: Object ) {

    return this.appHttpService.get( this.url + '?' + criteria )
    .map( 

        response => {

            let data = response.json();

            this.pagination.total = data.count;
            this.pagination.per_page = data.limit;
            this.pagination.current_page = data.currentPage;
            this.pagination.last_page = data.totalPages;

            let cages = [];
            for( let x = 0; x < data.rows.length; x++ ) {

                cages.push( this.formatCage(new Cage(), data.rows[x] ) );
            }

            this._cages$.next( this.dataStore.cages );

            return data.rows;
        }
    );
}

2 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,我不确定您使用的角度版本是什么版本,但这适用于HttpClientModule,不确定它是否适用于HttpModule 。这是我的版本:

@angular/cli: 1.4.9
node: 8.8.1
os: linux x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.5.3

这是我的imports&amp; providers数组:

import { MockBackend } from '@angular/http/testing';
import { HttpClientModule, HttpXhrBackend } from '@angular/common/http';
imports: [
    otherStuff...,
    HttpClientModule
],
providers: [
    otherStuff...,
    SomeService,
    {
        provide: HttpXhrBackend,
        useClass: MockBackend
    }
]

如果您还没有使用HttpClient,则可能需要更新,因为它更容易使用。希望这可以帮助。

答案 1 :(得分:0)

Angular 6+解决方案。

首先,对于角度为6+的对象,我们必须使用拦截器进行处理。 您需要创建一个实现HttpIntercepter的服务,并且只需重写'intercept'方法,该服务应以所需的任何值返回Observer。

我遇到同样的错误,我的解决方法是

      @Injectable()
      class TestHttpRequestInterceptor implements HttpInterceptor {

        intercept(req: HttpRequest<any>, next: HttpHandler):
          Observable<HttpEvent<any>> {
          return new Observable<any>(observer => {
              observer.next({} as HttpEvent<any>);
          });
        }
      }

   beforeEach(async(() => {
        TestBed.configureTestingModule({
          imports: [SharedModule, RouterTestingModule,
            StoreModule.forRoot(fromReducers.reducer))
          ],
          declarations: [],
          providers: [
            LocalStorageService, 
            {
              provide: HTTP_INTERCEPTORS, useClass: TestHttpRequestInterceptor, multi: true
            }
            ],
          schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
        })
          .compileComponents();
      }));

希望代码会有所帮助。