CODEWITHSUNDEEP
angularjsunit-testingjasmine
ReganPerkins
ReganPerkins

Reputation: 1665

Testing Bootstrap modal in Angular controller

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();
        });

    });

Upvotes: 3

Views: 1108

Answers (1)

PSL
PSL

Reputation: 123739

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

Upvotes: 3

Related Questions