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

xghobddn 于 2023-10-15 发布在 Angular

关注(0)|答案(3)|浏览(145)

我正在尝试对一个简单的指令进行单元测试，如下所示：

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

  });
});

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

angularjs

来源：https://stackoverflow.com/questions/27621168/how-can-i-simulate-an-image-load-event-in-angularjs-jasmine-unit-test

3条答案

按热度按时间

q35jwt9p1#

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

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

  });
});

赞(0）回复(0）举报 2023-10-15

bybem2ql2#

element = $compile(elementString)(scope);

在这行后面试试-应该可以：

element.trigger('load');

顺便说一句，测试jQuery面条并不是一个好主意。

赞(0）回复(0）举报 2023-10-15

2w3rbyxf3#

您可以通过选择图像元素并使用您想要的任何事件调用DataEventEvent来模拟加载事件。
例如，这里有一个图像，

<img hidden [src]="this.imgService.getImage()" (load)="imgLoaded()" />

如果你想模拟load事件来测试**imgLoaded（）**方法，你可以

it('imgLoaded should be called when image is preloaded', () => {
    spyOn(component, 'imgLoaded').and.callThrough();

    fixture.detectChanges();

    const preloadImage = debugElement.query(
      By.css('img')
    );

    preloadImage.triggerEventHandler('load')

    expect(component.imgLoaded).toHaveBeenCalledOnceWith();
  });

赞(0）回复(0）举报 2023-10-15

我来回答

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

3条答案

相关问题

热门标签

最新问答