在 AngularJS 中进行指令单元测试时访问局部变量

Question

我需要测试一些指令并为此获取其局部变量之一以检查其值。该指令本身看起来是这样的：

angular.module('app').directive('favoritesList', function () {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'templates/directives/favoritesListDirective.html',
    controller: function ($scope, $rootScope, $rootElement, $filter, ContactService, ContactFollowerService, Restangular) {

      var listLimit = 100, // in order to prevent favoritesList *overflow*
          followedFilter = {filters: {followed: true}, page_size:listLimit};

      // get Favorites List
      ContactService.provider.getList( followedFilter ) //
        .then(function(result){
          $scope.favorites=result;
        }, function(message){
          console.warn('Cannot get a Favorites List',message);
        });

      ....


    }
  };
});

那么，我怎样才能访问 describe/it 块中的 followedFilter 变量？

Answer 1

我建议拆掉你的控制器，这样你就可以正确地抓住它。尽管可以将控制器从指令中分离出来，但这可能非常困难——最简单的方法是让控制器独立。例如：

(function() {
  'use strict';

  describe('FavouritesListCtrl', function() {

    var $rootScope, $scope, ctrl;
    beforeEach(module('app'));

    beforeEach(inject(function(_$rootScope_, $controller) {
        $rootScope  = _$rootScope_;
        $scope      = $rootScope.$new();

        ctrl = $controller('FavouritesListCtrl',{$scope: $scope});
    }));

    describe('FavouritesListCtrl', function() {
        it('should be defined', function() {
            expect(ctrl).toBeDefined();
        });
    });

  });
});

基于此测试，您希望控制器定义如下：

(function() {
  'use strict';

  angular
    .module('app')
    .component('favoritesList', {
      bindings: {},
      controllerAs: "vm",
      controller: "FavouritesListCtrl",
      templateUrl: 'example.html'
    });
}());

这里我使用的是组件而不是指令，但它们的关系非常密切。如果你想测试 followedFilter，例如在初始化中：

describe('init', function() {
  it('followedFilter should be set to ', function() {
    expect(ctrl.followedFilter).toBeDefined();
  });
});

这会期望 followedFilter 在控制器中这样定义：

function FavouritesListCtrl() {
  var vm = this;
  vm.followedFilter = {
    //values
  };
}

在 AngularJS 中进行指令单元测试时访问局部变量

Access to the local variable while directive unit testing in AngularJS

angularjs

unit-testing

angularjs-directive

karma-runner

local-variables