Angular 测试 Bootstrap Compose $modal 控制器

Question

下面是我正在尝试进行单元测试但运气不佳的控制器的一部分代码。我不断收到错误消息错误：spyOn 找不到要监视帐户 () 的对象。

控制器

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

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

测试

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) {
            spyOn($modal, 'open');
            spyOn(scope.modalInstance, "account");
        }));

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

    });

Answer 1

问题是，在第二个 beforeEach 中，您正试图监视 scope.modalInstance，而这样的字段不存在。所以，茉莉找不到可以窥探的对象。

另一个问题是你使用了模态的 result promise，所以你告诉你的 mock return 为了不得到 TypeError。

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

下一步将是 return 您可以在单元测试中解决的承诺，以便您可以在解决或拒绝时验证正确的行为。您可以模拟模式 window 以这种方式关闭。

阅读 Jasmine docs 中有关间谍的更多信息。

另请注意，您不必将模态服务注入控制器（我指的是 $modal: _$modal_ 行）。服务是单例的。当你监视它的任何实例时，它会到处监视它。

Angular 测试 Bootstrap Compose $modal 控制器

Angular Test for Bootstrap $modal controller componant

unit-testing

angularjs