使用 jasmine 测试 imagesLoaded() 进度回调

Question

我有以下代码：

    $.ajax({
      url: API + "item/" + item_id.replace('-',':'),
      beforeSend: function(xhr){xhr.setRequestHeader('x-customer', customer);},
      format: "json",
      success: function( data ){
          var template_name =  data.source + settings.overlay_style;
          $('#modal .modal-content').html(Handlebars.templates[template_name](data));
        /* Handle missing avatars */
        $('#modal-avatar-image').imagesLoaded()
            .progress( function( instance, image ) {
                if (!image.isLoaded) {
                    image.img.src = "/images/404_avatar.svg";
                    image.img.alt = "The avatar for this user could not be found. Showing placeholder";
                    image.img.title = "The avatar for this user could not be found. Showing plac eholder";
                }
            });
        /* Handle missing main content */
        $('.modal-img').imagesLoaded()
            .progress( function( instance, image ) {
                if (!image.isLoaded) {
                    image.img.src = "/images/404_image.svg";
                    image.img.alt = "This image is lost in space. Could be removed by user or could be lost in a remote tube";
                    image.img.title = "This image is lost in space. Could be removed by user or could be lost in a remote tube";
                }
                $('.modal-img').removeClass('loading');
            });
});

我已经为这段代码编写了几个测试，但我似乎无法让它执行：

 var attrs = ['src', 'alt', 'title'];
           attrs.forEach( function(attr, idx, arr) {
                it('should set default ' + attr + ' for img#modal-avatar-image', function () {
                    spyOn($, 'ajax').and.callFake(function(e){
                        e.success({'source': 'twitter'});
                    });
                    openModal('test');
                    expect(val).toBeDefined();
                    val = $($("#modal-avatar-image")[0]).attr(attr);
                    if(attr === 'src'){
                        //expect the src to chnage from the old value
                        expect(val !== src).toBeTruthy();
                    }
                });
            });
            attrs.forEach( function(attr, idx, arr) {
                it('should set default ' + attr + ' for img.modal-img', function () {
                    spyOn($, 'ajax').and.callFake(function(e){
                        e.success({'source': 'twitter'});
                    });
                    openModal('test');
                    val = $($(".modal-img")[0]).attr(attr);
                    expect(val).toBeDefined();
                    if(attr === 'src'){
                        //expect the src to chnage from the old value
                        expect(val !== src).toBeTruthy();
                    }
                });
            });

输出：

Expected undefined to be defined.
    Error: Expected undefined to be defined.
        at Object.<anonymous> (/home/oleg/dev/hub/test/fed/api.scenerio.js:346:41)
    Expected false to be truthy.
    Error: Expected false to be truthy.
        at Object.<anonymous> (/home/oleg/dev/hub/test/fed/api.scenerio.js:350:53)

    Expected undefined to be defined.
    Error: Expected undefined to be defined.
        at Object.<anonymous> (/home/oleg/dev/hub/test/fed/api.scenerio.js:346:41)

    Expected false to be truthy.
    Error: Expected false to be truthy.
        at Object.<anonymous> (/home/oleg/dev/hub/test/fed/api.scenerio.js:365:53)

    Expected undefined to be defined.
    Error: Expected undefined to be defined.
        at Object.<anonymous> (/home/oleg/dev/hub/test/fed/api.scenerio.js:362:41)

    Expected undefined to be defined.
    Error: Expected undefined to be defined.
        at Object.<anonymous> (/home/oleg/dev/hub/test/fed/api.scenerio.js:362:41)

Answer 1

在你的第一个 forEach 循环中，这个：

expect(val).toBeDefined();
val = $($("#modal-avatar-image")[0]).attr(attr);

应该是：

val = $($("#modal-avatar-image")[0]).attr(attr);
expect(val).toBeDefined();

看起来您在定义之前正在对 val 运行断言。