为什么Qunit无法赶上我运行的2个以上的测试？

Question

I'm trying to get a sequence of tests to work in Qunit. I'm working with JQM and am using their testsuite, which includes a $.mobile.testHelper object, which I'm adding methods to.

Here is my code (with comments and logs):

// my test page is loaded inside an iframe
var frame = document.getElementsByTagName("iframe")[0];
var d = frame.contentDocument;
var w = frame.contentWindow;
var $i = w.$(d);
var $body = w.$("body");

// forcing $(body) as event target
$.testHelper.eventTarget = $body;

// sets "one" listener on "step" event and jumps to next method when triggered
$.testHelper.stepSequence = function (fns) {
    $.testHelper.eventSequence("step", fns);
};

// run a test
$.testHelper.runTest = function (command, condition) {
    console.log("RUNNING TEST...");
    ok(condition, command);
};

// try 10x if a condition is met, wait 1000ms in between
$.testHelper.countDown = function (arr, command) {
    var condition, is_done;
    var ticker = 0;
    var i = w.setInterval(function () {

    switch (command) {
        case "verifyAttribute":
            condition = $i.find(arr[0]).eq(0).attr(arr[1]).indexOf(arr[2]) > -1;
            break;
        case "waitForElementPresent":
            condition = $i.find(arr[0]).length > 0;
            break;
        }
        if (condition) {
            console.log("CONDITION PASSED, RUN TEST");
            $.testHelper.runTest(command, condition);
            w.clearInterval(i);
        }
        ticker += 1;
        console.log(ticker);
        if (ticker === 10) {
            console.log("FAILED, RUN WITH undefined to fail test");
            $.testHelper.runTest(command, condition);
            w.clearInterval(i);
        }
    }, 1000);
};

// my test module
module("UI Basic Interaction");
asyncTest("${base_url}", function () {
    expect(2);

    // here is my sequence of methods
    $.testHelper.stepSequence([
        function () {
            w.setTimeout(function () {
                $body.trigger("step");
            }, 800);
            $.testHelper.countDown(["div#global-panel", undefined, undefined],         "waitForElementPresent");
        },
        function () {
            w.setTimeout(function () {
                $body.trigger("step");
            }, 800);
            $("a:contains('Menu')").trigger("click");
        },
        function () {
            w.setTimeout(function () {
                $body.trigger("step");
            }, 800);
            $.testHelper.countDown(["div#global-panel", "class", "ui-panel-open"], "verifyAttribute");
        },
        function () {
            w.setTimeout(function () {
                $body.trigger("step");
            }, 800);
            $("h1:contains('My Account')").trigger("click");
        },
        function () {
            start();
        }
    ])
});

I need to trigger "step" AFTER the test conditions runs, but can't get it to work, so I'm using the no-nice setTimeout

My problem is that the first test passes, the 2nd test correctly starts the interval, while the UI renders, but when the element is found, QUNIT errors out with Expected 2 assertions, but 1 were run pretty much at the same time my console reports the condition to be true.

Question:
From the code above, is there an error in my test routine, that does not run runTest "fast" enough, because Qunit errors out? Also I would be happy for a nicer way to triggering "step" .

Thanks!

Answer 1

Ok. After much meddling:

What was wrong:

• My click selector was $(element:contains(...) which searched the document vs the iframe $i.find("eleme... fixed this.
• I added a 2nd listener for test_runner , which triggers once a test runs. Only after all tests are run, I trigger start() . This way Qunit has to wait :-)

and the working code (see comments (1), (2), (3) for changes):

var frame = document.getElementsByTagName("iframe")[0];
var d = frame.contentDocument;
var w = frame.contentWindow;
var $i = w.$(d);

// (1) set counter for tests ran 
// This allows to trigger start() after all tests are done
var test_log = 0;
var $body = w.$("body");

$.testHelper.eventTarget = $body;
$.testHelper.stepSequence = function (fns) {
    $.testHelper.eventSequence("step", fns);
};
$.testHelper.runTest = function (command, condition) {
    ok(condition, command);
    $body.trigger("step");
    // (2) When running a test, also trigger a runner on body to log no of tests
    $body.trigger("test_runner");
};
$.testHelper.countDown = function (arr, command) {
    var condition, is_done;
    var ticker = 0;
    var i = w.setInterval(function () {
        switch (command) {
        case "verifyAttribute":
            condition = $i.find(arr[0]).eq(0).attr(arr[1]).indexOf(arr[2]) > -1;
            break;
        case "waitForElementPresent":
            condition = $i.find(arr[0]).length > 0;
            break;
        }
        if (condition) {
            console.log("PASSED TEST");
            $.testHelper.runTest(command, condition);
            w.clearInterval(i);
        }
        ticker += 1;
        if (ticker === 10) {
            console.log("FAILED");
            $.testHelper.runTest(command, condition);
            w.clearInterval(i);
        }
    }, 1000);
};

module("UI Basic Interaction");
asyncTest("${base_url}", function () {
    expect(2);
    $.testHelper.stepSequence([
        function () {
        // (3) set a listener for tests ran
        // once all tests are done, start()
            $body.on("test_runner", function (e) {
                test_log += 1;
                if (test_log === 2) {
                    start();
                }
            });
            $body.trigger("step");
        },
        function () {
            $.testHelper.countDown(
                ["div#global-panel", undefined, undefined], 
                "waitForElementPresent"
            );
        },
        function () {
            $i.find("a:contains('Menu')").trigger("click");
            $.testHelper.countDown(
                ["div#global-panel", "class", "ui-panel-open"], 
                "verifyAttribute"
            );
        },
        function () {
            $i.find("h1:contains('My Account')").trigger("click");
        }
    ])
});

Viola. Works nicely.