测试 HTTPClient Angular 4 "Expected undefined to be defined"

Question

测试Angular 4 HTTPClient

关注这个post

服务中

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

然后是测试：我开始将服务和 HttpTestingController 注入到 it 块中，但将其放入 before each 也同样有效。

问题发生在调用 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

假设您从 url 中正确地 return 编辑了数据，您似乎忘记了服务中 map 函数中的 result.json()。 Angular http 服务 return 是一个对象 Response，您需要调用它的 json 函数来获取实际的 json 对象，然后您可以 return你的数据。将您的 getBlogs 方法更改为以下

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

Answer 2

经过一些尝试和错误（主要是错误）

我已经解决了这个问题，我认为对测试 HTTPClient 有了更好的理解。

让我们从数据库服务器返回的内容开始

{message: 'Success', blogs: blogs}

一个 json 带有消息的对象和我的博客数组 blogs

下一个服务中名为 getBlogs 的函数

重要的两行是：

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

这样做是从结果中提取 blogs 数组，添加到 var this.blogs 然后 returns 它。

我一直忘记的是，我正在测试服务中的实际功能而不是单独的实体，因此测试需要博客将被返回，这就是我收到未定义错误的原因，所以我添加了一个模拟博客数组：

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

然后在flush语句中

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();
    });


});

测试 HTTPClient Angular 4 "Expected undefined to be defined"

Test HTTPClient Angular 4 "Expected undefined to be defined"

integration-testing

karma-jasmine

angular