How to test $ionicPopup.show - ionic-framework

Question

I have an ionicPopup like so:
function editNotifications() {
var popUp = $ionicPopup.show({
template: '<ion-checkbox ng-repeat="item in vm.notifications" ng-model="item.notification" ng-checked="item.notification">' +
'<span class="notificationsFont">{{item.settingsText}}</span></ion-checkbox>',
title: 'Notification Settings',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function(e) {
vm.notifications = localStorageManager.get('notificationStatus');
}
},
{
text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
localStorageManager.set('notificationStatus', vm.notifications);
vm.notificationText = "Notifications off";
setNotificationValuesBasedOnUserInput(vm.notifications);
}
}]
});
};
Here is what I have so far;
it('Should edit notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(true);
})
spyOn(localStorageManager, 'set');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.set).toHaveBeenCalled();
// expect(localStorageManager.set).toHaveBeenCalledWith('notificationStatus');
});
I basically have no idea how to test this thing. There doesn't seem to be much on the internet. I would think I need to do something in my callFake function but I'm a bit stuck. Anyone ever successfully tested this beast before?

Answer 1

Go through this answer: https://stackoverflow.com/a/52565500/7943457
And modify your code something like this:
function editNotifications() {
var popUp = $ionicPopup.show({
template: '<ion-checkbox ng-repeat="item in vm.notifications" ng-model="item.notification" ng-checked="item.notification">' +
'<span class="notificationsFont">{{item.settingsText}}</span></ion-checkbox>',
title: 'Notification Settings',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function(e) {
return false;
}
},
{
text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
return true;
}
}]
});
popup.then(function(response){
if(response){ //when response is true
localStorageManager.set('notificationStatus', vm.notifications);
vm.notificationText = "Notifications off";
setNotificationValuesBasedOnUserInput(vm.notifications);
}else{ //when response is false
vm.notifications = localStorageManager.get('notificationStatus');
}
})
};
You can test it like this:
it('Should edit notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(true);
})
spyOn(localStorageManager, 'set');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.set).toHaveBeenCalled();
// expect(localStorageManager.set).toHaveBeenCalledWith('notificationStatus');
});
it('Should get notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(false);
})
spyOn(localStorageManager, 'get');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.get).toHaveBeenCalled();
// expect(localStorageManager.get).toHaveBeenCalledWith('notificationStatus');
});
Hope it helps.