測試了HTTPClient角4 「預計undefined來定義」

Question

測量角4了HTTPClient

在此之後post

在服務

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

然後測試： 我開始注入服務和HttpTestingController進入它的阻塞，但把它放在每個工作前也是如此。

問題時request.flush被稱爲發生等觸發的訂閱方法，他們還沒有結果返回

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

隨着一些試驗和錯誤（主要是錯誤）

我已經解決了這個，我想更好地瞭解了測試的HttpClient。

讓我們先從什麼正在從數據庫服務器返回

{message: 'Success', blogs: blogs} 

一條消息，我的博客的數組JSON對象稱爲博客

接下來在服務功能稱爲getBlogs

這兩條重要的路線是：

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

這樣做是從結果中提取博客數組，添加到var this.blogs中，然後返回它。

我一直忘記的是，我正在測試我的服務中的實際功能，而不是一個單獨的實體，因此測試需要返回博客 ，這就是爲什麼我得到一個未定義的錯誤，所以我補充說一個模擬的博客陣列：

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

然後在沖洗聲明

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

因爲這需要效仿從服務器返回的年代，這樣的代碼可以提取它。

完整代碼：

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

假設你有你的數據正確地從您的網址返回，你似乎被遺忘result.json()在map函數裏面你的服務。 Angular http服務返回一個對象Response，你需要調用它的json函數來獲得你的實際json對象，然後你可以返回你的數據。您getBlogs方法更改爲以下

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