Testing Angular modalInstance within the same controller

Question

I'm using the ui-bootstrap modal window and I'm trying to test a method that fires that modal window. My controller:

app.controller('AddProductController', ['$scope', 'ProductsService', '$uibModal', function ($scope, ProductsService, $uibModal) {
        $scope.product = {};
        $scope.searchCategories = function () {
            ProductsService.getRootCategories().then(function (data) {
                $scope.categories = data.data;
            });
            $scope.modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'categoryContent.html',
                controller: 'AddProductController',
                scope: $scope
            });
            $scope.modalInstance.result.then(function (category) {
                $scope.searchCategory = null;
                $scope.product.category = category;
            }, function () {
            });
        };
        $scope.ok = function(){
            $scope.modalInstance.close($scope.product.category);
        };
        $scope.cancel = function(){
            $scope.modalInstance.dismiss();
    }]);

And my test:

describe("Products Controller", function () {
beforeEach(function () {
    module('productsController');
});

beforeEach(function () {
    var ProductsService, createController, scope, rootScope,

    module(function ($provide) {
        $provide.value('ProductsService', {
            getRootCategories: function () {
                return {
                    then: function (callback) {
                        return callback({data: {name: 'category1'}});
                    }
                };
            },
        });

        $provide.value('$uibModal', {
            open : function(){
                return {
                    then: function (callback) {
                        return callback({data: {name: 'category1'}});
                    }
                };
            }
        });

        return null;
    });
});
describe('AddProductController', function () {
    beforeEach(function () {
        inject(function ($controller, _$rootScope_, _ProductsService_) {
            rootScope = _$rootScope_;
            scope = _$rootScope_.$new();
            ProductsService = _ProductsService_;
            createController = function () {
                return $controller("AddProductController", {
                    $scope: scope,
                });
            };
        });
    });
    it('calling searchCategories should make $scope.categories to be defined', function () {

        createController();
        expect(scope.categories).not.toBeDefined();  
        scope.searchCategories();
        expect(scope.categories).toBeDefined();
    });
});

});

All my tests pass,except this one, where I get TypeError: $scope.modalInstance.result is undefined. Any clues?

Aleksey L. · Accepted Answer · 2016-06-18 10:38:20Z

1

It seems you're not defining result in your mock modal. Try something like this:

$provide.value('$uibModal', {
    open: function () {
        return {
            result : {
                then: function (callback) {
                    return callback({ data: { name: 'category1' } });
                }
            }
        };
    }
});

edited Jun 18, 2016 at 10:38

answered Jun 18, 2016 at 10:28

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing Angular modalInstance within the same controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related