angularjs - 要素の高さを監視する angularjs ディレクティブの単体テスト

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 がないため、これをテストする方法さえありますか。単体テストで行う必要がある変更について教えてください。