单元测试angularjs指令与手表元素高度

我打算单元测试使用茉莉花的角度指令。我的指令看起来像这样单元测试angularjs指令与手表元素高度

angular.module('xyz.directive').directive('sizeListener', function ($scope) { 
return { 
    link: function(scope, element, attrs) { 
     scope.$watch(
      function() { 
       return Math.max(element[0].offsetHeight, element[0].scrollHeight); 
      }, 
      function(newValue, oldValue) { 
       $scope.sizeChanged(newValue); 
      }, 
      true 
     ); 
    } 
}; 
});

我的单元测试情况如下

describe('Size listener directive', function() { 

var $rootScope, $compile, $scope, element; 

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

    element = angular.element('<span size-listener><p></p></span>'); 
    $compile(element)($scope); 
    $scope.$digest(); 
})); 

describe("Change in size", function() { 

    it("should call sizeChanged method", function() { 

     element[0].offsetHeight = 1; 
     $compile(element)($scope); 
     $scope.$digest(); 
     $scope.$apply(function() {}); 

     expect($scope.sizeChanged).toHaveBeenCalled(); 
    }); 

}); 
});

的代码工作正常。但单元测试失败。手表功能被调用，但手表中的元素[0] .offsetHeight总是返回0.我们如何更新元素，以便手表可以观察新的高度。有没有一种方法可以测试，因为我们在这里没有真正的DOM。请指导我进行单元测试需要完成的更改。

来源

2016-08-01 Adithya Puram

获取元素的offsetHeight，它需要在页面上，这样你就需要把它添加到文档：

it("should call sizeChanged method", function() { 
    element[0].style.height = '10px'; 

    $compile(element)($scope); 
    angular.element($document[0].body).append(element); 
    $scope.$apply(); 

    expect($scope.sizeChanged).toHaveBeenCalled(); 
});

顺便说一句，offsetHeight是只读属性，以便使用style.height 。欲了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

这篇文章帮我找到了答案：Set element height in PhantomJS

来源

2016-10-04 09:55:45 pedroto

单元测试angularjs指令与手表元素高度

回答

相关问题