Question

我刚刚开始使用QUnit，遇到了一个问题。

当我编写JavaScript文件时，我将所有变量放在页面顶部，如下所示：

var $input1 = $('#input1');
var $submit = $('#submit');

然后，我将这样的事件连接起来：

$submit.on('click', function (e) {
    submit(e);
});

这很有效，并且是一种不必每次需要时都能继续查找所有元素的好方法。（不要随地随地使用$('#submit')乱丢垃圾。）

但是，现在我正在使用QUnit运行测试，每次运行新测试时，qunit-fixture div中的项都会被替换。（我正在重写其他人所做的一些代码，因此有一些初步的现有测试。）

截至目前，其他人编写的测试会将一些静态HTML附加到模块的qunit-fixture中的beforeEach div。

最后一个重要的注意事项，这是ASP.NET MVC项目的一部分，我们正在使用chutzpah运行测试，因此我们不会使用显式HTML页面来运行每个测试文件。我们的目的是在命令行中运行它们，尤其是作为构建过程的一部分。

当我们没有为他们构建完整的HTML页面时，如何让那些应该始终在页面上的静态项目保持这种状态？

修改我已经对此做了一些研究，因为我在测试文件中将HTML添加到DOM中，当我在顶部选择变量时，那些元素不在页面上但是在文件中我测试。

Answer 1

事实证明，Chutzpah是个问题。他们用来测试的HTML绝对是可怕的。所有脚本都在<head>标记中，因此在将任何HTML添加到DOM之前，它们将始终被处理。解决此问题的方法是使用Customizable Test Harness。

不幸的是，他们的文档没有提供有关如何实际制作此文档的任何信息。他们列出了你需要包含的项目以供他们替换，但是（与所有JavaScript文件一样）他们的订单非常重要，而且不一定按照他们列出的顺序。这是我使用的，它的效果很好。

<html>
    <head>
        <title>Chutzpah tests</title>

        @@ReferencedCSSFiles@@
    </head>
    <body>
        <h1 id="qunit-header">Unit Tests</h1>
        <h2 id="qunit-banner"></h2>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>

        @@TestFrameworkDependencies@@
        @@CodeCoverageDependencies@@
        @@TestHtmlTemplateFiles@@

        @@ReferencedJSFiles@@

        @@TestJSFile@@

        @@AMDTestPath@@
        @@AMDModuleMap@@
    </body>
</html>

这样，您就可以将任何想要的静态HTML添加到文件中。但是，有一些警告：

qunit-fixture div 必须与其他QUnit元素处于同一级别。
qunit-fixture div 必须会立即跟随qunit-tests div。

但是，通过在页面底部包含所有CSS，它的行为就像您在任何HTML页面中所期望的那样，您可以自己编写它们位于同一位置的位置。

此外，您需要将以下信息添加到chutzpah.json文件中：

"CustomTestHarnessPath": "CustomTestHarness.html",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [
    { "Includes": ["*.js"]}
]

如果您将HTML页面放在与chutzpah.js和测试相同的位置，则还需要添加Tests过滤器，以便不会尝试运行HTML页面作为测试。

运行QUnit测试时，静态选定的变量会丢失

1 个答案: