Question

我在测试角度指令时遇到了一些麻烦。这就是我遇到的问题。我已经设置了业力来运行我的测试。似乎指令中的链接代码（带有控制台日志的部分＆＃34;开始计算＆＃34;）从未实际触发。我不确定我做错了什么。测试按照我的预期进行 - 除非我开始使用imageNode.style - 那里什么也没有。没有为图像指定样式。为什么指令代码没有被触发？有什么想法吗？

这是我的模块代码。

(function() {
  'use strict';

  // sets narrower side of image to width of parent div
  // used in sjwUserImage
  angular.module('sjw.util', [])
    .directive('imgFit', function() {
      return {
        restrict: 'A',
        link: function(scope, element, attr) {
          element.bind('load', function(e) {
            console.log('kicking off calculations...');
            console.log(element);
            var parentWidth = element.parent().width();

            if (this.naturalHeight > this.naturalWidth) {
              // not horizontal or square
              this.width = parentWidth;
            }
            else {
              this.height = parentWidth;
            }
          });
        }
      };
    });
})();

这是我的测试代码。

describe('imgFit directive', function() {
  var compile;
  var scope;
  var directiveElem;

  console.log('loading sjw.util module...');
  beforeEach(function(done) {
    module('sjw.util', function() {
      console.log('completed loading module.');
    });

    inject(function($compile, $rootScope) {
      angular.module('sjw.util');
      compile = $compile;
      scope = $rootScope.$new();
      directiveElem = getCompiledElement();
      done();
    });
  });

  function getCompiledElement() {
    var myApp = angular.module('sjw.util');
    var elem = angular.element(
      '<div style="height:35px;width:35px">' +
        '<img ' +
          'ng-src="http://random_image_url" img-fit>' +
      '</div>' +
      '<div style="height:35px;width:35px">' +
        '<img ' +
          'ng-src="http://random_image_url" img-fit>' +
      '</div>');
    var compiledDirective = compile(elem)(scope);
    scope.$digest();
    return compiledDirective;
  }

  it('should assign width to parent width when image is square', function() {
    var squareImageParent = directiveElem[0];
    console.log(directiveElem);
    expect(squareImageParent).not.toBe(null);

    var imageNode = squareImageParent.childNodes[0];
    expect(imageNode).toBeDefined();
    console.log(imageNode);
    console.log(imageNode.style);
    //expect(imageNode.style.height == '35px').toBe(true);
  });
});

Answer 1

我驱除了这个恶魔。我的问题在于指令本身。我的图片并没有在我使用的无头浏览器中完成加载。所以＆＃39;负载＆＃39;活动在＆＃39; imgFit.link＆＃39;永远不会开枪。显然是个问题。这就是为什么插入我的超时（在上面的评论中）是有帮助的。它允许图像完成加载。丑陋的黑客，但似乎我无法知道幻影何时会加载图像。

  beforeEach(function(done) {
    module('sjw.util');

    inject(function($compile, $rootScope) {
      compile = $compile;
      scope = $rootScope.$new();
      directiveElem = getCompiledElement();

      // wait for the images to finish loading.
      setTimeout(done, 2000);
    });
  });

角度测试不执行指令代码

1 个答案: