如何在 AngularJS 中测试具有解析属性的控制器? [英] How can I test a controller with resolve properties in AngularJS?

问题描述

如何测试具有解析属性的控制器?它抛出一个错误:未知提供者:InitProvider，在测试期间，可以理解.如何测试?

How can one test a controller with resolve properties? It throws an error: Unknown provider: InitProvider, during testing, understandably. How can I test it?

我使用路由配置中的 init 属性来加载数据并在控制器实例化时将其传递给控制器​​，因此在加载数据之前路由不会改变.

I use the init property in the route config to load data and pass it along to the controller at controller instantiation so the route doesn't change before data is loaded.

  $routeProvider
    .when('/topic/:topic_id/content/:content_id', {
      templateUrl: 'views/content.html',
      controller: 'ContentCtrl',
    resolve: {
      init: ContentCtrl.init
    }
    });

模式一开始就完全错误吗?

Is the pattern completely wrong in the first place?

'use strict';

var ContentCtrl = ['$scope', '$location', '$routeParams', 'init', function ($scope, $location, $routeParams, init) {

    $scope.contents = init.contents;

  }];

ContentCtrl.init = ['$q', 'app_config', '$log', '$timeout', function ($q, app_config, $log, $timeout) {

    var defer = $q.defer();

    $log.log("ContentCtrl loading..");

    $timeout(function() {
        defer.resolve({contents: [
                                    {message: 'Hello!'}
                                  ]});

        $log.log("ContentCtrl loaded.");

    }, 2000);

    return defer.promise;
}];

angular.module('studentportalenApp').controller('ContentCtrl', ContentCtrl);

我想将整个控制器封装在 .controler('ContentCtrl', function() { ... }) 中，但还没有弄清楚如何正确地进行初始化在路由配置中可用.

I want to encapsulate the whole controller inside .controler('ContentCtrl', function() { ... }), but have yet to figure out how this is done correctly to make the init available in the route configuration.

推荐答案

正如charlietfl 所建议的，最终通过将所有东西都转换为服务来解决.

It was eventually solved by converting everything to services, as suggested by charlietfl.

例子:

路线配置:

//This helper injects a function with the service 
//defined in the initMethod string and returns services.prepare()
var interceptWith = function(initMethod) {
        return [initMethod, function(m) {
                    return m.prepare();
                }];
}

$routeProvider        
    .when('/foobar/', {
        templateUrl: 'foobar.html',
        controller: 'FoobarCtrl',
        resolve: {
            init: interceptWith('FoobarCtrlInit')
        }
    });

foobar 控制器定义:

angular.module('fooApp').controller('FoobarCtrl', ['$scope', 'init', function ($scope, init) {              
            $scope.data = init.data;    
  }])
.service('FoobarCtrlInit', ['$q', '$timeout', function ($q, $timeout) {

        var _prepare = function() {

            var deferred = $q.defer();

            //Fake async loading of data
            $timeout(function() {
                 deferred.resolve({data: ['A','B','C']});
            }, 1000);




            return deferred.promise; 
        }

        return {
            prepare: _prepare
        }
}]);

要对此进行测试，可以这样做:

'use strict';

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

  // load the controller's module
  beforeEach(module('fooApp'));

  var FoobarCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($controller) {
    scope = {};
    CourseCtrl = $controller('FoobarCtrl', {
      $scope: scope,
      init: {data: ['Testdata A', 'B', 'C']}
    });
  }));

  it('should attach a list of data to the scope', function() {
    expect(scope.data.length).toBe(3);
  });
});

这篇关于如何在 AngularJS 中测试具有解析属性的控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！