CODEWITHSUNDEEP
javascriptangularjsionic-frameworkjasminekarma-runner
FrancescoMussi
FrancescoMussi

Reputation: 21610

Karma-Jasmine: How to test ionicModal?

THE SITUATION:

In my Ionic app I am testing the correct opening of a modal.

I have made several attempts, but i am getting the following error:

TypeError: Cannot read property 'then' of undefined

THE FUNCTION:

$scope.open_register_modal = function() 
{
    $ionicModal.fromTemplateUrl('templates/project_register.html', {
        scope: $scope
    }).then(function(modal) { 
        $scope.modal_register = modal;
        $scope.modal_register.show();
    });
};

THE TEST:

describe('App tests', function() {

    beforeEach(module('my_app.controllers'));

    beforeEach(inject(function(_$controller_, _$rootScope_)
    {
        $controller = _$controller_;
        $rootScope = _$rootScope_;
        $scope = _$rootScope_.$new(); 

        $ionicModal = 
        {
            fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
            then : function(modal){}  // <--- attempt
        }; 

         var controller = $controller('MainCtrl', { $scope: $scope, $rootScope: $rootScope, $ionicModal: $ionicModal });
    }));


    describe('Modal tests', function() 
    {
        it('should open register modal', function() 
        {
            $scope.open_register_modal();

            expect($ionicModal).toHaveBeenCalled();
        });
    });

});

ATTEMPTS:

These are some of the attempts to initialize $ionicModal:

1. 

    $ionicModal = 
    {
        fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
        then : function(modal){} 
    };

2. 

    $ionicModal = 
    {
        fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
        then: jasmine.createSpy('$ionicModal.then')
    };

3. 

    $ionicModal = 
    {
        fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
        then: jasmine.createSpy('$ionicModal.fromTemplateUrl.then')
    };

4. 

    $ionicModal = jasmine.createSpyObj('$ionicModal', ['show', 'close','fromTemplateUrl']);

But they all give the same error:

TypeError: Cannot read property 'then' of undefined

THE QUESTION:

How can i pass the .then method inside the test?

How can i properly test ionicModal?

Upvotes: 1

Views: 813

Answers (1)

Pablo Lozano
Pablo Lozano

Reputation: 10342

I don't know anything about ionic, but I think your mistake is expecting that the method then is part of it. The code

$ionicModal.fromTemplateUrl('templates/project_register.html', {
    scope: $scope
}).then(function(modal) { 
    $scope.modal_register = modal;
    $scope.modal_register.show();
});

can be refactor to:

var temp=$ionicModal.fromTemplateUrl(
        'templates/project_register.html', 
        {scope: $scope});

temp.then(function(modal) { 
    $scope.modal_register = modal;
    $scope.modal_register.show();
});

so the method then is part of the object returned by the call to fromTemplateUrl

A solution could be something like:

function fakeTemplate() {
    return { then:function(){}}
}
 $ionicModal = {
        fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl').and.callFake(fakeTemplate)
    };

Upvotes: 2

Related Questions