Testing Bootstrap modal in an Angular controller

I've been trying to find a way to test this part of the controller for a few days, but keep getting stuck. Now I get ReferenceError: Can't find the variable: $ modal, but I had it injected, so I'm not sure why it doesn't work. I also know that this test I'm writing doesn't really test anything important, so if you have any suggestions for moving forward, let me know. And thanks to everyone who helped me with the code in 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();
        });

    });

      

+3


source to share


1 answer


You need to set a modal variable 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 enter as well $controller

to be able to use it.

Plnkr

+3


source







All Articles