25

编辑:这篇文章末尾的快速和肮脏的解决方案

我正在使用来自 AngularUI-Bootstrap 的模态窗口,其方式与网站上的解释方式相同,只是我拆分了文件。因此我有:

调用控制器.js:

$scope.delete = function () {
    if ($scope.selected.length > 0) {
        // [...]
        // preparing data
        // [...]
        var modalInstance = $modal.open({
            templateUrl: 'views/modalView.html',
            controller: 'modalCtrl',
            resolve: {
                itemArray: function () {
                    return $scope.selected;
                }
            }
        });
        modalInstance.result.then(function (confirm) {
            if (confirm === true) {
                // [...]
                // treat
                // [...]
            }
        });
    }
};

模态控制器.js:

myAppControllers.controller('modalCtrl',
    function ($scope, $modalInstance, itemArray) {

        $scope.accept = function () {
            $modalInstance.close(true);
        };

        $scope.reject = function () {
            $modalInstance.close(false);
        };

        $scope.itemArray = itemArray;

    });

当我使用 Karma 测试此代码(在 karma 配置文件中加载ui-bootstrap-tpls.min.js文件)时,我收到以下错误: 错误:[$injector:unpr] [ http://errors. angularjs.org/1.2.15-build.2389+sha.c5f2f58/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance ] 1在 Error (native),这意味着茉莉花没有设法找到 $modalInstance 的提供者。

我什至没有在这个控制器上测试东西,还没有,但这是我的 jasmine 测试文件:

testModalController.js:

describe('Controller: modalCtrl', function () {

    beforeEach(module('myApp'));

    var Ctrl;
    var scope;

    // Initialize the controller and a mock scope
    beforeEach(inject(
        function ($controller, $rootScope) {
            scope = $rootScope.$new();

            Ctrl = $controller('modalCtrl', { $scope: scope });
        })
    );

    describe('Initial state', function () {
        it('should instantiate the controller properly', function () {
            expect(Ctrl).not.toBeUndefined();
        });

        it('should initialize its values properly', function () {

        });
    });

});

你对这个问题有任何线索吗?这不是我使用(和测试)的第一个“外部”模块,我做了与其他模块相同的事情,只是这次它不起作用,我不知道为什么。

===========================================

编辑:快速且可能很脏的解决方案:

好的,所以基于 Jasmine 控制器实例化中的作用域模拟方法,我想出了如何“解决”我的问题,但它可能很脏,所以如果你找到更好的方法来做我想做的事,请随时发表评论.

testModalController.js:

describe('Controller: modalCtrl', function () {

    beforeEach(module('myApp'));

    var Ctrl;
    var scope;
    var modalInstance;

    // Initialize the controller and a mock scope
    beforeEach(inject(
        function ($controller, $rootScope, _$modal_) {
            scope = $rootScope.$new();
            modalInstance = _$modal_.open({
                templateUrl: 'views/modalView.html'
            });

            Ctrl = $controller('modalCtrl', {
                $scope: scope,
                $modalInstance: modalInstance,
                itemArray: function () { return ['a', 'b', 'c']; }
            });
        })
    );

    describe('Initial state', function () {
        it('should instantiate the controller properly', function () {
            expect(Ctrl).not.toBeUndefined();
        });

        it('should initialize its values properly', function () {

        });
    });

});

这样,Jasmine 不再搜索提供者,因为您已经注入了应该需要这些提供者的项目。它有效,但我相信它可以以更好的方式完成......

4

3 回答 3

65

我通过创建模拟modalmodalInstance对象并验证它们是否已被我的控制器代码调用来解决这个问题。由于modal并且modalInstance是第三方库的一部分,因此我们没有责任测试它们是否正常工作 - 相反,我们有责任测试调用该库的代码是否正常工作。

使用您的示例:

describe('Controller: modalCtrl', function () {

  beforeEach(module('myApp'));

  var Ctrl;
  var scope;
  var modalInstance;

  // Initialize the controller and a mock scope
  beforeEach(inject(
    function ($controller, $rootScope) {     // Don't bother injecting a 'real' modal
      scope = $rootScope.$new();
      modalInstance = {                    // Create a mock object using spies
        close: jasmine.createSpy('modalInstance.close'),
        dismiss: jasmine.createSpy('modalInstance.dismiss'),
        result: {
          then: jasmine.createSpy('modalInstance.result.then')
        }
      };
      Ctrl = $controller('modalCtrl', {
        $scope: scope,
        $modalInstance: modalInstance,
        itemArray: function () { return ['a', 'b', 'c']; }
      });
    })
  );

  describe('Initial state', function () {
    it('should instantiate the controller properly', function () {
      expect(Ctrl).not.toBeUndefined();
    });

    it('should close the modal with result "true" when accepted', function () {
      scope.accept();
      expect(modalInstance.close).toHaveBeenCalledWith(true);
    });

    it('should close the modal with result "false" when rejected', function () {
      scope.reject();
      expect(modalInstance.close).toHaveBeenCalledWith(false);
    });
  });
});

这样一来,我们就不需要对 Angular-UI 对象有任何依赖,而且我们的单元测试很好而且隔离。

于 2014-04-16T17:55:34.513 回答
7

代替:

modalInstance = {                    // Create a mock object using spies
  close: jasmine.createSpy('modalInstance.close'),
  dismiss: jasmine.createSpy('modalInstance.dismiss'),
  result: {
    then: jasmine.createSpy('modalInstance.result.then')
  }
};

这可以写成:

modalInstance = jasmine.createSpyObj('modalInstance', ['close', 'dismiss', 'result.then']);

也没有 $modalInstance 现在是 $uibModalInstance 所以上面的每个“modalInstance”都应该替换为“uibModalInstance”

于 2016-04-11T23:13:44.960 回答
2

+1 为 fiznool 的回答。它是正确的,应该选择..

不过,我想指出一件事,它在此处呈现的方式是不可维护的。

由于这是有角度的,我建议使用它..

angular.module('...').service('$modalInstance', function(){
   ... define spies and such 
})

将使您的代码更加模块化和通用。只需在spec具有上述内容的某处添加一个文件,并确保将其包含在您的karma.conf

如果您想确保它仅在特定测试中加载,只需给它一个唯一的模块名称并将其添加到module调用中beforeEach

于 2015-09-25T21:08:21.510 回答