测试了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; 
     }) 
}