Test imagesLoaded() progress callback using jasmine

Question

I have the following code:

    $.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');
            });
});

I have wrote several tests for this block of code, but I cannot seem to get it to execute:

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

Output:

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)

In your first forEach loop you are running your assertion on val before you have defined it. — Jeff, Dec 27 '14 at 14:15
Can you please extend your code to show where you declare `var val;`? Please also add the starting line number of your spec. Can you please elaborate on why you `expect()` `val` `toBeDefined()` **before** getting a value into it in the first `ìt()`? Might be intentionally or one of your mistakes. Last but not least: in the second `it()` you store an attribute value into `val`; if it's undefined this might be caused by the element `#modal-avatar-image` not inserted into the document (it might have been created but not inserted, `$("#modal-avatar-image")` won't find it then). — try-catch-finally, Dec 27 '14 at 15:32

score 3 · Accepted Answer · answered Dec 27 '14 at 14:19

In your first forEach loop, this:

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

should be:

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

Looks like you're running your assertion on val before it is defined.

Test imagesLoaded() progress callback using jasmine

1 Answers1