为什么Qunit没有抓住我的2+测试?

时间:2014-03-29 18:26:11

标签: javascript jquery unit-testing jquery-mobile qunit

我正试图让一系列测试在Qunit中运行。我正在使用JQM并使用他们的testsuite,其中包含一个$.mobile.testHelper对象,我正在添加方法。

这是我的代码(带注释和日志):

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

我需要在测试条件运行后触发“步骤”,但无法使其工作,所以我使用了不好的setTimeout

我的问题是第一次测试通过,第二次测试正确启动时间间隔,而UI呈现,但是当找到元素时,QUNIT错误地与Expected 2 assertions, but 1 were run一起出错,同时我的控制台报告条件是真的。

问题:
从上面的代码中,我的测试例程中是否存在错误,因为Qunit错误输出不足以快速运行runTest?另外,我很乐意以更好的方式触发"step"

谢谢!

1 个答案:

答案 0 :(得分:0)

确定。经过多次干预:

出了什么问题:

  • 我的点击选择器是$(element:contains(...),它搜索了文档与iframe $i.find("eleme...修复此问题。
  • 我为 test_runner 添加了第二个侦听器,一旦测试运行就会触发。只有在运行所有测试后,我才会触发start()。这样Qunit必须等待: - )

和工作代码(见变更注释(1),(2),(3)):

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

中提琴。很好地工作。