Question

我已创建指令，如果图像的src不可用，则会为图像创建链接：

＆＃13;

var app = angular.module('myApp', []);

app.directive('defaultImage', function() {
  return {
    restrict: 'EA',
    link: function(scope, element, attrs) {

      var url = 'http://placehold.it/' + element.attr('default-image');
      element.bind('error', function() {
        element.addClass('default-image');
        element.attr('src', url);
      })
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">

  <img ng-src="/logo.jpg" default-image="103x89" alt="Logo!" />

</div>

＆＃13;

它按预期工作，但我想要的是为这个指令创建一个测试单元，我尝试了很多方法，但我无法使测试正常工作，测试代码如下：

＆＃13;

'use strict';

describe('Directive: defaultImage', function () {

  var element, compile, scope;

  // load the directive's module
  beforeEach(module('myApp'));

  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope;
    compile = $compile;
  }));

  function compileImage(markup, scope){
    var el = compile(markup)(scope);
    scope.$digest();
    return el;
  }

  it('should make image with default image src link', inject(function () {
    var image = compileImage('<img ng-src="/logo.jpg" default-image="200x48" alt="Default Image!" class="img"/>', scope);
    expect(image.attr('src')).toEqual('http://placehold.it/200x48');
  }));
});

＆＃13;

Thanx任何建议，

Answer 1

您正在绑定指令

中的错误事件

   element.bind('error', function() {
        element.addClass('default-image');
        element.attr('src', url);
   })

然而，上面的代码永远不会在您的测试中被触发，因此它总是会失败。只是在测试中手动触发错误将解决问题。

it('should make image with default image src link', inject(function() {
    var image = compileImage('<img ng-src="/logo.jpg" default-image="200x48" alt="Default Image!" class="img"/>', scope);
    image.error(); // Trigger the error manually
    expect(image.attr('src')).toEqual('http://placehold.it/200x48');
}));

您可以从任何浏览器调试您的业力测试

打开浏览器并导航至http://localhost:9876/debug.html（默认的业力配置，可能会有所不同）
启动开发人员工具并在指令和指令测试中放置断点
刷新
将触及断点

通过这种方法，您可以更轻松地缩小测试中的任何问题。

干杯

angularjs中的测试指令

1 个答案: