Question

我正在尝试为以下AngularJS指令中定义的toggleDetails函数编写单元测试：

angular.module('hadoopApp.cluster.cluster-directive', [])

.directive('cluster', [function() {
  return {
    templateUrl:'components/cluster/cluster.html',
    restrict: 'E',
    replace: true,
    scope: {
      clusterData: '=',
      showDetails: '='
    },
    link: function(scope, element, attrs) {
      scope.toggleDetails = function() {
        console.log('Test');
        scope.showDetails = !scope.showDetails;
      };
    },
    // Default options 
    compile: function(tElement, tAttrs){
      if (!tAttrs.showDetails) { tAttrs.showDetails = 'false'; }
    }
  };

}]);

这是单元测试：

'use strict';   
describe('hadoopApp.cluster module', function() {
  // Given
  beforeEach(module('hadoopApp.cluster.cluster-directive'));    

  var compile, mockBackend, rootScope;  
  beforeEach(inject(function($compile, $httpBackend, $rootScope) {
    compile = $compile;
    mockBackend = $httpBackend;
    rootScope = $rootScope;
  }));

  var dummyCluster;
  beforeEach(function() {
    dummyCluster = {
      id:"189",
      name:"hadoop-189",
      exitStatus:0
    };    
    mockBackend.expectGET('components/cluster/cluster.html').respond(
      '<div><div ng-bind="clusterData.name"></div></div>');
  });

  it('should toggle cluster details info', function() {
    var scope = rootScope.$new();
    scope.clusterData = dummyCluster;

    // When
    var element = compile('<cluster' +
      ' cluster-data="clusterData" />')(scope);
    scope.$digest();
    mockBackend.flush();

    // Then
    var compiledElementScope = element.isolateScope();
    expect(compiledElementScope.showDetails).toEqual(false);

    // When
    console.log(compiledElementScope);
    compiledElementScope.toggleDetails();

    // Then
    expect(compiledElementScope.showDetails).toEqual(true);
  });

  afterEach(function() {
    mockBackend.verifyNoOutstandingExpectation();
    mockBackend.verifyNoOutstandingRequest();
  });
});

调用compiledElementScope.toggleDetails（）时测试失败，因为toggleDetails函数未定义：

TypeError: undefined is not a function

在compiledElementScope中打印隔离范围的内容我可以看到实际上该函数未包含在对象中。

因此，看起来toggleDetails函数不包含在隔离范围内，但我不知道为什么。

Answer 1

如果在指令中使用compile函数，则忽略link函数。您应该在compile方法中返回该函数：

        compile: function (tElement, tAttrs) {

            if (!tAttrs.showDetails) {
                tAttrs.showDetails = 'false';
            }
            return {
                post: function (scope, element, attrs) {
                    console.log('Test');
                    scope.toggleDetails = function () {
                        console.log('Test');
                        scope.showDetails = !scope.showDetails;
                    };
                }
            };
        }

同样，为了使测试工作，您应该添加：

    scope.showDetails = false;

绑定到指令（因为你需要两个值）：

    var element = compile('<cluster' +
        ' cluster-data="clusterData" show-details="showDetails" />')(scope);

Jsfiddle ：http://jsfiddle.net/phu7sboz/

AngularJS指令单元测试中的未定义函数

1 个答案: