Compile nested directives within unit test in Angular

Question

I have a nested custom directive within the template of a custom directive. Something like:

customDirective definition

<custom-directive></custom-directive>

customDirective.js

angular.module('example')
   .directive('customDirective', function() {
      return {
         restrict: 'E',
         replace: true,
         transclude: true,
         templateUrl: 'directives/customDirective.html'
         link: function(scope, element, attrs) {}
      };
   });

Inside 'directives/customDirective.html

<div class="customDirective">
    <!-- do a bunch of stuff-->

    <!-- but wait, i have an image with a custom-fallback-src directive -->
    <img src="image.jpg" custom-fallback-src='newImage.jpg' />
</div>

customFallbackSrc.js directive

angular.module('example')
   .directive('customFallbackSrc', function() {
      return {
         restrict: 'A',
         link: function(scope, element, attrs) {

           // if image throws an error, use fallback image
           element.bind('error', function() {
              attrs.$set('src', attrs.customFallbackSrc);
           });

         }
      };
   });

Within my unit test for customDirective, how can I properly compile the directive to include any nested directives?

Travis · Accepted Answer · 2015-07-07 03:50:48Z

0

If you wanted full coverage I believe your best strategy would be to:

Write unit tests for customDirective that test it's core functionality. It is very sparse in the example though, so how necessary this is, I'm not sure.
Write unit tests for customFallbackSrc that test it's core functionality. Based on the example provided, you should be testing for two cases:
- That the original image does not get replaced if it loads.
- That the fallback image loads when there is an error loading the original image .
Write integration tests using Protractor to cover the relationship between the two.

answered Jul 7, 2015 at 3:50

Travis

5,0712 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1364910 Over a year ago

This right here! There is nothing in the implementation details of either directive that sets up any sort of contract between the two. Two unit tests and an optional integration test between the two is definitely the way to go.

Collectives™ on Stack Overflow

Compile nested directives within unit test in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related