Angular2 - http调用代码覆盖率

Question

我的组件是,

 getHomePageData() : void{
    this.homeservice.getHomePageData()
          .subscribe(
              data =>   {

                            //console.log("response status ################### "+data.status);
                            //console.log("getUserData response ************ \n"+JSON.stringify(data));
                            this.defaultFacilityId = data.response.defaultFacilityId;
                            this.defaultFacilityName = data.response.defaultFacilityName;
                            this.enterpriseId = data.response.enterpriseId;
                            this.enterpriseName = data.response.enterpriseName;
                            this.facilityList = data.response.facilityList;
                            this.userName = data.response.userName;

                            this.showDefaultPopoup();
                        },
              error =>  {
                            console.error(error);
                            //this.errorMessage="Technical error - Contact Support team !" ;
                        }
          );

  }

所以我的component.spec.ts是,

 it('getHomePageData with SUCCESS - getHomePageData()', () => {
    backend.connections.subscribe((connection: MockConnection) => {
      //expect(connection.request.url).toEqual('http://localhost:8080/MSMTestWebApp/UDM/UdmService/Home/');
      expect(connection.request.url).toEqual('http://192.168.61.158:9080/GetUserData');

      expect(connection.request.method).toEqual(RequestMethod.Get);
      expect(connection.request.headers.get('Content-Type')).toEqual('application/json');
      let options = new ResponseOptions({
        body:
        {
          "request": { "url": "/getUserData" },
          "response": {
                 "defaultFacilityName":"3M Health Information Systems",
                  "enterpriseId":"11.0",
                  "enterpriseName":"HSA Enterprise",
                  "defaultFacilityId": "55303.0",
                  "userName":"Anand"
          },
          "error": ""
        },
        status : 200
      });

      connection.mockRespond(new Response(options));

    });

     backend.connections.subscribe((data) => {
      //expect(data.response.facilityId).toEqual("55303.0");
      //expect(subject.handleError).toHaveBeenCalled();
    })

    service.getHomePageData().subscribe((data) => {
          //expect(videos.length).toBe(4);
          expect(data.response.defaultFacilityId).toEqual("55303.0");
          component.defaultFacilityId = data.response.defaultFacilityId;
          component.defaultFacilityName = data.response.defaultFacilityName;
          component.enterpriseId = data.response.enterpriseId;
          component.enterpriseName = data.response.enterpriseName;
          component.userName = data.response.userName;
          console.log("$$$$$$$$$$$$$$$$**********$$$$$$$$$$$$$$$$$$$$$");
      });

  });

当我尝试运行测试用例时.它通过了.但是当我查看代码覆盖率时,它不会覆盖下面的红色代码

请帮助获得完整的代码覆盖率.谢谢.

Answer 1

在你在这里展示的测试中,你似乎没有getHomePageData()从你的组件中调用

尝试像这样构建测试:

import { fakeAsync, tick } from '@angular/core/testing';
...
it('getHomePageData with SUCCESS - getHomePageData()', fakeAsync(() => {
  backend.connections.subscribe((connection: MockConnection) => {
  //expect(connection.request.url).toEqual('http://localhost:8080/MSMTestWebApp/UDM/UdmService/Home/');
  expect(connection.request.url).toEqual('http://192.168.61.158:9080/GetUserData');

  expect(connection.request.method).toEqual(RequestMethod.Get);
  expect(connection.request.headers.get('Content-Type')).toEqual('application/json');
  let options = new ResponseOptions({
    body:
    {
      "request": { "url": "/getUserData" },
      "response": {
             "defaultFacilityName":"3M Health Information Systems",
              "enterpriseId":"11.0",
              "enterpriseName":"HSA Enterprise",
              "defaultFacilityId": "55303.0",
              "userName":"Anand"
      },
      "error": ""
    },
    status : 200
  });

  connection.mockRespond(new Response(options));

  });

  // If this function is not automatically called in the component initialisation
  component.getHomePageData();
  tick();
  //you can call expects on your component's properties now
  expect(component.defaultFacilityId).toEqual("55303.0");

});

FakeAsync 允许您以更线性的方式编写测试,因此您不再需要订阅服务功能来编写您的期望.

在FakeAsync测试函数中,您可以在调用tick()之后调用,在该调用中进行异步操作以模拟时​​间的推移,然后继续执行代码流.

你可以在这里阅读更多相关信息:https://angular.io/docs/ts/latest/testing/#!#fake-async

编辑 - 错误案例

要测试错误逻辑,您可以mockError使用mockRespond连接调用或设置错误响应:

it('getHomePageData with ERROR- getHomePageData()', fakeAsync(() => {
  backend.connections.subscribe((connection: MockConnection) => {
    if (connection.request.url === 'http://192.168.61.158:9080/GetUserData') {
        // mockError option
        connection.mockError(new Error('Some error'));
        // mockRespond option
        connection.mockRespond(new Response(new ResponseOptions({
          status: 404,
          statusText: 'URL not Found',
        })));
    }

  component.getHomePageData();
  tick();
  //you can call expects now
  expect(connection.request.url).toEqual('http://192.168.61.158:9080/GetUserData');
  expect(connection.request.method).toEqual(RequestMethod.Get);
  expect(connection.request.headers.get('Content-Type')).toEqual('application/json');
  expect('you can test your error logic here');
});

我们在订阅中所做的是确保GetUserData在此测试方法中调用端点时,它将返回错误.

因为我们在成功测试中单独测试错误和成功,所以不需要在请求选项中添加与错误相关的设置.

Answer 2

您使用 JSON 数据吗？那么你应该map()在使用之前使用.subscribe().

.map((res:Response) => res.json())

尝试像这样组织你的代码：

ngOnInit() {
this.getHomePageData();
}

getHomePageData() {
 this.http.get('your.json')
  .map((res:Response) => res.json())
  .subscribe(
    data => { 
      this.YourData = data
    },
    err => console.error(err),
    () => console.log('ok')
  );
}

希望能帮助到你，

干杯