$ionicPopup.show buttons onTap function not getting coverage in Angular Jasmine Unit Test

问题

When I call the outOfMvp() function in my unit test spec file, everything inside the function is getting coverage except for the onTap function. I was wondering how to get coverage in my unit test for the button's onTap function which is in a JSON object being passed in $ionicPopup.show() method?

Here is the function in the js file:

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

unit test for outOfMvp function in spec file:

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

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

coverage html file for the outOfMvp function:

回答1:

You need to modify your code a little bit to ensure whether code works or not with help of unit testing.

Try this:

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

And you can test the above code as follows:

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

Don't forget to inject $ionicPopup, $q else you will get error. And one thing you need to remember is that you won't get coverage for this code:

onTap: function () {
   return true;
}

But your code will be tested with logically complete coverage as it will test what you want to do when "Ok" button is tapped.

来源：https://stackoverflow.com/questions/46836698/ionicpopup-show-buttons-ontap-function-not-getting-coverage-in-angular-jasmine