Testing Bootstrap modal in Angular controller

Question

I have been trying to find a way of testing this controller part for a few days but keep getting stuck. Now I get a ReferenceError: Can't find variable: $modal but I have it injected so im not sure why its not working. I also know that this test I am writing doesn't really test anything important so if you have any suggestions about moving forward please let me know. And thank you to anyone who has helped me on code throughout this controller

Code:

$scope.confirmDelete = function (account) {

        var modalInstance = $modal.open({
            templateUrl: '/app/accounts/views/_delete.html',
            controller: function (global, $scope, $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');
                };
            },
            resolve: {
                account: function () {
                    return account;
                }
            }
        });

Test:

describe("confirmDelete() function", function () {
        var controller, scope;

        // sets scope of controller before each test
        beforeEach(inject(function ($rootScope, _$modal_) {
            scope = $rootScope.$new();
            controller = $controller('AccountsController',
                {
                    $scope: scope,
                    $stateParams: mockStateParams,
                    $state: mockState,
                    // below: in order to call the $modal have it be defined and send on the mock modal? 
                    $modal: _$modal_,
                    //modalInstance: mockModalInstance,
                    global: mockGlobal,
                    accountService: mockAccountSrv
                });
        }));

        beforeEach(inject(function ($modal, $q) {
            spyOn($modal, 'open').and.returnValue({
                result: $q.defer().promise
            });
        }));

        it("make sure modal promise resolves", function () {
            scope.confirmDelete(mockAccountSrv.account);
            expect($modal.open).toHaveBeenCalled();
        });

    });

have you looked here? http://stackoverflow.com/a/21370703/1464112 — scniro, Jan 12 '15 at 01:19
I have, that one and this one http://stackoverflow.com/questions/22905581/unit-test-service-that-returns-promise-angularjs-jasmine have helped me a lot but I cant seem to make the puzzle pieces fit together — ReganPerkins, Jan 12 '15 at 01:22

PSL · Accepted Answer · 2015-01-12T01:44:19.980

3

You need to set modal to a variable in order to be able to use it.

i.e

describe("confirmDelete() function", function () {
     var controller, scope, $modal; //Initialize it here

//....

beforeEach(inject(function ($rootScope, _$modal_, $controller) {
      $modal = _$modal_; //Set it here

And you need to inject $controller as well in order to be able to use it.

Plnkr

edited Jan 12 '15 at 01:44

answered Jan 12 '15 at 01:35

PSL

123,204
21
253
243

I thought it might be something like that but if I add it in I get TypeError: 'undefined' is not an object (evaluating '$modal.open') – ReganPerkins Jan 12 '15 at 01:43
You need to inject `$controller` as well. Check my demo. Keep your test very simple and fix it first fixing all reference issues, typos etc.. and then improve the test and go from there i'd suggest. – PSL Jan 12 '15 at 01:43
I thought I was never going to get through that. Thank you! Now I just need to stop making newbie errors. – ReganPerkins Jan 12 '15 at 01:52

Testing Bootstrap modal in Angular controller

1 Answers1