10

所以我正在测试我的 angular2 组件和服务。

到目前为止，我已经使用 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');
   }))
 ); 
});

如果你想看到我的 service.ts 如下：

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

从上述服务中，我已经在我的 service.spec.ts 文件中正确实现了 getAllPages() 和 getPageById() 方法，因为它们工作正常。

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

有什么输入吗？

提前致谢。

4

1 回答 1

3

您需要检查方法的内部结构，看看它在做什么。这就是您测试其预期行为的方式。

  • 您正在设置 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');
});

  • 您正在设置 URL，因此这是一项要求。这应该被测试。你已经

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

    我找不到catch在您的 Http 请求上调用该方法的案例（使用 MockConnection），这就是我没有发布示例的原因。我试过conn.mockError(new Error())了，没用。我尝试在连接内抛出错误，它没有用。也许你能想出来。

于 2016-09-14T16:20:46.443 回答