無法使用異步JS測試驅動程序斷言DOM更改

Question

我有一個功能，可以在指定容器內優雅地加載圖像。 下面的函數起作用，但是單元測試沒有（我知道，可恥，可恥，測試前的代碼）。

前3個斷言工作，后2個斷言（通過先評論然后再評論，然后兩個都測試）。

起初，我認為這是映像未及時加載到斷言的問題，因此我使測試異步。 但是在Firebug中，似乎我的功能沒有更新相同的DOM？ 那可能嗎？ 如果是這樣，我該如何糾正此行為？

功能如下：

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

這是測試用例：

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

Answer 1

更新的DOM是相同的。 您似乎有兩個問題：

1）您半隨機使用this. 在您的測試中。

2）如果您對this.testContainer = <div id =“ testDiv”> </ div>的評論正確，那么.hasChildNodes（）將失敗。

將初始斷言包裝在queue.call()也是一個好主意。