angular - Làm thế nào để thực hiện kiểm thử đơn vị cho Http post, put, delete sử dụng MockBackend trong Angular2?
Vậy nên tôi đang thử nghiệm các thành phần & dịch vụ Angular2 của mình.
Cho đến nay tôi đã sử dụng mockBackend để giả lập yêu cầu get trong dịch vụ như dưới đây:
/* tslint:disable:no-unused-variable */
import { MockBackend } from '@angular/http/testing';
import { Http, ConnectionBackend, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
import { PagesService } from './pages.service';
import { tick, fakeAsync } from '@angular/core/testing/fake_async';
import { inject, TestBed } from '@angular/core/testing/test_bed';
import {GlobalService} from './../../shared/global.service';
describe('PagesService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{
provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
return new Http(backend, defaultOptions);
}, deps: [MockBackend, BaseRequestOptions]
},
{ provide: PagesService, useClass: PagesService },
{ provide: GlobalService, useClass: GlobalService },
{ provide: MockBackend, useClass: MockBackend },
{ provide: BaseRequestOptions, useClass: BaseRequestOptions }
]
});
});
//should retrive all search results
it('should retrieve all search results',
inject([PagesService, MockBackend], fakeAsync((pagesService: PagesService, mockBackend: MockBackend) => {
let res: Response;
mockBackend.connections.subscribe(c => {
expect(c.request.url).toBe('http://localhost:3200/pm/pages/');
let response = new ResponseOptions({
body: '[{"name": "Rapid"}, {"name": "NGBC"}]'});
c.mockRespond(new Response(response));
});
pagesService.getAllpages().subscribe((response) => {
res = response;
});
tick();
expect(res[0].name).toBe('Rapid');
}))
);
it('should fetch by Page id',
inject([PagesService, MockBackend], fakeAsync((pagesService: PagesService, mockBackend: MockBackend) => {
let res;
mockBackend.connections.subscribe(c => {
let page_id:string='2';
expect(c.request.url).toBe('http://localhost:3200/pm/pages/'+page_id);
let response = new ResponseOptions({body: '[{"id": 1, "name": "Rapid"}, {"id": 2, "name": "NGBC"}]'});
c.mockRespond(new Response(response));
});
pagesService.getPageById('2').subscribe((response) => {
res = response;
});
tick();
expect(res[1].name).toBe('NGBC');
}))
);
});
Nếu bạn muốn xem service.ts của tôi thì nó như bên dưới:
export class PagesService {
private headers = new Headers();
public baseUrl:string;
constructor(private http: Http,private _globalService:GlobalService) {
this.baseUrl=this._globalService.baseUrl;
}
getAllpages() {
return this.http.get(this.baseUrl + '/pm/pages/')
.map((res: Response) => res.json()).catch(this.handleError);
}
getPageById(page_id: string) {
return this.http.get(this.baseUrl + '/pm/pages/' + page_id)
.map((res: Response) => res.json()).catch(this.handleError);
}
savePage(page: Object) {
this.headers=new Headers();
this.headers.append('Content-Type', 'application/json');
let url = this.baseUrl+'/pm/pages/';
let data={};
data["data"]=page;
return this.http.post(url, JSON.stringify(data),{headers: this.headers})
.map((res: Response) => res.json()).catch(this.handleError);
}
updatePage(page: any) {
this.headers=new Headers();
this.headers.append('Content-Type', 'application/json');
let url = this.baseUrl+'/pm/pages/'+page._id;
let data={};
data["data"]=page;
return this.http.put(url, JSON.stringify(data),{headers: this.headers})
.map((res: Response) => res).catch(this.handleError);
}
deletePage(page_id: string) {
this.headers=new Headers();
this.headers.append('Content-Type', 'application/json');
let url = this.baseUrl+'/pm/pages/';
return this.http.delete(url + page_id,{headers: this.headers,body: ''})
.map((res: Response) => res).catch(this.handleError);
}
mergePage(page: Object) {
return this.http.post(this.baseUrl + '/pm/pages/',JSON.stringify(page))
.map((res: Response) => res.json()).catch(this.handleError);
}
handleError(error: any) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Từ dịch vụ trên, tôi đã triển khai các phương thức getAllPages() & getPageById() trong tệp service.spec.ts của mình một cách chính xác vì chúng hoạt động tốt.
Tôi muốn biết cách triển khai các trường hợp kiểm thử cho các phương thức savePage(), updatePage(), deletePage().
Có ý kiến gì không?
Cảm ơn trước.
Câu trả lời #1
Bạn cần kiểm tra nội dung bên trong của các phương thức và xem nó đang làm gì. Đây là cách bạn kiểm tra hành vi mong đợi của nó.
Bạn đang thiết lập tiêu đề Content-Type. Vì vậy đây là một yêu cầu, và bạn nên kiểm tra hành vi này. Bạn có thể nhận các tiêu đề từ
MockConnection#requestbackend.connections.subscribe((conn: MockConnection) => { let contentType = conn.request.headers.get('Content-Type'); expect(contentType).not.toBeNull(); expect(contentType).toEqual('application/json'); });Bạn đang thiết lập URL, vì vậy đây là một yêu cầu. Điều này nên được kiểm tra. Bạn đã
expect(conn.request.url).toBe('...');Bạn đang gửi dữ liệu. Vì vậy đây là một yêu cầu. Bạn nên kiểm tra để đảm bảo dữ liệu ở định dạng/cấu trúc yêu cầu
let body = conn.request.json(); expect(body.data).toEqual('page');
Đó là cho phần yêu cầu.
Đối với phần phản hồi, bạn nên kiểm tra dịch vụ của mình làm gì với phản hồi đó.
Nếu bạn nhận được một thân thể, bạn nên kiểm tra nó giống như bạn đã làm với yêu cầu GET.
Bạn cũng đang xử lý lỗi bằng một callback lỗi. Bạn không cần kiểm tra callback làm gì ở đây. Điều đó nên là bài kiểm tra riêng của nó. Tất cả những gì chúng ta muốn kiểm tra là rằng trình xử lý lỗi được gọi từ phương thức đang được kiểm tra. Cho việc đó, chúng ta nên sử dụng một spy. Chúng ta có thể giám sát trong hàm
handleError, và sau đó kiểm tra rằng nó đã được gọi.spyOn(service, 'handleError').and.callFake(() => {}); // make call tick(); expect(service.handleError).toHaveBeenCalled();Tôi không thể tìm thấy một trường hợp (sử dụng MockConnection) nơi phương thức
catchđược gọi trên yêu cầu Http của bạn, đó là lý do tại sao tôi không đăng một ví dụ. Tôi đã thửconn.mockError(new Error()), nhưng nó không hoạt động. Tôi đã thử ném một lỗi bên trong kết nối, nhưng cũng không hoạt động. Có lẽ bạn có thể tìm ra cách.