2

我打算使用茉莉花对角度指令进行单元测试。我的指令看起来像这样

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。请指导我需要通过单元测试完成的更改。

4

1 回答 1

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

这篇文章帮我找到了答案：在 PhantomJS 中设置元素高度

于 2016-10-04T09:55:45.643 回答