在 Angular 控制器中测试 Bootstrap 模式

Question

几天来我一直在尝试寻找一种方法来测试这个控制器部分，但一直卡壳。现在我得到一个 ReferenceError: Can't find variable: $modal 但我已经注入了它所以我不确定为什么它不起作用。我也知道我正在写的这个测试并没有真正测试任何重要的东西，所以如果你有任何关于前进的建议，请告诉我。并感谢在整个控制器中帮助我编写代码的任何人

代码：

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

测试：

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

    });

Answer 1

您需要将模态设置为变量才能使用它。

即

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

//....

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

您还需要注入 $controller 才能使用它。

Plnkr

在 Angular 控制器中测试 Bootstrap 模式

Testing Bootstrap modal in Angular controller

angularjs

unit-testing

jasmine