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

Unit testing $http resolve in controller

本文关键字：http 解析 控制器 单元测试      更新时间：2023-09-26

我的控制器测试需要帮助。我有一个使用ui路由器的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');
          }
        });
    }]);

示例控制器.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'}
       // ]
  }]);

示例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调用并返回对象数组的服务。

测试$state的resolve方法不是你想要做的。它是angular的一部分，它有适当的测试。

你在测试中应该关注的是你的应用程序的逻辑。应该有一个部分用于测试ExampleService（get返回promise，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');
  }));

您需要手动实例化示例数据。我遇到了同样的问题，所以我用这个方法来解决它。对你来说也很好。

 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
        });
      });
相关文章：