Question

我正在尝试对一个看起来如下的简单指令进行单元测试：

angular.module('blog').directive('imageOnLoad', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, fn) {

            element.bind('load', function() {
                scope.$emit('resizeContent');
            });

        }
    };
});

我可以看到我需要在这里测试的两件事是它绑定到图像加载事件，而事件又发出resizeContent事件。

我的单元测试中有以下内容 - 目前只测试事件绑定：

describe('imageOnLoad', function() {

  beforeEach(module('blog'));

  var scope,compile, element;

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

    var elementString = '<img ng-src="123.jpg" image-on-load />';
    element = $compile(elementString)(scope);
  }));

  it('should bind to the load event of the image', function() {

    spyOn(element, 'bind').andCallThrough();

    expect(element.bind).toHaveBeenCalled();

  });
});

我的问题：加载事件似乎永远不会发生。我的第一个猜测是因为123.jpg图像不存在 - 如果是这样，我的问题是如何去嘲笑那样我就不必携带物理图像文件了。

Answer 1

让它工作，这也是我设置它的顺序问题。它通过调用它来隐式测试图像加载事件绑定。这是工作代码：

describe('imageOnLoad', function() {

  beforeEach(module('blog'));

  var scope,compile, element;

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

    element = angular.element('<img ng-src="123.jpg" image-on-load />');
    $compile(element)(scope);
  }));

  it('should emit the resizeContent signal when the load event occurs', function() {

    spyOn(scope, '$emit');
    element.trigger('load');
    expect(scope.$emit).toHaveBeenCalledWith('resizeContent');

  });
});

Answer 2

element = $compile(elementString)(scope);

在该行之后立即尝试 - 应该有效：

element.trigger('load');

测试jQuery面条不是一个好主意。

如何在AngularJS / Jasmine单元测试中模拟图像加载事件？

2 个答案: