Issue with jquery.wrap inside the directive

[Raghu Krishna]

Hi,

I have a directive, which wraps a div to the element injected. Below is the directive code. When i run in browser every thing is working fine. But while doing unit testing with chrome, the compileNodes of angularjs is called again and again and the test case is failing. Below is the directive code and test case. Check the attachment for the error coming in the developer console. 

app.directive('uyPhoto', ['galleryService', function (galleryService) {
        return {
            restrict: 'E',
            scope: false,
            compile: function (element, attributes) {
                $(element).wrap('<div style="position:relative;width:100%;height:100%;"></div>');
                return {
                    pre: function (scope, element) {
                        scope.cellHeight = 0;
                        scope.cellWidth = 0;

                        var onResize = function (width, height) {
                            scope.cellWidth = Math.floor(width / 12);
                            scope.cellHeight = Math.floor(height / 12);
                        };
                        onResize(galleryService.getSize().width, galleryService.getSize().height);
                    },


                    post: function (scope, element) {


                    }
                };
            }
        };
    }]);

it('- photo should initialize grid system', function () {
        var template = '<div style="width:1800px;height:600px;"><uy-photo isswac="false"></uy-photo></div>';
        var element = $compile(template)($scope);
        $scope.$digest();
        var resultString = element.html();

        expect($scope.cellWidth).toBe(150);
        expect($scope.cellHeight).toBe(50);
    });

Please suggest me is it an issue with my code or ?

Thanks in advance,

Raghu Krishna