Question

我计划使用茉莉花单元测试角度指令。我的指令看起来像这个

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();
    });

});
});

代码工作正常。但是单元测试失败了。 watch函数被调用但是watch中的element [0] .offsetHeight总是返回0.我们如何更新元素以便watch可以观察到新的高度。有没有办法测试这个，因为我们这里没有真正的DOM。请指导我进行单元测试需要进行的更改。

Answer 1

要获取元素的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

单元测试angularjs指令与元素高度上的监视

1 个答案: