$injector:unpr Unknown provider: modalInstanceProvider <- modalInstance

Question

I keep getting Error: [$injector:unpr] Unknown provider: modalInstanceProvider <- modalInstance I feel like im so close to being able to move on from this test but I keep getting stuck. If anyone one has any tips I would appreciate it. I have spent a few days on this test without a ton of luck.

Thanks

Ctrl Test

describe('DeleteModalController', function () {
    //make module avalible to tests
    beforeEach(module('pb.accounts.controllers'));
    beforeEach(module('ui.router'));
    beforeEach(module('ui.bootstrap'));

    var $controller;
    var mockGlobal = { activeOrganizationId: 0 };
    var mockStateParams = { orgId: 1, entityId: null };
    var mockForm = {};
    var mockState = {};

    var mockAccountSrv = {
        account: {
            entityId: 2,
            page: 19,
            length: 200
        },
        accounts: {
            entityId: 2,
            page: 19,
            length: 200
        }
    };

    // instantiating controller
    beforeEach(inject(function (_$controller_) {
        $controller = _$controller_;
    }));

    describe("Account service delete() function", function () {
        var controller, scope;


        // sets scope of controller before each test
        beforeEach(inject(function ($rootScope, _$modal_, _$modalInstance_) {
            scope = $rootScope.$new();
            controller = $controller('DeleteModalController',
                {
                    $modal: _$modal_,
                    modalInstance: _$modalInstance_,
                    $scope: scope,
                    $stateParams: mockStateParams,
                    $state: mockState,
                    global: mockGlobal,
                    accountService: mockAccountSrv
                });
        }));


        it("make sure service promise resolves", function () {
            scope.delete(mockAccountSrv.account);
            spyOn(modalInstance, "close");
            scope.$digest();

            expect(modalInstance.close).toHaveBeenCalled();
        });

    });

});

DeleteCtrl

angular.module('pb.accounts.controllers')
.controller('DeleteModalController', ['global', '$scope', 'accountService', '$modal', '$modalInstance', 'account', function (global, $scope, accountService, $modal, $modalInstance, account) {
    $scope.account = account;

    $scope.delete = function (account) {
        global.setFormSubmitInProgress(true);
        accountService.deleteAccount(global.activeOrganizationId, account.entityId).then(function () {
            global.setFormSubmitInProgress(false);
            $modalInstance.close();
        },
        function (errorData) {
            global.setFormSubmitInProgress(false);
        });
    };

    $scope.cancel = function () {
        global.setFormSubmitInProgress(false);
        $modalInstance.dismiss('cancel');
    };
}]);

Accounts Ctrl

angular.module('pb.accounts.controllers')
    .controller('AccountsController', ['$scope', '$q', '$stateParams', '$state', '$timeout', '$modal', 'global', 'accountService', function ($scope, $q, $stateParams, $state, $timeout, $modal, global, accountService) {

        var init = function () {
            global.activeOrganizationId = $stateParams.orgId || 0;
            $scope.global = global;
            $scope.partialViews = {
                form: "/app/accounts/views/_form.html"
            };

            $scope.currentEntityId = $stateParams.entityId || 0;
        };

        init();

        $scope.getAll = function (page, length) {

            accountService.getAccounts(global.activeOrganizationId, page, length).then(function (data) {
                $scope.accounts = data;
            });

        };

        $scope.get = function (entityId) {

            accountService.getAccount(global.activeOrganizationId, entityId).then(function (data) {
                $scope.account = data;
            });

        };

        $scope.add = function (form, account) {
            form.submitIfValid(
                function () {
                    return accountService.createAccount(global.activeOrganizationId, account);
                }).then(function (data) {
                    $state.go('accounts.campaigns.list', { orgId: global.activeOrganizationId, accountId: data.entityId });
                });
        };

        $scope.edit = function (form, account) {
            form.submitIfValid(
                function () {
                    return accountService.updateAccount(global.activeOrganizationId, account)
                }).then(function (data) {
                    $state.go('accounts.campaigns.list', { orgId: global.activeOrganizationId, accountId: account.entityId });
                });
        };

        $scope.confirmDelete = function (account) {

            var modalInstance = $modal.open({
                templateUrl: '/app/accounts/views/_delete.html',
                controller: 'DeleteModalController',
                resolve: {
                    account: function () {
                        return account;
                    }
                }
                });


            modalInstance.result.then(function (asset) {
                $scope.getAll(1, 100);
            }, function () {
                console.log('Modal dismissed at: ' + new Date());
            });
        };

    }]);

score 4 · Accepted Answer · edited May 23 '17 at 11:50

$modalInstance is something that gets created as part of $modal call and it is not a global dependency, so you cannot do:

beforeEach(inject(function ($rootScope, _$modal_, _$modalInstance_) {

What you need to do is either create a dummy $modalInstance or a spy that has the same functions as $modalInstance.

Something like this:

modalInstance = {                    // Create a mock object using spies
        close: jasmine.createSpy('modalInstance.close'),
        dismiss: jasmine.createSpy('modalInstance.dismiss'),
        result: {
          then: jasmine.createSpy('modalInstance.result.then')
        }
      };

Lifted from this answer Unit testing a modalInstance controller with Karma / Jasmine

score 0 · Answer 2 · answered Jan 13 '15 at 03:23

I suppose you should use $modalInstance to initialize your controller but not modalInstance

controller = $controller('DeleteModalController', {
    $modal: _$modal_,
    $modalInstance: _$modalInstance_,
    $scope: scope,
    $stateParams: mockStateParams,
    $state: mockState,
    global: mockGlobal,
    accountService: mockAccountSrv
});

$injector:unpr Unknown provider: modalInstanceProvider <- modalInstance

2 Answers2