$ionicPopup.show 按钮 onTap 功能未在 Angular Jasmine 单元测试中得到覆盖答案

【问题标题】：$ionicPopup.show buttons onTap function not getting coverage in Angular Jasmine Unit Test$ionicPopup.show 按钮 onTap 功能未在 Angular Jasmine 单元测试中得到覆盖
【发布时间】：2017-10-19 18:38:02
【问题描述】：

当我在单元测试规范文件中调用 outOfMvp() 函数时，除了 onTap 函数之外，函数内的所有内容都得到了覆盖。我想知道如何在我的单元测试中覆盖按钮的 onTap 函数，该函数位于 $ionicPopup.show() 方法中传递的 JSON 对象中？

这里是js文件中的函数：

function outOfMvp(data) {
  environmentConfig.isScanDataReadValid = false;
  popup = $ionicPopup.show({
    title: kioskConstants.POPUP_WORDING.OUT_OF_MVP_RETURN.title,
    template: data.returnRejectReasons[0].description
    + '.<br><br>' + kioskConstants.POPUP_WORDING.OUT_OF_MVP_RETURN.template
    + ' <span style=\'color:#007dc6\'>' + data.orderNo + '</span>',
    cssClass: 'popup-container-small',
    buttons: [
      {
        text: "OK",
        type: "bottom-button green narrow",
        onTap: function () {
          if ($state.current.name != "order-history") {
            environmentConfig.isScanDataReadValid = true;
            $rootScope.$broadcast("CancelConnectQR", data.orderNo);
            OrderInfo.init();
            $state.go(kioskConstants.ROUTE_STATE_LANDING_PAGE);
          }
        }
      }
    ]
  });
}

spec 文件中 outOfMvp 函数的单元测试：

describe('If call customPopupWidget.outOfMvp(data) function',function () {

it('it should call $ionicPopup.show().', function () {
  customPopupWidget.outOfMvp(data);
  expect(ionicPopup.show).toHaveBeenCalled();
});

outOfMvp 函数的覆盖 html 文件：

【问题讨论】：

标签： angularjs unit-testing karma-jasmine test-coverage ionic-popup

【解决方案1】：

您需要稍微修改您的代码，以确保代码在单元测试的帮助下是否有效。

试试这个：

function outOfMvp(data) {
  environmentConfig.isScanDataReadValid = false;
  popup = $ionicPopup.show({
    title: kioskConstants.POPUP_WORDING.OUT_OF_MVP_RETURN.title,
    template: data.returnRejectReasons[0].description
    + '.<br><br>' + kioskConstants.POPUP_WORDING.OUT_OF_MVP_RETURN.template
    + ' <span style=\'color:#007dc6\'>' + data.orderNo + '</span>',
    cssClass: 'popup-container-small',
    buttons: [
      {
        text: "OK",
        type: "bottom-button green narrow",
        onTap: function () {
          return true;
        }
      }
    ]
  });
  popup.then(function(response){
     if(response){ //when response is true
       if ($state.current.name != "order-history") {
         environmentConfig.isScanDataReadValid = true;
         $rootScope.$broadcast("CancelConnectQR", data.orderNo);
         OrderInfo.init();
         $state.go(kioskConstants.ROUTE_STATE_LANDING_PAGE);
       }
     }
  })
}

你可以按如下方式测试上面的代码：

describe('If call customPopupWidget.outOfMvp(data) function',function () {

it('it should call $ionicPopup.show().', function () {
  spyOn($ionicPopup, 'show').and.callFake(function() {
     return $q.resolve(true);
  })
  customPopupWidget.outOfMvp(data);
  expect(ionicPopup.show).toHaveBeenCalled();
});

别忘了注入 $ionicPopup, $q 否则会报错。您需要记住的一件事是，您不会获得此代码的覆盖率：

onTap: function () {
   return true;
}

但是您的代码将在逻辑上完全覆盖进行测试，因为它会在点击“确定”按钮时测试您想要执行的操作。

【讨论】：