test HTTPClient angulaire 4 "prévue undefined à définir"

Question

Test angulaire 4 HTTPClient

Suite à cette post

Au service

getBlogs(){ 
    return this._http.get(this.blogsURL+'blogs') 
      .map((result: Response) => { 
       this.blogs = result['blogs']; 
       return this.blogs; 
    }) 
} 

Et le test: J'ai commencé l'injection du service et HttpTestingController dans le bloc, mais en le mettant dans le avant chaque fonctionne aussi bien.

Le problème se produit lorsque request.flush est appelé et les feux de sorte que la méthode, ils sont retournés aucun résultat

import { TestBed, inject } from '@angular/core/testing'; 
import { HttpClientModule } from '@angular/common/http'; 
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; 

import { BlogsService } from './blogs.service'; 
import { Blog } from '../models/blog'; 


describe('BlogsService',() => { 
    let service:BlogsService; 
    let blogsURL:string; 
    let httpMock:HttpTestingController; 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     providers: [BlogsService], 
     imports: [HttpClientTestingModule] 
    }); 
    service = TestBed.get(BlogsService); 
    httpMock = TestBed.get(HttpTestingController); 
    blogsURL = 'http://localhost:3000/' 
    }); 



it('#getBlogs should return data',() => { 
    service 
     .getBlogs() 
     .subscribe(result => { 
     expect(result).toBeDefined(); 
     expect(result.length).toBe(2); 
     expect(result).toEqual([ 
      { 
      id: 1, 
      name: 'Foo', 
      numSales: 100 
      }, { 
      id: 2, 
      name: 'Bar', 
      numSales: 200 
      } 
     ]); 
     }); 


    // look up our request and access it 
    const request = httpMock.expectOne(blogsURL+'blogs'); 
    // verify it is a GET 
    expect(request.request.method).toEqual('GET'); 

    // Now, provide the answer to the caller above, 
    // flushing the data down the pipe to the caller and 
    // triggering the test's subscribe method 
    request.flush([ 
      { 
      id: 1, 
      name: 'Foo', 
      numSales: 100 
      }, { 
      id: 2, 
      name: 'Bar', 
      numSales: 200 
      } 
     ]); 
    // 
    // // make sure it actually got processed... 
    httpMock.verify(); 
    }); 


}); 

Answer 1

Avec quelques essais et erreurs (erreur la plupart du temps)

J'ai résolu ce problème et je pense acquis une meilleure compréhension de tester la HTTPClient.

Commençons par ce qui est renvoyé par le serveur de base de données

{message: 'Success', blogs: blogs} 

Un objet JSON avec un message et mon tableau de blogs appelés blogs

Suivant la fonction dans le service appelé getBlogs

Les 2 lignes importantes sont:

this.blogs = res['blogs']; 
    return this.blogs; 

ce que cela fait est d'extraire le tableau de blogs des résultats, ajoute à la var this.blogs, puis le renvoie. Ce que je n'oublie pas, c'est que je teste la fonction réelle dans mon service et non une entité séparée, donc le test a besoin de renvoyer les blogs , ce qui explique pourquoi je recevais une erreur non définie, alors j'ai ajouté un tableau de simulation des blogs:

blogs = [{_id: '1234',title: 'title1-test', vidUrl: 'XpiipWULkXk', script:'Some test script'}, {_id: '12345',title: 'title2', vidUrl: 'XpiipWULkXk', script:'Some test script2'}]; 

Et puis dans la déclaration de chasse

request.flush({message:"Success", blogs:blogs}); 

Parce que ce besoin d'imiter ce qui est renvoyé par le serveur, de sorte que le code peut l'extraire.

Code complet:

import { TestBed, inject } from '@angular/core/testing'; 
import { HttpClientModule } from '@angular/common/http'; 
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; 

import { BlogsService } from './blogs.service'; 
import { Blog } from '../models/blog'; 


describe('BlogsService',() => { 
    let service:BlogsService; 
    let blogsURL:string; 
    let httpMock: HttpTestingController; 
    let blogs:Blog[]; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     providers: [BlogsService], 
     imports: [HttpClientTestingModule] 
    }); 
    service = TestBed.get(BlogsService); 
    httpMock = TestBed.get(HttpTestingController); 
    blogsURL = 'http://localhost:3000/'; 
    blogs = [{_id: '1234',title: 'title1-test', vidUrl: 'XpiipWULkXk', script:'Some test script'}, {_id: '12345',title: 'title2', vidUrl: 'XpiipWULkXk', script:'Some test script2'}]; 

    }); 


    it('#getBlogs should return data',() => { 
    service 
     .getBlogs() 
     .subscribe(results => { 
      expect(results).toBeDefined(); 
      //has to be what is returned by the function 
      expect(results).toEqual(blogs); 
      console.log(results) 

     }); 
     // look up our request and access it 
     const request = httpMock.expectOne(blogsURL+'blogs'); 
     // verify it is a GET 
     expect(request.request.method).toEqual('GET'); 

     request.flush({message:"Success", blogs:blogs}); 
    // // make sure it actually got processed... 
     httpMock.verify(); 
    }); 


}); 

Answer 2

En supposant que vous avez vos données correctement retourné de votre URL abonner, vous semblez oublier être result.json() dans map fonction à l'intérieur de votre service. Le service http angulaire renvoie un objet Response et vous devez appeler sa fonction json pour obtenir votre objet json réel, vous pouvez alors retourner vos données. Changer votre méthode getBlogs à ce qui suit

getBlogs(){ 
    return this._http.get(this.blogsURL+'blogs') 
     .map((result: Response) => { 
      const resp = result.json(); 
      this.blogs = resp['blogs']; 
      return this.blogs; 
     }) 
}