Question

所以我正在测试我的angular2组件＆amp;服务。

到目前为止，我已经使用mockBackend来模拟服务中的get请求，如下所示：

/* 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');
   }))
 ); 
});

如果您想查看我的服务，请按以下步骤操作：

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

从上面的服务中，我实现了getAllPages（）＆amp;我的service.spec.ts文件中的getPageById（）方法正确，因为它们工作正常。

我想知道如何为savePage() , updatePage() , deletePage()方法实现测试用例。

任何输入？

提前致谢。

Answer 1

您需要检查方法的内部结构并查看它正在做什么。这就是你如何测试它的预期行为。

您正在设置Content-Type标头。所以这是一个要求，你应该测试这种行为。您可以从MockConnection#request

获取标题

backend.connections.subscribe((conn: MockConnection) => {
  let contentType = conn.request.headers.get('Content-Type');
  expect(contentType).not.toBeNull();
  expect(contentType).toEqual('application/json');
});

您正在设置网址，因此这是一项要求。这应该进行测试。你已经
了
```
expect(conn.request.url).toBe('...');
```
您正在发送数据。所以这是一个要求。您应该进行测试以确保数据符合所需的格式/结构
```
let body = conn.request.json();
expect(body.data).toEqual('page');
```

请求部分。

对于响应部分，您应该测试您的服务对该响应的作用。

如果您正在接收正文，则应该像使用GET请求一样进行测试。
您还使用错误回调处理错误。你不需要测试这里的回电功能。这应该是它自己的测试。我们要测试的是从测试方法调用错误句柄。为此，我们应该使用间谍。我们可以窥探handleError函数，然后检查它是否已被调用。
```
spyOn(service, 'handleError').and.callFake(() => {});
// make call
tick();
expect(service.handleError).toHaveBeenCalled();
```
我无法找到一个案例（使用MockConnection），在你的Http请求中调用catch方法，这就是为什么我没有发布一个例子。我试过conn.mockError(new Error())，但它没有用。我尝试在连接中抛出一个错误，它没有用。也许你可以搞清楚。

如何在Angular2中使用MockBackend对Http post，put，delete进行单元测试？

1 个答案: