Question

我开始深入了解qUnit，但我遇到了一个问题，我不知道如何正确编写测试。

当按下按钮时，该函数基本上会警告jQuery UI对话框。这是我的qUnit测试：

test( "If Text is Type, and Control is Textbox, Check Alert if Two Values are Present",  function() {

    //Add New Row
    $('.button').click();


    equal($('#jquery_ui_id').is(':visible'), true, "Prompt is Shown" );

});

问题是测试在qUnit中传递，但仅在重新加载时传递。因此，当我第一次运行测试时总是失败，然后在重新加载时成功。

有谁知道这里发生了什么，或者之前遇到过这种情况？

Answer 1

通常，当您重新加载页面时，qUnit测试在失败和成功之间切换，这意味着您在测试后没有正确清理并且彼此之间存在冲突。

如果您向DOM添加元素并在模块中进行操作或在不使用特殊#qunit-fixture元素的情况下进行测试，则应该在该模块的末尾删除它们，以便下一个模块可以重新开始。

有关详情，请参阅keeping qUnit tests atomic。

部分

QUnit将重置＃qunit-fixture元素内的元素每次测试，删除可能存在的任何事件。只要你仅在此灯具内使用元素，您不必手动在测试之后清理它们以使它们保持原子。

Answer 2

有同样的问题，我肯定会在元素＃qunit-fixture下渲染我所有的dom。在调查时，我发现 JQuery-UI将对话框的元素直接添加到<body>。

所以解决这个问题的方法之一就是在身体前面渲染＃qunit-fixture。在我的情况下，我在体内有javascript脚本，这不会在＃qunit-fixture下面。所以我需要在此之前从正文中删除脚本。

<html>
   <head></head>
   <div id="qunit-fixture"><!--Wrap whole body into fixture-->
       <body>
       </body>
   </div>
</html>

另一种方法是手动删除拆解中添加的东西。

module("SomeModule",
{
    teardown: function ()
    {
        $('.ui-front').remove();//Need to be reset manually, because jquery dialog add these outside of fixture...
    }
});

为了清理添加的元素，我们使用它们都具有“ui-front”类的事实。

如何为jQuery UI对话编写qUnit测试？

2 个答案: