javascript - 在 Angular 的单元测试中编译嵌套指令

Question

我在自定义指令的模板中有一个嵌套自定义指令。像这样的东西:

自定义指令定义

<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) {}
      };
   });

在“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 指令

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);
           });

         }
      };
   });

在 customDirective 的单元测试中，如何正确编译指令以包含任何嵌套指令？

Answer 1

如果您想要全面覆盖，我相信您最好的策略是:

1. 为 customDirective 编写单元测试来测试其核心功能。但示例中的内容非常稀疏，因此我不确定这有多大必要。
2. 为 customFallbackSrc 编写单元测试来测试其核心功能。根据提供的示例，您应该测试两种情况:
   • 原始图像加载后不会被替换。
   • 当加载原始图像时出现错误时，会加载后备图像.
3. 使用 Protractor 编写集成测试来涵盖两者之间的关系。