控制器中的单元测试 $http 解析

Question

我需要控制器测试方面的帮助。我有一个使用 ui-router 的resolve。在我的测试中，我需要弄清楚如何处理resolve 的exampleData。

config.js

angular.module('myModule')
  .config(['$stateProvider', '$urlRouterProvider',

    function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('site', {
          abstract: true,
          resolve: {
            exampleData: function(ExampleService) {
              // ExampleService.get() makes an $http call
              return ExampleService.get();
            }
          },
          // etc
        })
        .state('example', {
          parent: 'site',
          url:'/example',
          controller: 'ExampleCtrl as example',
          templateProvider: function($templateCache) {
            return $templateCache.get('views/example.html');
          }
        });

    }]);

example-controller.js

angular.module('myModule')
  .controller('ExampleCtrl', ['exampleData',
     function(exampleData) {

       var self = this;
       self.exampleData = exampleData;

       // self.exampleData should output something like
       // [
       //   {id: 1, title:'something'},
       //   {id: 2, title:'something'},
       //   {id: 3, title:'something'}
       // ]

  }]);

example-controller.test.js

   describe('Controller: ExampleCtrl', function() {
      beforeEach(module('myModule'));

      var ctrl;

      beforeEach(inject(function($controller) {
        ctrl = $controller('ExampleCtrl');
      }));

      describe('initialization', function() {
        beforeEach(function() {});

        it('should exist', function() {
          expect(!!ctrl).toBe(true);
        });

        it('should ...', function() {
          // do something
        });
      });

当我运行测试时，我收到以下错误：

Unknown provider: exampleDataProvider <- exampleData <- ExampleCtrl

我的问题是：我该怎么做才能测试我的ExampleCtrl 中的resolve？ ExampleService.get() 是一个服务，它进行 $http 调用并返回对象数组。

Answer 1

您需要手动实例化示例数据。我遇到了同样的问题，所以我使用这种方法来解决它。也适合你。

 describe('Controller: ExampleCtrl', function() {
      beforeEach(module('myModule'));

      var ctrl,exampleData;

      beforeEach(inject(function($controller,ExampleService) {
        exampleData = ExampleService.get();
        ctrl = $controller('ExampleCtrl',{exampleData});
      }));

      describe('initialization', function() {
        beforeEach(function() {});

        it('should exist', function() {
          expect(!!ctrl).toBe(true);
        });

        it('should ...', function() {
          // do something
        });
      });

Answer 2

测试$state 的resolve 方法不是您想要做的。它是 Angular 的一部分，并且有适当的测试。

您应该在测试中关注应用的逻辑。应该有一个部分用于测试ExampleService（get 返回一个承诺，get 发出一个 http 请求等）和测试ExampleCtrl，这应该确保控制器正确处理数据。但是解决依赖关系不是应该测试的。

imo，在这种情况下应该是什么解决方案是替换 exampleData 解决以进行测试。

 var exampleData = [
      {id: 1, title:'something'},
      {id: 2, title:'something'},
      {id: 3, title:'something'}
    ];
  module('myModule', function($provide) {
    $provide.value('exampleData', exampleData);
  });

  beforeEach(inject(function($state) {
    ctrl = $controller('ExampleCtrl');
  }));