Can't assert DOM change with Asynchronous JS Test Driver

Question

I have a function that gracefully loads an image inside a specified container. The below function WORKS, but the unit test doesn't (I know, shame, shame, code before test).

The first 3 asserts work, the last 2 do not (tested by commenting one then the other, then both).

I thought, at first, that this was an issue of the image not loading in time for the assert, and so I made the test asynchronous. But in Firebug it maybe seems my function isn't updating the same DOM? Is that possible? If so, how can I correct this behavior?

Here's the function:

function insertImage(container, url) {
    var img = new Image();

    $(img)
      .load(function () {
         $(this).hide();
         $(container)
           .removeClass("loading")
           .append(this);

         $(this).fadeIn();
    })
      .attr("id", "testImg")
      .attr("src", url);
};

Here's the test case:

var ImageTest = AsyncTestCase('ImageTest');

ImageTest.prototype.testInsertImage = function(queue) {
    var url = "test/resources/testimage.jpg"; 
    var testContainer;
    var testImage;

    assertUndefined(this.testContainer); // PASSES
    /*:DOC testContainer = <div id="testDiv"></div>*/
    assertNotUndefined(this.testContainer); // PASSES
    insertImage("#testDiv", url);

    queue.call('Step 1: Wait 5 seconds for Image', function(callbacks) {
        var myCallback = callbacks.add(function() {
            testImage = document.getElementById("testImg");
        });
        window.setTimeout(myCallback, 5000);
    });

    queue.call('Step 2: Assert Image loaded', function() {
        assertTrue(this.testContainer != null); // PASSES
        assertTrue(this.testImage != null);  // FAILS
        assertTrue(this.testContainer.hasChildNodes()); // FAILS
    });
};

score 0 · Answer 1 · answered Oct 04 '14 at 02:47

The DOM that is updated is one and the same. You appear to have two issues:

1) You semi-randomly use this. in your tests.

2) .hasChildNodes() will fail if your comment is right that this.testContainer = <div id="testDiv"></div>

It may also be a good idea to wrap the initial asserts in a queue.call().

Can't assert DOM change with Asynchronous JS Test Driver

1 Answers1