Невозможно сделать XHR из поддельного асинхронного теста

Question

Абсолютный новичок в Карма / Жасмин ищет некоторую помощь. Я пытаюсь запустить следующий тест и получаю сообщение об ошибке "Невозможно создать 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;
        }
    );
}

Answer 1

У меня была та же проблема, и я не уверен, какую версию Angular вы используете, но это работает с 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 & 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 тем не менее, возможно, стоит обновить, так как его гораздо проще использовать. Надеюсь это поможет.

Answer 2

Угловой раствор 6+.

Прежде всего для угловых 6+ мы должны использовать Перехватчики, чтобы справиться с этим. Вам нужно создать сервис, который реализует HttpIntercepter и просто переопределить метод "перехват", он должен возвращать 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();
      }));

Надеюсь, что код поможет.