Angular + Jasmine: Wie testen Sie eine Richtlinie, die auf HTML außerhalb der Richtlinie beruht?

Question

Ich habe eine Richtlinie, die ein Element auf der Seite mit einem Selektor klont und bewegt den Klon in eine andere Position auf der Seite:

(function() { 
    'use strict'; 

    function ctAnimatedClone($timeout) { 
    var directive = { 
     restrict: 'E', 
     scope: { 
     visible: '=', 
     ... 
     }, 
     link: function(scope, element) { 
     ... 

     function cloneAndAnimateElement() { 
      originalElement = angular.element(scope.elementSelector).first(); 
      clone = originalElement.clone(); 
      originalPosition = originalElement[0].getBoundingClientRect(); 

      clone.addClass('easeIn'); 
      originalElement.css({ visibility: 'hidden' }); 
      element.prepend(clone); 

      var baseStyles = { 
      opacity: 0.5, 
      visibility: 'visible', 
      position: 'absolute' 
      }; 
      var styles = angular.extend(baseStyles, clonePositioning()); 
      clone.css(styles); 

      $timeout(function() { 
      clone.css({ 
       opacity: 1.0, 
       position: 'absolute', 
       top: scope.clonedElementPositionOffset.top, 
       left: scope.clonedElementPositionOffset.left, 
       marginLeft: '-' + (originalPosition.width/2) + 'px' 
      }); 
      }); 
     } 
     } 
    }; 

    return directive; 
    } 

    angular 
    .module('crowdtap.animated-clone') 
    .directive('ctAnimatedClone', ctAnimatedClone); 
})(); 

Ich versuche, es zu testen Jasmin verwenden, aber es scheitert mit : Typeerror: Cannot set property 'visible' of undefined

/* global expect */ 
/* global inject */ 

describe('animated clone directive', function() { 
    "use strict"; 

    var $compile, $rootScope; 

    var elementHtml = "<div class='test-div'></div><ct-animated-clone visible='false' element-selector=\"'.test-div'\" cloned-element-position-offset=\"{ top: '50%', left: '50%' }\" fades-away-on-close='false' closed='false' stationary='false'></ct-animated-clone>"; 
    // 

    beforeEach(function() { 
    module('crowdtap.animated-clone'); 

    inject(function(_$compile_, _$rootScope_) { 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
    }); 
    }); 

    it('moves the element when visible changes from false to true', function() { 
    var element = $compile(elementHtml)($rootScope); 
    $rootScope.$digest(); 
    var scope = element.isolateScope(); 
    scope.visible = true; //<------------------------------------------------ 
    scope.$apply(); 

    expect(element.css()).toContain("top: 10%"); 
    }); 
}); 

Wie teste ich eine Richtlinie, die ein anderes HTML-Element erfordert auf der Seite zu sein?

Answer 1

Ich habe schließlich die Tests mit diesem vorbei:

describe('animated clone directive', function() { 
    "use strict"; 

    var $compile, $rootScope, $timeout, elementHtml, element; 

    beforeEach(function() { 
    module('crowdtap.animated-clone'); 

    inject(function(_$compile_, _$rootScope_, _$timeout_) { 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
     $timeout = _$timeout_; 
    }); 

    var dummyDiv = "<div class='test-div' style='width: 10px; position: absolute; top: 1px; left: 2px;'></div>"; 
    angular.element('body').append(dummyDiv); 
    }); 

    afterEach(function() { 
    angular.element('body > .test-div').remove(); 
    }); 

    ... 

    describe('when stationary is false', function() { 
     beforeEach(function() { 
     elementHtml = "<ct-animated-clone visible='false' element-selector=\"'.test-div'\" cloned-element-position-offset=\"{ top: '50%', left: '50%' }\" fades-away-on-close='false' closed='false' stationary='false'></ct-animated-clone>"; 
     element = $compile(elementHtml)($rootScope); 
     $rootScope.$digest(); 
     var scope = element.isolateScope(); 
     scope.visible = true; 
     scope.$apply(); 
     }); 

     it('first positions the clone on top of the element', function() { 
     var clone = element.children('.test-div'); 
     var cloneStyles = clone.attr('style'); 

     expect(cloneStyles).toContain("position: absolute"); 
     expect(cloneStyles).toContain("top: 1px"); 
     expect(cloneStyles).toContain("left: 2px"); 
     expect(cloneStyles).toContain("margin-left: 0px"); 
     expect(cloneStyles).toContain("opacity: 0.5"); 
     }); 

    }); 
    }); 
});