Faux requête HTTP en Angular 4

Question

J'écris une application en Angular 4 et j'ai la fonction ngOnInit avec http get request. Je veux écrire un test unitaire, mais je ne sais pas comment me moquer de la requête.

ngOnInit() { 
this.http.get<any>('someurl', { 
    headers: new HttpHeaders().set('Authorization', 'authorization'`) 
}) 
.subscribe(
    (res) => { 
    this.servB = res.items 
    .map((item) => { 
     return new ServB(item) 
    }); 
    } 
); 
} 

et mon test unitaire semble jusqu'à présent comme ceci:

beforeEach(async(() => { 
TestBed.configureTestingModule({ 
    imports: [ HttpClientModule, HttpModule ], 
    declarations: [ ServBComponent ], 
    providers : [ 
    { provide: 'someurl', useValue: '/' }, 
    { provide: XHRBackend, useClass: MockBackend } 
    ] 
}) 
.compileComponents().then(() => { 
    fixture = TestBed.createComponent(ServiceBrokersComponent); 
    component = fixture.componentInstance; 
}); 
it('should get the servb list', async(inject([XHRBackend], (mockBackend) => { 
    mockBackend.connections.subscribe((connection) => { 
    connection.mockRespond(new Response(new ResponseOptions({ 
     body: data 
    }))); 
    }); 
    fixture.detectChanges(); 
    fixture.whenStable().then(()=> { 
    console.log('anything'); 
    }); 
}))); 

mais il ne fonctionne pas. Il demande toujours des données du serveur, ne renvoie pas la valeur mocked. Plus tout ce qui est après 'whenStable()' est exécuté avant ... Que fais-je de mal?

Answer 1

Vous devez importer HttpClientTestingModule au lieu de HttpClientModule, comme ceci:

beforeEach(() => { 
    TestBed.configureTestingModule({ 
    imports: [HttpClientTestingModule], 
    providers: [ 
     HttpService 
    ] 
    }); 
});