测试了HTTPClient角4 “预计undefined来定义”
问题描述:
测量角4了HTTPClient测试了HTTPClient角4 “预计undefined来定义”
在此之后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();
});
});
答
随着一些试验和错误(主要是错误)
我已经解决了这个,我想更好地了解了测试的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();
});
});
答
假设你有你的数据正确地从您的网址返回,你似乎被遗忘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;
})
}
感谢您的答复,但我使用了HTTPClient角4,当我看到你的'this._http'我还以为你使用不需要做 – Roy
嘛Http服务。 –